Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
How to: Add MultiView Web Server Controls to a Web Forms Page

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 easily present alternate views of information.

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

  1. Add an <asp:MultiView> element to the page.

  2. Add <asp:View> elements as child elements of the MultiView control.

  3. Add markup and controls to each View control that you added in the previous step.

  4. Set the MultiView control's ActiveViewIndex property to the index value of the default View control to display. If you do not want to display any View controls, set the property to -1.

  5. Optionally, add button controls (Button, LinkButton, or ImageButton) to each View control to act as navigation controls. Set the CommandName and the corresponding CommandArgument property of each button to one of the values listed in the following table.

    CommandName value CommandArgument value

    NextView

    (no value)

    PrevView

    (no value)

    SwitchViewByID

    ID of the View control to switch to.

    SwitchViewByIndex

    Index number of the View control to switch to.

  6. If you do not include navigation buttons, add code to programmatically set the ActiveViewIndex property to specify which View control to display.

    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. In this example, the search function does not perform a search; it displays the search type and the search term.

    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 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
        
        Protected Sub buttonSearch_Click(ByVal sender As Object, _
                ByVal e As System.EventArgs)
            Dim searchTerm As String = ""
            If MultiView1.ActiveViewIndex > -1 Then
                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 searchTarget As SearchType)
            Dim results As String = ""
            results = "You are searching {0} for {1}."
            labelResults.Text = String.Format(results, _
                searchTarget.ToString(), searchTerm)
        End Sub
        
    </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="buttonSearch_Click" 
            runat="server" Text="Search" />
          <br />
          <br />
          <asp:Label ID="labelResults" runat="server" ></asp:Label>
      </div>
      </form>
    </body>
    </html>
    

    <%@ Page Language="C#" %>
    <script runat="server">
        public enum SearchType
        {
            NotSet = -1,
            Products = 0,
            Category = 1
        }
    
        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;
            }
        }
    
        protected void buttonSearch_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)
        {
            String results = "You are searching {0} for {1}.";
            labelResults.Text = 
                String.Format(results, type.ToString(), searchTerm);
        }
    </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="buttonSearch_Click" 
            runat="server" Text="Search" />
          <br />
          <br />
          <asp:Label ID="labelResults" runat="server" ></asp:Label>
      </div>
      </form>
    </body>
    </html>
    

See Also

Community Additions

ADD
Show:
© 2015 Microsoft