Procédure pas à pas : création d'éléments réutilisables avec des contrôles utilisateur ASP.NET

Article
08/21/2008

Mise à jour : novembre 2007

Les contrôles utilisateur ASP.NET vous permettent d'encapsuler les fonctionnalités de plusieurs contrôles serveur dans une unité. Les contrôles utilisateurs sont composés d'un ou de plusieurs contrôles serveur ASP.NET (des contrôles Button, des contrôles TextBox, etc.) et de tout code requis pour les contrôles afin de lancer la fonction que vous souhaitez exécuter. Le contrôle utilisateur peut également inclure des propriétés ou des méthodes personnalisées qui font apparaître les fonctionnalités du contrôle utilisateur dans un conteneur qui est en général une page ASP.NET.

Lors de cette procédure pas à pas, vous créerez un contrôle utilisateur ASP.NET qui agit comme un contrôle picker. Le contrôle picker se compose de deux listes, dont l'une propose un ensemble de choix (la source). Les utilisateurs peuvent sélectionner des éléments dans la liste SourceList, puis ajouter les éléments à la liste TargetList.

Cette procédure pas à pas se divise en trois parties, comme suit :

Dans la première partie, vous créerez le contrôle utilisateur de base, en ajoutant les contrôles et le code.
Dans la deuxième partie, vous créerez une page ASP.NET (la page hôte), puis ajouterez le contrôle utilisateur à la page ASP.NET.
Dans la troisième partie, vous ajouterez des propriétés et des méthodes personnalisées au contrôle utilisateur afin de pouvoir interagir avec le contrôle à partir de la page hôte.

Cette procédure pas à pas illustre les tâches suivantes :

Création d'un contrôle utilisateur et ajout de contrôles serveur ASP.NET au contrôle utilisateur
Création de propriétés et d'une méthode dans le contrôle utilisateur
Ajout d'un contrôle utilisateur à une page hôte
Ajout de code à la page hôte afin de gérer le contrôle utilisateur

Composants requis

Pour effectuer cette procédure pas à pas, vous aurez besoin des éléments suivants :

Outil de développement Web Microsoft Visual Web Developer
Microsoft .NET Framework

Cette procédure pas à pas suppose que vous possédez des connaissances générales concernant l'utilisation de Visual Web Developer. Pour une introduction, consultez Procédure pas à pas : création d'une page Web de base dans Visual Web Developer.

Création du site Web

Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en effectuant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

Ouvrez Visual Web Developer.
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Site Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement la plus à droite, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

Par exemple, tapez le nom du dossier C:\SitesWeb.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.

Visual Web Developer crée le dossier et une page nommée Default.aspx.

Création du contrôle utilisateur

La création d'un contrôle utilisateur est identique à la création d'une page Web ASP.NET. En fait, un contrôle utilisateur est effectivement un sous-ensemble d'une page ASP.Net et peut inclure la plupart des types d'éléments que vous mettez sur une page ASP.NET.

Pour créer un contrôle utilisateur

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément <Chemin>, sous Modèles Visual Studio installés, cliquez sur Contrôle utilisateur Web.
Dans la zone Nom, tapez ListPicker.

Le fichier contrôle utilisateur aura une extension .ascx qui est automatiquement ajoutée à ListPicker.
Dans la liste Langage, sélectionnez le langage de programmation que vous préférez utiliser.
Cliquez sur Ajouter.

Le nouveau contrôle est créé et ouvert dans le concepteur. Le balisage du contrôle ressemble à celui d'une page, avec une exception importante : il n'y a aucune directive @ Page au haut de la page. À la place, il y a une directive @ Control qui identifie le fichier dans ASP.NET comme un contrôle utilisateur.

Ajout de contrôles serveur au contrôle utilisateur

Dans cette partie de la procédure pas à pas, vous ajouterez les contrôles qui composent l'interface utilisateur du contrôle utilisateur.

Pour ajouter des contrôles serveur

Basculez en mode Design (si vous utilisez une page code-behind, basculez vers le contrôle ListPicker.ascx puis basculez en mode Design).
Dans le menu Tableau, cliquez sur Insérer un tableau.
Utilisez la boîte de dialogue Insérer un tableau pour créer un tableau avec une ligne et trois colonnes, puis cliquez sur OK.

