Compartilhar via

Como: Adicionar controles de servidor Web MultiView a uma página de Web Forms

  • Artigo

Os controles MultiView e View do servidor Web atuam como recipientes para outros controles e tags, e fornecem um caminho para você exibir conjuntos de marcações e controles.Os controles MultiView e View foram projetados principalmente para serem usados com navegadores em dispositivos móveis, mas eles têm suporte em qualquer página do ASP.NET.

Para adicionar um controle do servidor Web MultiView a uma página de Web Forms

  1. A partir da guia Padrão da Caixa de Ferramentas, arraste um controle MultiView para a página.

  2. A partir da guia Standard da caixa de ferramentas, arraste um controle View para dento do controle MultiView.

  3. Digite qualquer texto estático que você deseja adicionar ao controle View.Para adicionar controles para o controle View, arraste-os da caixa de ferramentas para o controle View para criar o layout que você deseja.

  4. Repetir a etapa 2 e a etapa 3 para cada controle View que você deseja criar.

  5. Defina a propriedade ActiveViewIndex do controle MultiView com o valor do índice do controle View para exibir.Se você não quiser exibir quaisquer controles View, defina a propriedade com -1.

  6. Adicionar o código para definir programaticamente a propriedade ActiveViewIndex que determina qual controle View é exibido.

    O exemplo a seguir mostra como trabalhar com um controle MultiView.A página contém dois controles View.O usuário clica em um controle RadioButton e no manipulador de evento CheckedChanged para o botão, o código que exibe o controle View apropriado através da definição da propriedade ActiveViewIndex.Quando o usuário clica o botão Search, o código obtém o valor do controle TextBox no controle Viewapropriado.

    Observação de segurança:

    Este exemplo tem uma caixa de texto que aceita entrada do usuário, que é uma ameaça potencial de segurança.Por padrão, páginas Web ASP.NET validam se as entradas de usuário não incluem scripts ou elementos HTML.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.

    		 
    <%@ Page Language="VB" %>
<script >
    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 ></head>
<body>
    <form id="form1" >
    <div>
        Search by product or by category?
        <br />
        <asp:RadioButton ID="radioProduct" 

            autopostback="true" 
            GroupName="SearchType" 
            Text="Product" 
            OnCheckedChanged="radioButton_CheckedChanged" />
        &nbsp;
        <asp:RadioButton ID="radioCategory" 

            autopostback="true" 
            GroupName="SearchType" 
            Text="Category" 
            OnCheckedChanged="radioButton_CheckedChanged" />
        <br />
        <br />
        <asp:MultiView ID="MultiView1" >
            <asp:View ID="viewProductSearch" >
                Enter product name: 
                <asp:TextBox ID="textProductName" 
                   ></asp:TextBox>
            </asp:View>
            <asp:View ID="viewCategorySearch" >
                Enter category: 
                <asp:TextBox ID="textCategory" 
                   ></asp:TextBox>
            </asp:View>
        </asp:MultiView>&nbsp;<br />
        <br />
        <asp:Button ID="btnSearch" OnClick="Button1_Click" 
                   Text="Search" />
     </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<script >
    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" ></head>
<body>
    <form id="form1" >
    <div>
        Search by product or by category?
        <br />
        <asp:RadioButton ID="radioProduct" 

            autopostback="true" 
            GroupName="SearchType" 
            Text="Product" 
            OnCheckedChanged="radioButton_CheckedChanged" />
        &nbsp;
        <asp:RadioButton ID="radioCategory" 

            autopostback="true" 
            GroupName="SearchType" 
            Text="Category" 
            OnCheckedChanged="radioButton_CheckedChanged" />
        <br />
        <br />
        <asp:MultiView ID="MultiView1" >
            <asp:View ID="viewProductSearch" >
                Enter product name: 
                <asp:TextBox ID="textProductName" >
                </asp:TextBox>
            </asp:View>
            <asp:View ID="viewCategorySearch" >
                Enter category: 
                <asp:TextBox ID="textCategory" >
                </asp:TextBox>
            </asp:View>
        </asp:MultiView>&nbsp;<br />
        <br />
        <asp:Button ID="btnSearch" 
           OnClick="Button1_Click" 
            Text="Search" />
     </div>
    </form>
</body>
</html>

Consulte também

Conceitos

Visão Geral dos Controles do Servidor Web View e MultiView

Outros recursos

Passo a passo: Criando páginas da Web para dispositivos móveis