How to use MultiView control in ASP .NET

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;     
}