How to: Add MultiView Web Server Controls to a Web Forms Page

Article
10/22/2014

The MultiView and View Web server controls act as containers for other controls and markup, and provide a way for you to display alternative sets of controls and markup. The MultiView and View controls were designed primarily for use with browsers on mobile devices, but they are supported in any ASP.NET page.

To add a MultiView Web server control to a Web Forms page

From the Standard tab of the Toolbox, drag a MultiView control onto the page.
From the Standard tab of the Toolbox, drag a View control into the MultiView control.
Type any static text that you want to add into the View control. To add controls to the View control, drag them from the Toolbox into the View control to create the layout you want.
Repeat step 2 and step 3 for each View control you want to create.
Set the MultiView control's ActiveViewIndex property to the index value of the View control to display. If you do not want to display any View controls, set the property to -1.

Add code to programmatically set the ActiveViewIndex property to set which View control is displayed.

The following example shows how to work with a MultiView control. The page contains two View controls. The user clicks a RadioButton control, and in the CheckedChanged event handler for the button, code displays the appropriate View control by setting the ActiveViewIndex property. When the user clicks the Search button, code gets the value of the TextBox control in the appropriate View control.

Security Note:
This example has a text box that accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate that user input does not include script or HTML elements. For more information, see Script Exploits Overview.

<%@ Page Language="VB" %>
<script runat="server">
    Protected Enum SearchType As Integer
        NotSet = -1
        Products = 0
        Category = 1
    End Enum

    Protected Sub Button1_Click(ByVal sender As Object, _
             ByVal e As System.EventArgs)
        If MultiView1.ActiveViewIndex > -1 Then
            Dim searchTerm As String = ""
            Select Case MultiView1.ActiveViewIndex
                Case SearchType.Products
                    DoSearch(textProductName.Text, _
                        MultiView1.ActiveViewIndex)
                Case SearchType.Category
                    DoSearch(textCategory.Text, _
                        MultiView1.ActiveViewIndex)
                Case SearchType.NotSet
            End Select
        End If
    End Sub

    Protected Sub DoSearch(ByVal searchTerm As String, _
            ByVal type As SearchType)
        ' Code here to perform a search.
    End Sub

    Protected Sub radioButton_CheckedChanged(ByVal sender As _
              Object, ByVal e As System.EventArgs)
        If radioProduct.Checked Then
            MultiView1.ActiveViewIndex = SearchType.Products
        ElseIf radioCategory.Checked Then
            MultiView1.ActiveViewIndex = SearchType.Category
        End If
    End Sub
</script>

<html>
<head runat="server"></head>
<body>
    <form id="form1" runat="server">
    <div>
        Search by product or by category?
        <br />
        <asp:RadioButton ID="radioProduct" 
            runat="server" 
            autopostback="true" 
            GroupName="SearchType" 
            Text="Product" 
            OnCheckedChanged="radioButton_CheckedChanged" />
        &nbsp;
        <asp:RadioButton ID="radioCategory" 
            runat="server" 
            autopostback="true" 
            GroupName="SearchType" 
            Text="Category" 
            OnCheckedChanged="radioButton_CheckedChanged" />
        <br />
        <br />
        <asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="viewProductSearch" runat="server">
                Enter product name: 
                <asp:TextBox ID="textProductName" 
                   runat="server"></asp:TextBox>
            </asp:View>
            <asp:View ID="viewCategorySearch" runat="server">
                Enter category: 
                <asp:TextBox ID="textCategory" 
                   runat="server"></asp:TextBox>
            </asp:View>
        </asp:MultiView>&nbsp;<br />
        <br />
        <asp:Button ID="btnSearch" OnClick="Button1_Click" 
                  runat="server" Text="Search" />
     </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<script runat="server">
    public enum SearchType
    {
        NotSet = -1,
        Products = 0,
        Category = 1
    }

    protected void Button1_Click(Object sender, System.EventArgs e)
    {
        if(MultiView1.ActiveViewIndex > -1)
        {
            String searchTerm = "";
            SearchType mSearchType = 
                 (SearchType) MultiView1.ActiveViewIndex;
            switch(mSearchType)
            {
            case SearchType.Products:
                DoSearch(textProductName.Text, mSearchType);
                break;
            case SearchType.Category:
                DoSearch(textCategory.Text, mSearchType);
                break;
            case SearchType.NotSet:
                break;
            }
        }
    }

    protected void DoSearch(String searchTerm, SearchType type)
    {
        // Code here to perform a search.
    }

    protected void radioButton_CheckedChanged(Object sender, 
        System.EventArgs e)
    {
        if(radioProduct.Checked)
        {
            MultiView1.ActiveViewIndex = (int) SearchType.Products;
        }
        else if(radioCategory.Checked)
        {
            MultiView1.ActiveViewIndex = (int) SearchType.Category;
        }
    }
</script>

<html>
<head id="Head1" runat="server"></head>
<body>
    <form id="form1" runat="server">
    <div>
        Search by product or by category?
        <br />
        <asp:RadioButton ID="radioProduct" 
            runat="server" 
            autopostback="true" 
            GroupName="SearchType" 
            Text="Product" 
            OnCheckedChanged="radioButton_CheckedChanged" />
        &nbsp;
        <asp:RadioButton ID="radioCategory" 
            runat="server" 
            autopostback="true" 
            GroupName="SearchType" 
            Text="Category" 
            OnCheckedChanged="radioButton_CheckedChanged" />
        <br />
        <br />
        <asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="viewProductSearch" runat="server">
                Enter product name: 
                <asp:TextBox ID="textProductName" runat="server">
                </asp:TextBox>
            </asp:View>
            <asp:View ID="viewCategorySearch" runat="server">
                Enter category: 
                <asp:TextBox ID="textCategory" runat="server">
                </asp:TextBox>
            </asp:View>
        </asp:MultiView>&nbsp;<br />
        <br />
        <asp:Button ID="btnSearch" 
           OnClick="Button1_Click" 
           runat="server" Text="Search" />
     </div>
    </form>
</body>
</html>

How to: Add MultiView Web Server Controls to a Web Forms Page

To add a MultiView Web server control to a Web Forms page

See Also

Concepts

Other Resources

Additional resources