通过

如何：向 Web 窗体页添加 MultiView Web 服务器控件 (Visual Studio)

  • 项目

更新：2007 年 11 月

MultiView 和 View Web 服务器控件用作其他控件和标记的容器，并提供了一种显示控件和标记备选集的方式。MultiView 和 View 控件最初主要设计用于移动设备的浏览器中，但现在任何 ASP.NET 页面都支持它们。

向 Web 窗体页添加 MultiView Web 服务器控件

  1. 从工具箱的**“标准”**选项卡中，将 MultiView 控件拖动到页面上。

  2. 从工具箱的**“标准”**选项卡中，将 View 控件拖动到 MultiView 控件上。

  3. 键入任何您想要添加到 View 控件中的静态文本。若要向 View 控件添加控件，请将它们从“工具箱”中拖动到 View 控件上，以创建您想要的布局。

  4. 对要创建的每一个 View 控件重复步骤 2 和 3。

  5. 将 MultiView 控件的 ActiveViewIndex 属性设置为要显示的 View 控件的索引值。如果不想显示任何 View 控件，则将此属性设置为 -1。

  6. 通过添加代码来以编程方式设置 ActiveViewIndex 属性，从而设置要显示的 View 控件。

    下面的示例演示如何使用 MultiView 控件。该页包含两个 View 控件。用户单击一个 RadioButton 控件，在该按钮的 CheckedChanged 事件处理程序中，代码通过设置 ActiveViewIndex 属性来显示合适的 View 控件。当用户单击**“搜索”**按钮时，代码将从适当的 View 控件中获取 TextBox 控件的值。

    ms247215.alert_security(zh-cn,VS.90).gif安全说明：

    该示例具有一个文本框，用于接受用户输入，这是一个潜在的安全威胁。默认情况下，ASP.NET 网页验证用户输入是否不包括脚本或 HTML 元素。有关更多信息，请参见脚本侵入概述。

    		 
    <%@ 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>

请参见

概念

MultiView 和 View Web 服务器控件概述

其他资源

演练：为移动设备创建网页