Vous créez le tableau qui contiendra les contrôles, c'est-à-dire un tableau de disposition.
Dans le tableau, dans la colonne de gauche, tapez Disponible, puis appuyez sur ENTRÉE pour créer une ligne.
Dans la colonne de droite, tapez Sélectionné, puis appuyez sur ENTRÉE pour créer une ligne.

À partir du groupe Standard dans la boîte à outils, faites glisser les contrôles suivants dans le tableau et définissez leurs propriétés comme indiqué.

Contrôle	Propriétés
Faites glisser un ListBox dans la colonne de gauche et placez-le sous Disponible.	Height : 200px ID : SourceList Width : 200px
Faites glisser un Button dans la colonne centrale.	ID : AddAll Text : >>
Faites glisser un Button dans la colonne centrale.	ID : AddOne Text : (ESPACE)>(ESPACE)
Faites glisser un Button dans la colonne centrale.	ID : Remove Text : (ESPACE)X(ESPACE)
Faites glisser un ListBox dans la colonne de droite et placez-le sous Sélectionné.	Height : 200px ID : TargetList Width : 200px

Les contrôles ImageButton peuvent être utilisés à la place des contrôles Button afin d'afficher une image qui répond aux clics de souris. Toutefois, pour cette procédure pas à pas, il suffit d'utiliser le texte qui émule le type de graphique qui est fréquemment utilisé pour indiquer Ajouter tout, Ajouter et Supprimer qui correspondent respectivement aux deux crochets droits (>>), au crochet droit (>) et au X.

Si vous le souhaitez, ajustez la largeur et la hauteur des colonnes du tableau à votre guise.
Cliquez sur la liste SourceList, puis dans Propriétés, pour la propriété Items, cliquez sur le bouton de sélection (...).

La boîte de dialogue Éditeur de collections ListItem s'affiche.
Cliquer sur Ajouter trois fois pour ajouter trois éléments
Pour le premier, le deuxième et le troisième élément, sous Propriétés ListItem, affectez respectivement la valeur A, B et C à Text.

Pour le moment, vous créez des données de test. À une étape ultérieure de cette procédure pas à pas, dans « Ajout de propriétés et de méthodes personnalisées au contrôle personnalisé », vous supprimerez les données de test et ajouterez du code pour charger la liste SourceList dynamiquement.

Ajout de code pour gérer des sélections utilisateur

Les utilisateurs sélectionneront des éléments à l'aide des boutons qui se trouvent dans la colonne centrale du tableau. Par conséquent, la plupart du code du contrôle se trouve dans les gestionnaires des événements Click.

Pour ajouter du code pour gérer des sélections d'utilisateur

En mode Design, double-cliquez sur le bouton >> (AddAll) pour créer un gestionnaire d'événements pour l'événement Click, puis ajoutez le code en surbrillance suivant.
```
Protected Sub AddAll_Click(ByVal sender As Object, _
        ByVal e As EventArgs) Handles AddAll.Click
   TargetList.SelectedIndex = -1   Dim li As ListItem   For Each li In SourceList.Items      AddItem(li)   Next
End Sub
```
```
protected void AddAll_Click(object sender, EventArgs e)
{
    TargetList.SelectedIndex = -1;    foreach(ListItem li in SourceList.Items)    {        AddItem(li);    }
}
```
Le code fait une boucle dans tous les éléments de liste dans la liste SourceList. Pour chaque élément, il appelle la méthode AddItem et lui passe l'élément actuel. À une étape ultérieure de cette procédure, vous écrirez le code pour la méthode AddItem.
Basculez en mode Design, double-cliquez sur le bouton > (AddOne) pour créer un gestionnaire d'événements pour l'événement Click, puis ajoutez le code en surbrillance suivant :
```
Protected Sub AddOne_Click(ByVal sender As Object, _
       ByVal e As EventArgs) Handles AddOne.Click
   If SourceList.SelectedIndex >= 0 Then      AddItem(SourceList.SelectedItem)   End If
End Sub
```
```
protected void AddOne_Click(object sender, EventArgs e)
{
    if(SourceList.SelectedIndex >= 0)    {        AddItem(SourceList.SelectedItem);    }
}
```
Ce code vérifie d'abord qu'il y a une sélection dans la liste SourceList. Le cas échéant, le code appelle la méthode AddItem que vous écrirez à une étape ultérieure de cette procédure, en lui passant l'élément qui est sélectionné actuellement dans la liste SourceList.

