asp:MultiView Control

MultiView is a simpler way to declare multiple views (<asp:View> is a separate control that is used as a child control of MultiView control) and show only one at a time. It has no default interface like Calendar, you get only whatever you add in its different views. When it is rendered on the page, it is implemented through the HTML tag you place inside views.

You can navigate through views either by setting its ActiveViewIndex property or by putting buttons with preset command names. To Navigate through different views, you need to put Buttons/LinkButton/ImageButton on the views with CommandName as NextView(to navigate to next view) and PrevView(to navigate to previous view).

Following are some important properties that are very useful.

ActiveViewIndex	Gets or sets the active view index.
OnActiveViewChanged	Method name that fires when Active View Changed (When you click Next or Previous buttons).

DEMO : MultiView

Show Source Code

Header of View 1

Navigate Views:

Navigate Views:

// MultiView ///////////////////////////////
<asp:MultiView ID="MutliView1" runat="Server" ActiveViewIndex="0" OnActiveViewChanged="AutoSelectDropDown">
    <asp:View ID="View1" runat="server">
        <table style="border:1px solid #c0c0c0;">
            <tr style="background-color:#c0c0c0;">
                <th>
                    Header of View 1
                </th>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="textBox1" runat="Server"></asp:TextBox>
                    <asp:Button ID="btnSubmit" runat="Server" Text="Submit" OnClick="SubmitFrom1stView" />
                </td>
            </tr>
            <tr>
                <td>
                    <hr />
                    Navigate Views:<br />
                    <asp:Button ID="cmdNext1" runat="server" Text="Next View >" CommandName="NextView" Font-Size="8pt" />
                </td>
            </tr>
        </table>
    </asp:View>
    <asp:View ID="View2" runat="Server">
        <table style="border: 1px solid #c0c0c0;">
            <tr style="background-color: #c0c0c0;">
                <th>
                    Header of View 2
                </th>
            </tr>
            <tr>
                <td>
                    <asp:Image ID="img1" runat="Server" ImageUrl="~/images/samples/NewAdvance.gif" AlternateText="DotNetFunda.com" />
                </td>
            </tr>
            <tr>
                <td><hr />
                    Navigate Views:<br />
                    <asp:Button ID="Button4" runat="server" Text="< Prev View" CommandName="PrevView" Font-Size="8pt" /> |
                    <asp:Button ID="Button1" runat="server" Text="Next View >" CommandName="NextView" Font-Size="8pt"  />
                </td>
            </tr>
        </table>
    </asp:View>
     <asp:View ID="View3" runat="Server">
        <table style="border: 1px solid #c0c0c0;">
            <tr style="background-color: #c0c0c0;">
                <th>
                    Header of View 3
                </th>
            </tr>
            <tr>
                <td>
                    <asp:Image ID="Image1" runat="Server" ImageUrl="~/images/samples/DotNetFunda3.gif" AlternateText="DotNetFunda.com" />
                </td>
            </tr>
            <tr>
                <td>
                    <hr />
                    Navigate Views:<br />
                    <asp:LinkButton ID="Button2" runat="server" Text="< Previous" CommandName="PrevView" /> | 
                    <asp:LinkButton ID="Button3" runat="server" Text="Next >" CommandName="NextView" />
                </td>
            </tr>
        </table>
    </asp:View>
     <asp:View ID="View4" runat="Server">
        <table style="border: 1px solid #c0c0c0;">
            <tr style="background-color: #c0c0c0;">
                <th>
                    Header of View 4
                </th>
            </tr>
            <tr>
                <td>
                    <asp:Image ID="Image2" runat="Server" ImageUrl="~/images/samples/DotNetFunda2.gif" AlternateText="DotNetFunda.com" />
                </td>
            </tr>
            <tr>
                <td>
                    <hr />
                    Navigate Views:<br />
                    <asp:Button ID="Button5" runat="server" Text="< Prev View" CommandName="PrevView" Font-Size="8pt" />
                </td>
            </tr>
        </table>
    </asp:View>
</asp:MultiView>




// Server Side Event ///////////////////////////
protected void Page_Load(object sender, EventArgs e)
    {
        // fires only when Form is posted back
        if (!IsPostBack)
        {
            dropViews.DataSource = MutliView1.Views;
            dropViews.DataTextField = "ID";
            dropViews.DataBind();
        }
    }

    // Fires when 1st view button is clicked
    protected void SubmitFrom1stView(object sender, EventArgs e)
    {
        lblMessage.Text = "<hr />TextBox Value is: <b>" + textBox1.Text + "</b>";
    }

    // Fires when DropDown selected index changes
    protected void ChangeTheViews(object sender, EventArgs e)
    {
        MutliView1.ActiveViewIndex = dropViews.SelectedIndex;
    }

    // Fires when Active Window changes. 
    // When Next or Previous button is clicked.
    protected void AutoSelectDropDown(object sender, EventArgs e)
    {
        dropViews.SelectedIndex = MutliView1.ActiveViewIndex;
    }