Comment : ajouter des contrôles serveur Web MultiView à une page Web Forms (Visual Studio)

  • Article

Mise à jour : novembre 2007

Les contrôles serveur Web MultiView et View servent de conteneurs pour d'autres contrôles et balises ; ils vous permettent d'afficher d'autres jeux de contrôles et de balises. Les contrôles MultiView et View ont été conçus à l'origine pour être utilisés avec les navigateurs sur les périphériques mobiles, mais ils sont pris en charge dans toutes les pages ASP.NET.

Pour ajouter un contrôle serveur Web MultiView à une page Web Forms

  1. À partir de l'onglet Standard de la boîte à outils, faites glisser un contrôle MultiView dans la page.

  2. À partir de l'onglet Standard de la boîte à outils, faites glisser un contrôle View dans le contrôle MultiView.

  3. Tapez le texte statique que vous voulez ajouter au contrôle View. Pour ajouter des contrôles au contrôle View, faites-les glisser de la boîte à outils dans le contrôle View pour créer la disposition de votre choix.

  4. Répétez les étapes 2 et 3 pour chaque contrôle View que vous souhaitez créer.

  5. Affectez à la propriété ActiveViewIndex du contrôle MultiView la valeur d'index du contrôle View à afficher. Si vous ne souhaitez afficher aucun contrôle View, affectez à la propriété la valeur -1.

  6. Ajoutez du code pour définir par programme la propriété ActiveViewIndex, afin de déterminer le contrôle View qui sera affiché.

    L'exemple suivant montre comment utiliser un contrôle MultiView. La page contient deux contrôles View. L'utilisateur clique sur un contrôle RadioButton, puis, dans le gestionnaire d'événements CheckedChanged du bouton, le code affiche le contrôle View approprié en définissant la propriété ActiveViewIndex. Lorsque l'utilisateur clique sur le bouton Search, le code obtient la valeur du contrôle TextBox dans le contrôle View approprié.

    Note de sécurité :

    Cet exemple a une zone de texte qui accepte l'entrée d'utilisateur, ce qui constitue une menace éventuelle pour la sécurité. Par défaut, les pages Web ASP.NET vérifient que les entrées d'utilisateur n'incluent pas de script ou d'éléments HTML. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

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

Voir aussi

Concepts

Vue d'ensemble des contrôles serveur Web MultiView et View

Autres ressources

Procédure pas à pas : création de pages Web pour les périphériques mobiles