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

  • Article

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

Concepts

MultiView and View Web Server Controls Overview