Поделиться через

Практическое руководство. Добавление серверного веб-элемента управления MultiView на страницу Web Forms

  • Статья

Обновлен: Ноябрь 2007

Серверные элементы управления MultiView и View выступают в качестве контейнеров для других элементов управления и разметки и предоставляют возможности для отображения альтернативного набора элементов управления и разметки. Элементы управления MultiView и View предназначены главным образом для использования с обозревателями для мобильных устройств, но они поддерживаются на любой странице ASP.NET.

Добавление веб-серверного элемента управления MultiView на страницу Web Forms

  1. Из вкладки Стандартные панели элементов перетащите на страницу элемент управления MultiView.

  2. Со вкладки Стандартные панели элементов перетащите элемент управления View на элемент MultiView.

  3. Введите статический текст, который требуется добавить в элемент управления View. Чтобы добавить элементы управления View, перетащите их из панели элементов на элемент управления View для создания нужного макета.

  4. Повторите шаги 2 и 3 для каждого элемента управления View, который требуется создать.

  5. Задайте свойство ActiveViewIndex элемента управления MultiView для отображения значение индекса элемента управления View. Если не требуется отображать все элементы управления View, то присвойте свойству значение -1.

  6. Добавьте код для программного присвоения значения свойству ActiveViewIndex, которое отвечает за отображение элемента управления View.

    В следующем примере показана работа с элементом управления MultiView. Страница содержит два элемента управления View. Пользователь выбирает элемент управления RadioButton, и в обработчике событий CheckedChanged переключателя код отображает соответствующий элемент управления View путем задания свойства ActiveViewIndex. При нажатии кнопки Поиск код получает значение элемента управления TextBox из соответствующего View.

    ms247215.alert_security(ru-ru,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

Другие ресурсы

Walkthrough: Creating Web Pages for Mobile Devices