Cómo: Agregar controles de servidor Web MultiView a una página de formularios Web Forms (Visual Studio)

Actualización: noviembre 2007

Los controles de servidor Web MultiView y View actúan como contenedores para otros controles y el marcado, y proporcionan un medio para mostrar conjuntos alternativos de controles y marcado. Los controles MultiView y View se han diseñado principalmente para que se utilicen con exploradores en dispositivos móviles, pero son compatibles con cualquier página ASP.NET.

Para agregar un control de servidor Web MultiView a una página de formularios Web Forms

  1. Desde la ficha Estándar del cuadro de herramientas, arrastre un control MultiView a la página.

  2. Desde la ficha Estándar del cuadro de herramientas, arrastre un control View al control MultiView.

  3. Escriba el texto estático que desee agregar en el control View. Para agregar controles al control View, arrástrelos desde el cuadro de herramientas hasta el control View para crear el diseño que desee.

  4. Repita los pasos 2 y 3 para cada control View que desee crear.

  5. Establezca la propiedad ActiveViewIndex del control MultiView en el valor de índice del control View que se va a mostrar. Si no desea mostrar ningún control View, establezca la propiedad en -1.

  6. Agregue el código para definir la propiedad ActiveViewIndex mediante programación y especificar así qué control View se va a mostrar.

    En el ejemplo siguiente se muestra cómo funciona un control MultiView. La página contiene dos controles View. El usuario hace clic en un control RadioButton y, en el controlador de eventos CheckedChanged del botón, el código muestra el control View apropiado al establecer la propiedad ActiveViewIndex. Cuando el usuario hace clic en el botón Buscar, el código obtiene el valor del control TextBox en el control View apropiado.

    Nota de seguridad:

    En este ejemplo hay un cuadro de texto que acepta datos del usuario, lo que puede suponer una amenaza para la seguridad. De forma predeterminada, las páginas Web ASP.NET validan los datos escritos por el usuario para comprobar que no incluyen secuencias de comandos ni elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

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

Vea también

Conceptos

Información general sobre MultiView y View (Controles de servidor Web)

Otros recursos

Tutorial: Crear páginas Web para dispositivos móviles

  • Last updated on