Basculez en mode Design, double-cliquez sur le bouton X (Remove) pour créer un gestionnaire d'événements pour l'événement Click, puis ajoutez le code en surbrillance suivant :

Protected Sub Remove_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles Remove.Click
   If TargetList.SelectedIndex >= 0 Then     TargetList.Items.RemoveAt(TargetList.SelectedIndex)     TargetList.SelectedIndex = -1   End If
End Sub

protected void Remove_Click(object sender, EventArgs e)
{
    if (TargetList.SelectedIndex >= 0)    {        TargetList.Items.RemoveAt(TargetList.SelectedIndex);        TargetList.SelectedIndex = -1;      }
}

Le code vérifie d'abord que la liste TargetList contient une sélection. Le cas échéant, le code supprime l'élément sélectionné de la liste et de la sélection.

Ajoutez la méthode AddItem suivante :
```
Protected Sub AddItem(ByVal li As ListItem)
   TargetList.SelectedIndex = -1
   TargetList.Items.Add(li)
End Sub
```
```
protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;
    TargetList.Items.Add(li);
}
```
Ce code ajoute sans condition un élément à la liste TargetList. À une étape ultérieure de cette procédure pas à pas, dans « Ajout de propriétés et de méthodes personnalisées au contrôle utilisateur », vous améliorerez ce code en ajoutant l'option permettant de déterminer s'il y a des doublons.

Vous ne pouvez pas tester directement un contrôle utilisateur parce qu'il doit être hébergé dans une page. Dans la section suivante, vous créerez une page Web ASP.NET où vous pourrez utiliser le contrôle.

Utilisation du contrôle utilisateur

Comme tout contrôle, un contrôle utilisateur doit être hébergé dans une page. Dans cette partie de la procédure pas à pas, vous créerez une page hôte pour le contrôle, puis ajouterez un contrôle utilisateur à la page.

Pour créer une page hôte

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter Nouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez ContrôleUtilisateurHôte.
Dans la liste Langage, sélectionnez le langage que vous préférez utiliser, puis cliquez sur Ajouter.

La nouvelle page s'affiche dans le concepteur.

Pour ajouter des contrôles utilisateur à la page

Basculez en mode Design.
Dans l'Explorateur de solutions, faites glisser le fichier contrôle utilisateur (ListPicker.ascx) sur la page.

Remarque :

Assurez-vous d'être en mode Design lorsque vous faites glisser ListPicker.ascx sur la page.

Le contrôle s'affiche dans le concepteur.
Basculez en mode Source.

En plaçant le contrôle utilisateur sur la page, vous créez deux éléments dans la page :
- Au haut de la page se trouve une nouvelle directive @ Register qui ressemble à ce qui suit :
```
<%@ Register Src="ListPicker.ascx" TagName="ListPicker"
   TagPrefix="uc1" %> 
```
  La directive @ Register est requise parce que le contrôle utilisateur est un composant externe. Les valeurs qui se trouvent dans la directive fournissent des informations qui sont requises par ASP.NET pour rechercher le contrôle lors de la compilation et de l'exécution de la page. Ensemble, les attributs TagPrefix et TagName spécifient la manière dont le contrôle utilisateur est déclaré sur la page. L'attribut Src spécifie le fichier, et si nécessaire, le chemin d'accès, où le fichier source se trouve.
- Le deuxième nouvel élément est l'élément du contrôle utilisateur et ressemble à ce qui suit :
```
<uc1:ListPicker id="ListPicker1" Runat="server" />
```
  L'élément d'un contrôle utilisateur ressemble à l'élément d'un contrôle serveur ASP.NET ordinaire. La différence est que le contrôle utilisateur a un préfixe de balise différent (uc1) et un nom de balise unique (ListPicker). Bien que les valeurs aient été établies automatiquement par la directive @ Register lorsque vous avez placé le contrôle utilisateur sur la page, vous pouvez utiliser n'importe quel préfixe de balise et nom de balise pour votre contrôle utilisateur, tant que les valeurs ne sont pas déjà utilisées dans la page.

Remarque :
Assurez-vous d'être en mode Design lorsque vous faites glisser ListPicker.ascx sur la page.

Test du contrôle utilisateur

Vous pouvez maintenant tester la version provisoire du contrôle utilisateur.

Pour tester le contrôle utilisateur

