Partager via

Création d'un contrôle utilisateur

  • Article

Vous pouvez créer un contrôle utilisateur par déclaration en utilisant un éditeur de texte ou HTML. La syntaxe déclarative d'un contrôle utilisateur est très semblable à la syntaxe utilisée pour créer une page Web Forms. Les principales différences sont les suivantes : les contrôles utilisateur utilisent une directive @ Control à la place d'une directive @ Page et les contrôles utilisateur n'incluent pas les éléments <html>, <body> et <form> autour du contenu.

Pour plus d'informations sur les pages Web Forms et sur leur création, consultez Introduction aux pages Web Forms. Pour plus d'informations sur la déclaration d'un contrôle utilisateur dans une page Web Forms, consultez Insertion d'un contrôle utilisateur dans une page Web Forms.

Un contrôle utilisateur peut être aussi simple qu'un fichier texte ou il peut contenir d'autres contrôles serveur ASP.NET. Si vous souhaitez partager des informations entre le contrôle utilisateur et la page d'hébergement, vous pouvez créer des propriétés pour le contrôle utilisateur.

La procédure suivante présente un formulaire de connexion simple que vous pouvez inclure sur plusieurs pages d'une application.

Pour créer un contrôle utilisateur

  1. Créez un fichier et nommez-le avec l'extension .ascx.

    Par exemple, nommez votre contrôle utilisateur Logonform.ascx.

  2. Créez une directive @ Control en haut de la page et spécifiez le langage de programmation que vous souhaitez utiliser pour le contrôle (le cas échéant).

    L'exemple suivant illustre une directive @ Control pour une page qui utilise Visual Basic .NET comme langage de programmation.

    <%@ Control Language="VB" %>

    Remarque   Lorsque vous créez une application Web à l'aide de Visual Studio .NET, toutes les pages et les contrôles utilisateur dans l'application doivent appartenir au même langage de programmation.

  3. Créez les éléments d'interface utilisateur (contrôles) que le contrôle utilisateur doit afficher.

  4. Créez des propriétés dans le contrôle si vous souhaitez pouvoir partager des informations entre le contrôle utilisateur et la page d'hébergement.

    L'exemple suivant illustre un contrôle utilisateur complet qui affiche une zone de texte dans laquelle les utilisateurs peuvent entrer un nom et une étiquette dans laquelle le nom est affiché. Le contrôle utilisateur expose également une propriété Name de sorte que le nom puisse être défini dans la page d'hébergement.

    <%@ Control Language="VB" %>
<script runat="server">
Public Property Name As String
   Get
       Return labelOutput.Text
   End Get
   Set
       textName.Text = Server.HtmlEncode(value)
       labelOutput.Text = Server.HtmlEncode(value)
   End Set
End Property

Public Sub buttonDisplayName_Click(sender As Object, e As EventArgs)
   labelOutput.Text = textName.Text
End Sub
</script>

<table>
    <tbody>
        <tr>
            <td>
                <b>Enter your name:</b></td>
        </tr>
        <tr>
            <td>
                <asp:TextBox id="textName" 
                    runat="server">
                </asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:button id="buttonDisplayName" 
                   onclick="buttonDisplayName_Click" 
                   runat="server" text="Submit">
                </asp:button>
            </td>
        </tr>
        <tr>
            <td><b>Hello, 
                 <asp:Label id="labelOutput" 
                     runat="server">
                 </asp:Label>.</b>
            </td>
        </tr>
    </tbody>
</table>

[C#]
<%@ Control Language="C#" %>
<script runat="server">
    public String Name {
        get
        {
            return labelOutput.Text;
        }
        set
        {
            textName.Text = Server.HtmlEncode(value);
            labelOutput.Text = Server.HtmlEncode(value);
        }
    }

    void buttonDisplayName_Click(object sender, EventArgs e) {
       labelOutput.Text = textName.Text;
    }
</script>

<table>
    <tbody>
        <tr>
            <td>
                <b>Enter your name:</b></td>
        </tr>
        <tr>
            <td>
                <asp:TextBox id="textName" 
                    runat="server">
                </asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:button id="buttonDisplayName" 
                   onclick="buttonDisplayName_Click" 
                   runat="server" text="Submit">
                </asp:button>
            </td>
        </tr>
        <tr>
            <td><b>Hello, 
                 <asp:Label id="labelOutput" 
                     runat="server">
                 </asp:Label>.</b>
            </td>
        </tr>
    </tbody>
</table>

Pour plus d'informations sur la manière d'ajouter le contrôle utilisateur à une page Web ASP.NET, consultez Insertion d'un contrôle utilisateur dans une page Web Forms.

Voir aussi

Contrôles utilisateur Web Forms | Insertion d'un contrôle utilisateur dans une page Web Forms | Gestion des événements serveur dans les pages Web Forms