Partager via


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

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

  1. From the Standard tab of the Toolbox, drag a MultiView control onto the page.

  2. From the Standard tab of the Toolbox, drag a View control into the MultiView control.

  3. 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.

  4. Repeat step 2 and step 3 for each View control you want to create.

  5. 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.

  6. 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 noteSecurity 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>
    

See Also

Concepts

MultiView and View Web Server Controls Overview

Other Resources

Walkthrough: Creating Web Pages for Mobile Devices