Appuyez sur CTRL+F5 pour exécuter la page.

La page s'affiche dans le navigateur et vous pouvez consulter les deux listes et les trois boutons qui composent votre contrôle utilisateur.
Cliquez sur le bouton >> (AddAll).

Toutes les valeurs de la liste SourceList sont copiées dans la liste TargetList.
Cliquez sur chaque élément de la liste TargetList, puis cliquez sur le bouton X (Remove) jusqu'à ce que tous les éléments soient supprimés.
Sélectionnez une seule valeur dans la liste SourceList, puis cliquez sur le bouton > (AddOne).

Cette valeur unique est copiée dans la liste TargetList.
Effectuez éventuellement d'autres essais avec le contrôle jusqu'à ce que vous soyez sûr(e) que cela fonctionne lorsque vous envisagez de le faire.
Lorsque vous avez terminé, fermez le navigateur.

Ajout de propriétés et de méthodes au contrôle utilisateur

Désormais, votre contrôle utilisateur fonctionne, cependant, il ne peut pas encore être utilisé en tant que contrôle à usage général. Une version plus pratique du contrôle utilisateur vous permettrait de procéder comme suit :

Spécifiez la liste des éléments à afficher de façon dynamique dans la liste SourceList.
Obtenez la liste des éléments que l'utilisateur a sélectionnés dans la liste TargetList.
Spécifiez si vous souhaitez autoriser des valeurs dupliquées dans la liste TargetList, de manière facultative.
Offrez un moyen aux utilisateurs d'effacer rapidement tous les éléments de la liste TargetList.

L'exécution de ces tâches requiert que la page hôte puisse communiquer avec le contrôle utilisateur, à la fois pour partager des valeurs (définir et lire des propriétés) et pour générer des commandes (appeler des méthodes). Dans cette partie de la procédure pas à pas, vous modifierez le contrôle utilisateur et y ajouterez des membres (propriétés et méthodes).

Vous ajouterez deux propriétés au contrôle utilisateur. La première propriété récupère la liste des éléments qui sont dans la liste TargetList. La deuxième propriété vous permet de spécifier si la liste TargetList accepte des valeurs dupliquées. Plus loin dans cette section, vous ajouterez une méthode qui vous permettra de remplir la liste SourceList.

Pour ajouter du code afin de définir des propriétés personnalisées

Pour le contrôle ListPicker, ouvrez ou basculez vers le fichier de code.
Utilisez le code suivant pour créer la propriété SelectedItems :
```
Public ReadOnly Property SelectedItems() As ListItemCollection
   Get
      Return TargetList.Items
   End Get
End Property
```
```
public ListItemCollection SelectedItems
{
   get { return TargetList.Items ; }
}
```
La propriété SelectedItems récupère les valeurs qui sont dans la liste TargetList. Elle peut être en lecture seule, parce que vous ne devrez jamais définir par programme les valeurs de la liste TargetList.
Utilisez le code suivant pour créer la propriété AllowDuplicates :
```
Public Property AllowDuplicates() As Boolean
   Get
      Return CType(ViewState("allowDuplicates"), Boolean)
   End Get
   Set(ByVal value As Boolean)
      ViewState("allowDuplicates") = value
   End Set
End Property
```
```
public Boolean AllowDuplicates
{
    get
    {
        return (Boolean)ViewState["allowDuplicates"];
    }
    set
    {
        ViewState["allowDuplicates"] = value;
    }
}
```
La propriété AllowDuplicates est en lecture/écriture seule. La valeur de la propriété AllowDuplicates doit être enregistrée explicitement dans l'état d'affichage afin d'être persistante entre les aller-retour. (La propriété SelectedItems ne doit pas être enregistrée explicitement dans l'état d'affichage, parce que la liste TargetList enregistre les valeurs dans l'état d'affichage.)

Les propriétés sont désormais définies. Toutefois, vous devez encore modifier le code existant dans le contrôle utilisateur afin de tirer parti du paramètre de la propriété AllowDuplicates.

Pour modifier le code existant afin d'utiliser la propriété AllowDuplicates

