How to use MultiView control in ASP .NET
How To .NET

How to use MultiView control in ASP .NET

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

The MultiView control in ASP is useful for creating tab-design in your web pages. It serves as a container for views, enabling the user to switch between different views.

What is a view

A view is an ASP .NET control that holds other web controls such as TextBox, RadioButton etc. We can call view as a page in a multi-page form.

ASP .NET MultiView Control

To use the MultiView control, create an ASP .NET web application and add the following markup to your web form.

<asp:MultiView ID="MultiView1" runat="server"></asp:MultiView>

You cannot directly add any HTML code to the MultiView control. It can only hold the View control that holds the HTML markup.

Add view controls to the MultiView:

<asp:MultiView ID="MultiView1" runat="server">
     <asp:View ID="View1" runat="server">
         <h1>View page 1</h1>
     </asp:View>
     <asp:View ID="View2" runat="server">
         <h1>View page 2</h1>
     </asp:View> 
</asp:MultiView>

Each View is automatically indexed with a number starting from zero. So the first view will have the index number zero, the second view has index 1 and so on.

With ActiveViewIndex attribute, the default page to be displayed in the MultiView control can be specified. Here’s the modified code.

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

Working with Views

The following example demonstrates switching the Views in a MultiView control.

The markup:

<form id="form1" runat="server">
     <div>
         <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
             <asp:View ID="View1" runat="server">
                 <asp:Label ID="Label1" runat="server" Text="Page 1"></asp:Label>
                  <asp:Button ID="btnNext" runat="server" Text="Next Page >" OnClick="btnNext_Click"/>
             </asp:View>
             <asp:View ID="View2" runat="server">
                 <asp:Label ID="Label2" runat="server" Text="Page 2"></asp:Label>
                 <asp:Button ID="btnPrev" runat="server" Text="< Previous Page" OnClick="btnPrev_Click"/>
             </asp:View>
         </asp:MultiView>
     </div>
</form>

Code behind:

protected void btnNext_Click(object sender, EventArgs e)
{
    MultiView1.ActiveViewIndex = 1;
}
protected void btnPrev_Click(object sender, EventArgs e)
{         
    MultiView1.ActiveViewIndex = 0;     
}