MultiView Control In ASP.NET

In this article, we will learn about how we can use MultiView control in ASP.NET.

MultiView control is used to divide the content of a page into different groups and divide the content of a page into different groups.

This is a server-side control, To use MultiView we can drag it from the toolbox of visual studio or ASP.NET provides its own tag to use MultiView. The example is given below.

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

It is always used with a View control as:

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

All the View controls are held together in a MultiView control and Each View control manages one group of content. The MultiView control is responsible for displaying one View control at a time. The View displayed is called the active view.

The MultiView control has its own properties that are tabled below.

Property	Description
Views	Collection of View controls inside the MultiView control.
ActiveViewIndex	The index indicates the active view. The index is -1, if no view is active.
Visible	To set visibility of control on the form.

The CommandName attribute of the button control associated with the navigation of the MultiView control.

For example, if a button control with CommandName value as NextView is associated with the navigation of the multiview, it automatically navigates to the next view when the button is clicked.

The default command names of the above properties:

NextView
PrevView
SwitchViewByID
SwitchViewByIndex

Example

In this example, the page has four views. Each view has a button(s) for navigating through the views.

Create a new project and select the ASP.NET Empty Web Site.

Now, right-click the project name (CRUD Operations) in the Solution Explorer and select Add -> Add New Item.

Now, let’s add a new Default.aspx file, select Web Form and click Add.

Open the Default.aspx file and add the code in it.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 15%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Students Details</h1>
            <asp:MultiView ID="MultiView1" runat="server">
                <asp:View ID="View1" runat="server">
                    First Name:
                    <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                    <asp:Button ID="btnNext1" runat="server" Text="Next" CommandName="NextView" />
                </asp:View>
                <asp:View ID="View2" runat="server">
                    Last Name:
                    <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                    <asp:Button ID="btnPrev1" runat="server" Text="Prev" CommandName="PrevView" />
                    <asp:Button ID="btnNext2" runat="server" Text="Next" CommandName="NextView" />
                </asp:View>
                <asp:View ID="View3" runat="server">
                    Age:
                    <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
                    <asp:Button ID="btnPrev2" runat="server" Text="Prev" CommandName="PrevView" />
                    <asp:Button ID="btnNext3" runat="server" Text="Next" OnClick="btnNext3_Click" />
                </asp:View>
                <asp:View ID="View4" runat="server">
                    <table class="auto-style1">
                        <tr>
                            <td>First Name:</td>
                            <td>
                                <asp:Label ID="lblFirstName" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>Last Name:</td>
                            <td>
                                <asp:Label ID="lblLastName" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>Age:</td>
                            <td>
                                <asp:Label ID="lblAge" runat="server"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </asp:View>
            </asp:MultiView>
        </div>
    </form>
</body>
</html>

Open the Default.aspx.cs file and add the code in it.

using System;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            MultiView1.ActiveViewIndex = 0;
    }

    protected void btnNext3_Click(object sender, EventArgs e)
    {
        MultiView1.ActiveViewIndex = 3;
        lblFirstName.Text = txtFirstName.Text;
        lblLastName.Text = txtLastName.Text;
        lblAge.Text = txtAge.Text;
    }
}

That’s it.

Output:

Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.