Recherchez la méthode AddItem que vous avez écrite dans « Ajouter du code pour gérer des sélections utilisateur », auparavant dans cette procédure pas à pas et remplacez le contenu par le code en surbrillance suivant :
```
Protected Sub AddItem(ByVal li As ListItem)
   TargetList.Selectedindex = -1   If Me.AllowDuplicates = True Then      TargetList.Items.Add(li)   Else      If TargetList.Items.FindByText(li.Text) Is Nothing Then         TargetList.Items.Add(li)      End If   End If
End Sub
```
```
protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;    if (this.AllowDuplicates == true)    {        TargetList.Items.Add(li);    }    else    {        if (TargetList.Items.FindByText(li.Text) == null)        {            TargetList.Items.Add(li);        }    }
}
```
Le code exécute la même fonction qu'auparavant (ajouter un élément à la liste TargetList), mais désormais il détermine si la propriété AllowDuplicate a la valeur true. Si la propriété AllowDuplicate a la valeur true, l'élément est ajouté. Si la propriété AllowDuplicate a la valeur false, le code recherche un élément existant possédant la même valeur que le nouvel élément proposé, puis ajoute le nouvel élément si aucun élément existant n'est trouvé.

Parce que vous définirez le contenu de la liste SourceList à l'aide d'une propriété, vous pouvez supprimer les données de test que vous avez entrées dans « Ajouter des contrôles serveur au contrôle utilisateur », auparavant dans cette procédure pas à pas.

Pour supprimer les données de test de la liste SourceList

Basculez en mode Design.
Cliquez sur le contrôle SourceList, puis, dans Propriétés, sous Éléments, cliquez sur le bouton de sélection (...).

L'Éditeur de collections ListItem s'affiche.
Cliquez sur le bouton Supprimer pour supprimer chaque exemple d'élément, puis cliquez sur OK.

Ajout d'une méthode au contrôle utilisateur

Vous pouvez également ajouter des méthodes pour effectuer des tâches dans le contrôle utilisateur lorsque les méthodes sont appelées par le code dans la page hôte. Pour illustrer cela, dans cette procédure pas à pas, vous ajouterez deux méthodes. La première méthode peut être appelée pour ajouter des éléments à la liste SourceList. La deuxième méthode efface le contenu de la liste TargetList.

Pour ajouter une méthode afin d'effacer la liste TargetList

Utilisez le code suivant pour ajouter la méthode AddSourceItem :

Public Sub AddSourceItem(ByVal sourceItem As String)
    SourceList.Items.Add(sourceItem)
End Sub

public void AddSourceItem(String sourceItem)
{
    SourceList.Items.Add(sourceItem);
}

Utilisez le code suivant pour ajouter la méthode ClearAll :

Public Sub ClearAll()
    SourceList.Items.Clear()
    TargetList.Items.Clear()
End Sub

public void ClearAll()
{
    SourceList.Items.Clear();
    TargetList.Items.Clear();
}

Dans le menu Fichier, cliquez sur Enregistrer tout pour enregistrer les modifications que vous avez apportées au contrôle utilisateur.

Test de la méthode et des propriétés du contrôle utilisateur

La dernière tâche de cette procédure pas à pas consiste à améliorer la page hôte afin de pouvoir partager des valeurs avec le contrôle utilisateur. Vous pouvez définir de manière déclarative certaines propriétés du contrôle utilisateur. (Vous ne pouvez pas définir directement la liste SourceList à l'aide du code lors de cette procédure pas à pas, mais vous pouvez la définir par programme.) Lors de cette procédure, vous affecterez à la propriété AllowDuplicates une valeur par défaut de true.

Pour définir des propriétés de contrôle utilisateur de manière déclarative

Basculez vers la page HostUserControl.aspx ou ouvrez-la.
En mode Source, définissez de manière déclarative AllowDuplicates en utilisant la syntaxe qui se présente comme suit :
```
<uc1:ListPicker id="ListPicker1" Runat="server"
    AllowDuplicates="true" />
```
Notez que vous obtenez les fonctionnalités Microsoft IntelliSense pour AllowDuplicates.

Utilisation du contrôle utilisateur par programme

Vous pouvez également utiliser le contrôle utilisateur par programme, en définissant et en récupérant les propriétés et en appelant les méthodes. Pour illustrer l'utilisation du contrôle utilisateur par programme, vous ajouterez des contrôles à la page hôte.

Pour utiliser le contrôle utilisateur par programme

Basculez en mode Design.

À partir du groupe Standard de la boîte à outils, faites glisser les contrôles suivants dans le tableau sur la page hôte, puis définissez les propriétés comme indiqué.

Contrôle	Propriétés
TextBox	ID : NewItem Text : (vide)
Button	ID : AddItem Text : Ajouter élément
Button	ID : LoadFiles Text : Liste de fichiers
Button	ID : ClearSelection Text : Effacer tout
CheckBox	AutoPostBack : True Checked : True ID : AllowDuplicates Text : Autoriser les doublons
Button	ID : ShowSelection Text : Afficher la sélection
Label	ID : Selection Text : (vide)

En mode Design, double-cliquez sur AllowDuplicates pour créer un gestionnaire d'événements pour l'événement CheckedChanged, puis ajoutez le code en surbrillance suivant :

Protected Sub AllowDuplicates_CheckedChanged( _
ByVal sender As Object, _
ByVal e As EventArgs) Handles AllowDuplicates.CheckedChanged
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked
End Sub

protected void AllowDuplicates_CheckedChanged(Object sender, EventArgs e)
{
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked;
}

Basculez en mode Design, double-cliquez sur AddItem pour créer un gestionnaire d'événements pour l'événement Click, puis ajoutez le code en surbrillance suivant :
```
Protected Sub AddItem_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles AddItem.Click
    Dim sourceItem As String = Server.HtmlEncode(NewItem.Text)    ListPicker1.AddSourceItem(sourceItem)
End Sub
```
```
protected void AddItem_Click(object sender, EventArgs e)
{
    ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text));
}
```
Le code crée une collection ListItemCollection dans le code et la remplit avec les exemples de données. Ensuite, le code affecte la collection à la propriété SourceItems.

Basculez en mode Design, double-cliquez sur LoadFiles pour créer un gestionnaire d'événements pour l'événement Click, puis ajoutez le code en surbrillance suivant :

Protected Sub LoadFiles_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles LoadFiles.Click
   Dim path As String = Server.MapPath(Request.ApplicationPath)   Dim files() As String = System.IO.Directory.GetFiles(path)   Dim filename As String   For Each filename in Files      ListPicker1.AddSourceItem(filename)   Next
End Sub

protected void LoadFiles_Click(object sender, EventArgs e)
{
   String path = Server.MapPath(Request.ApplicationPath);   String[] files = System.IO.Directory.GetFiles(path);   foreach(String filename in files)   {      ListPicker1.AddSourceItem(filename);   }
}

Ce code ressemble au code de AddItem, à la différence qu'il ajoute une liste de fichiers dans le répertoire racine du site Web.

Basculez en mode Design, double-cliquez sur ShowSelection pour créer un gestionnaire d'événements pour l'événement Click, puis ajoutez le code en surbrillance suivant :

Protected Sub ShowSelection_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles ShowSelection.Click
   Dim lItem As ListItem   Dim selectedItemsString As String = ""   For Each lItem in ListPicker1.SelectedItems      selectedItemsString &= "<br>" & lItem.Text   Next   Selection.Text = selectedItemsString
End Sub

protected void ShowSelection_Click(object sender, EventArgs e)
{
   String selectedItemsString = "";   foreach(ListItem lItem in ListPicker1.SelectedItems)   {      selectedItemsString += "<br>" + lItem.Text;   }   Selection.Text = selectedItemsString;
}

Ce code récupère un objet qui est tapé en tant qu'objet ListItemCollection, lit chaque élément dans la collection, puis affiche les résultats dans Selection.

Basculez en mode Design, double-cliquez sur ClearSelection pour créer un gestionnaire d'événements pour l'événement Click, puis ajoutez le code en surbrillance suivant :
```
Protected Sub ClearSelection_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles ClearSelection.Click
   ListPicker1.ClearAll()
End Sub
```
```
protected void ClearSelection_Click(object sender, EventArgs e)
{
   ListPicker1.ClearAll();
}
```
Ce code appelle la méthode ClearAll pour le contrôle utilisateur afin de supprimer tous les éléments de la TargetList.

Test des contrôles utilisateur terminés

Vous pouvez maintenant tester votre contrôle utilisateur fini.

Pour tester le contrôle utilisateur

Appuyez sur CTRL+F5 pour exécuter la page.
Dans la zone de texte, tapez une valeur, puis cliquez sur Ajouter élément.
Répétez l'étape 2 plusieurs fois, jusqu'à obtenir une sélection d'éléments dans le contrôle utilisateur.
Utilisez les boutons pour sélectionner un ou plusieurs éléments source dans la liste SourceList, puis ajoutez-les à la liste TargetList.
Cliquez sur Afficher la sélection.

Les éléments de la liste TargetList sont affichés dans Selection.
Cliquez sur Effacer tout.
Cliquez sur Liste de fichiers.

La liste SourceList affiche maintenant une liste de noms de fichiers.
Dans le contrôle utilisateur, cliquez sur Ajouter pour ajouter plusieurs éléments à la liste TargetList.
Essayez d'ajouter un élément qui se trouve déjà dans la liste à la liste TargetList.

La valeur dupliquée est ajoutée.
Effacez la zone Autoriser les doublons, puis essayez une nouvelle fois d'ajouter des doublons.

Cette fois, les doublons ne sont pas ajoutés à la liste TargetList.
Cliquez sur Afficher la sélection.

La liste des éléments de la liste TargetList est affichée sur la page hôte.

Étapes suivantes

Même si le contrôle que vous avez créé n'est pas très complexe, vous avez vu la plupart des fonctionnalités de base pouvant être générées dans un contrôle utilisateur. Le processus permettant d'affiner le contrôle consiste principalement à révéler des propriétés et des méthodes supplémentaires qui améliorent ce que vous pouvez faire avec le contrôle. Les membres supplémentaires peuvent être les suivants :

Propriétés d'apparence.

Vous pouvez créer des propriétés du contrôle utilisateur qui permettent à un utilisateur de définir l'arrière-plan, la taille de la liste, etc., pour le contrôle.

Remarque :
Par défaut, le contrôle utilisateur utilise le thème actuel qui s'applique aux contrôles enfants. Par exemple, si vous avez une apparence (skin) définie pour un contrôle Button, les boutons de votre contrôle utilisateur sont affichés avec cette apparence.

Propriétés de données.

Vous pouvez ajouter des propriétés qui permettent au contrôle utilisateur d'utiliser un plus large éventail de données à afficher dans la liste SourceList. Par exemple, vous pouvez ajouter des propriétés pour définir un groupe de données, une table de données et un champ pour l'affichage des données.
Fonctionnalités.

Vous pouvez ajouter davantage de boutons et de code au contrôle utilisateur afin de permettre aux utilisateurs non seulement de copier des éléments de la liste SourceList dans la liste TargetList, mais également de déplacer des éléments (l'élément est supprimé de la liste SourceList lorsqu'il est déplacé vers la liste TargetList. Par conséquent, le contrôle peut contenir des boutons qui permettent de déplacer les données, dans le sens inverse, à partir de la liste TargetList vers la liste SourceList.

Voir aussi

Tâches

Comment : convertir des pages Web Forms en contrôles utilisateur ASP.NET

Concepts

Vue d'ensemble des contrôles utilisateur ASP.NET

Vue d'ensemble des menaces de sécurité des applications Web

Share via

Procédure pas à pas : création d'éléments réutilisables avec des contrôles utilisateur ASP.NET

Composants requis

Création du site Web

Pour créer un site Web de système de fichiers

Création du contrôle utilisateur

Pour créer un contrôle utilisateur

Ajout de contrôles serveur au contrôle utilisateur

Pour ajouter des contrôles serveur

Ajout de code pour gérer des sélections utilisateur

Pour ajouter du code pour gérer des sélections d'utilisateur

Utilisation du contrôle utilisateur

Pour créer une page hôte

Pour ajouter des contrôles utilisateur à la page

Test du contrôle utilisateur

Pour tester le contrôle utilisateur

Ajout de propriétés et de méthodes au contrôle utilisateur

Pour ajouter du code afin de définir des propriétés personnalisées

Pour modifier le code existant afin d'utiliser la propriété AllowDuplicates

Pour supprimer les données de test de la liste SourceList

Ajout d'une méthode au contrôle utilisateur

Pour ajouter une méthode afin d'effacer la liste TargetList

Test de la méthode et des propriétés du contrôle utilisateur

Pour définir des propriétés de contrôle utilisateur de manière déclarative

Utilisation du contrôle utilisateur par programme

Pour utiliser le contrôle utilisateur par programme

Test des contrôles utilisateur terminés

Pour tester le contrôle utilisateur

Étapes suivantes

Voir aussi

Tâches

Concepts

Ressources supplémentaires