Boutons personnalisés dans le DataList et le Repeater (C#)

par Scott Mitchell

Télécharger le PDF

Dans ce tutoriel, nous allons créer une interface qui utilise un répéteur pour répertorier les catégories du système, chaque catégorie fournissant un bouton pour afficher ses produits associés à l’aide d’un contrôle BulletedList.

Présentation

Au cours des dix-sept derniers didacticiels DataList et Repeater, nous avons créé à la fois des exemples en lecture seule et des exemples de modification et de suppression. Pour faciliter les capacités de modification et de suppression au sein d'une DataList, nous avons ajouté des boutons à la DataList ItemTemplate qui, lorsqu'ils sont cliqués, ont déclenché une requête de retour et provoqué un événement DataList correspondant à la propriété du bouton CommandName. Par exemple, l’ajout d’un bouton dans le ItemTemplate avec une valeur de propriété CommandName égale à "Modifier" entraîne le déclenchement de l’événement EditCommand de la DataList lors de la publication ; un bouton avec la propriété CommandName "Supprimer" déclenche le DeleteCommand.

En plus des boutons Modifier et Supprimer, les contrôles DataList et Repeater peuvent également inclure des boutons, des linkButtons ou des ImagesButtons qui, en cas de clic, effectuent une logique côté serveur personnalisée. Dans ce tutoriel, nous allons créer une interface qui utilise un répéteur pour répertorier les catégories dans le système. Pour chaque catégorie, le répéteur inclut un bouton pour afficher les produits associés à la catégorie à l’aide d’un contrôle BulletedList (voir la figure 1).

Figure 1 : Cliquer sur le lien Afficher les produits affiche les produits de catégorie dans une liste à puces (cliquez pour afficher l’image de taille complète)

Étape 1 : Ajout des pages web du didacticiel sur le bouton personnalisé

Avant d’examiner comment ajouter un bouton personnalisé, prenons d’abord un moment pour créer les pages ASP.NET dans notre projet de site web dont nous aurons besoin pour ce didacticiel. Commencez par ajouter un nouveau dossier nommé CustomButtonsDataListRepeater. Ensuite, ajoutez les deux ASP.NET pages suivantes à ce dossier, en veillant à associer chaque page à la Site.master page maître :

• Default.aspx
• CustomButtons.aspx

Figure 2 : Ajouter les pages ASP.NET pour les didacticiels de Buttons-Related personnalisés

Comme dans les autres dossiers, Default.aspx dans le CustomButtonsDataListRepeater dossier répertorie les didacticiels de sa section. Rappelez-vous que le SectionLevelTutorialListing.ascx contrôle utilisateur fournit cette fonctionnalité. Ajoutez ce contrôle utilisateur à Default.aspx en le faisant glisser de l’Explorateur de solutions vers la vue Création de la page.

Figure 3 : Ajouter le contrôle utilisateur à SectionLevelTutorialListing.ascx (Default.aspx de taille complète)

Enfin, ajoutez les pages en tant qu’entrées au Web.sitemap fichier. Plus précisément, ajoutez le balisage suivant après la pagination et le tri avec DataList et Repeater <siteMapNode>:

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</siteMapNode>

Après la mise à jour Web.sitemap, prenez un moment pour afficher le site web des didacticiels via un navigateur. Le menu de gauche inclut désormais des éléments pour les didacticiels d’édition, d’insertion et de suppression.

Figure 4 : La carte de site inclut désormais l’entrée pour le didacticiel sur les boutons personnalisés

Étape 2 : Ajout de la liste des catégories

Pour ce tutoriel, nous devons créer un répéteur qui répertorie toutes les catégories ainsi qu’un Show Products LinkButton qui, lorsque vous cliquez dessus, affiche les produits de catégorie associés dans une liste à puces. Commençons par créer un répéteur simple qui répertorie les catégories dans le système. Commencez par ouvrir la CustomButtons.aspx page dans le CustomButtonsDataListRepeater dossier. Faites glisser un répéteur de la boîte à outils sur le concepteur et définissez sa propriété à IDCategories. Ensuite, créez un contrôle de source de données à partir du Smart Tag de Repeater. Plus précisément, créez un contrôle ObjectDataSource nommé CategoriesDataSource qui sélectionne ses données dans la méthode CategoriesBLL de la classe GetCategories().

Figure 5 : Configurer ObjectDataSource pour utiliser la CategoriesBLL méthode de classe GetCategories() (Click pour afficher l’image de taille complète)

Contrairement au contrôle DataList, pour lequel Visual Studio crée une valeur par défaut ItemTemplate en fonction de la source de données, les modèles de répéteur doivent être définis manuellement. En outre, les modèles de répéteur doivent être créés et modifiés de manière déclarative (autrement dit, il n’existe aucune option Modifier les modèles dans la balise active du répéteur).

Cliquez sur l’onglet Source dans le coin inférieur gauche et ajoutez un ItemTemplate nom de catégorie qui affiche le nom de la catégorie dans un <h3> élément et sa description dans une balise de paragraphe ; incluez une SeparatorTemplate règle horizontale (<hr />) entre chaque catégorie. Ajoutez également un LinkButton avec sa Text propriété définie sur Show Products. Une fois ces étapes effectuées, le balisage déclaratif de votre page doit ressembler à ce qui suit :

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

La figure 6 montre la page lorsqu’elle est consultée via un navigateur. Chaque nom de catégorie et description est répertorié. Le bouton Afficher les produits, lorsqu'il est cliqué, provoque un retour au serveur, mais n’effectue pas encore d’action.

Figure 6 : Le nom et la description de chaque catégorie sont affichés, ainsi qu’un lien Afficher les produits (cliquez pour afficher l’image de taille complète)

Étape 3 : Exécution de la logique Server-Side lors du clic sur le LinkButton Afficher les produits

Chaque fois qu’un Button, LinkButton ou ImageButton dans un modèle dans un DataList ou Repeater est cliqué, un postback se produit et l’événement ItemCommand du DataList ou Repeater se déclenche. En plus de l’événement ItemCommand , le contrôle DataList peut également déclencher un autre événement plus spécifique si la propriété du CommandName bouton est définie sur l’une des chaînes réservées (Delete, Edit, Cancel, Update ou Select), mais l’événement ItemCommand est toujours déclenché.

Lorsqu’un bouton est cliqué dans une liste de données ou un répéteur, nous devons souvent transmettre le bouton sur lequel le bouton a été cliqué (dans le cas où il peut y avoir plusieurs boutons dans le contrôle, tels qu’un bouton Modifier et Supprimer) et peut-être des informations supplémentaires (telles que la valeur de clé primaire de l’élément dont le bouton a été cliqué). Le bouton, LinkButton et ImageButton fournissent deux propriétés dont les valeurs sont passées au ItemCommand gestionnaire d’événements :

• CommandName chaîne généralement utilisée pour identifier chaque bouton dans le modèle
• CommandArgument couramment utilisé pour contenir la valeur d’un champ de données, tel que la valeur de clé primaire

Pour cet exemple, définissez la propriété CommandName du LinkButton sur ShowProducts et liez la valeur de clé primaire CategoryID de l’enregistrement actif à la propriété CommandArgument à l’aide de la syntaxe CategoryArgument='<%# Eval("CategoryID") %>' de liaison de données. Après avoir spécifié ces deux propriétés, la syntaxe déclarative de LinkButton doit ressembler à ce qui suit :

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

Lorsque le bouton est cliqué, un renvoi se produit et l’événement de la DataList ou du Repeater ItemCommand se déclenche. Le gestionnaire d’événements reçoit les valeurs CommandName et CommandArgument du bouton.

Créez un gestionnaire d’événements pour l’événement repeater ItemCommand et notez le deuxième paramètre passé dans le gestionnaire d’événements (nommé e). Ce deuxième paramètre est de type RepeaterCommandEventArgs et possède les quatre propriétés suivantes :

• CommandArgument la valeur de la propriété du bouton CommandArgument cliqué
• CommandName valeur de la propriété du CommandName bouton
• CommandSource une référence au contrôle du bouton qui a été cliqué
• Item une référence au RepeaterItem qui contient le bouton qui a été cliqué ; chaque enregistrement lié au répéteur est présenté sous la forme d’un RepeaterItem

Étant donné que les catégories CategoryID sélectionnées sont transmises via la CommandArgument propriété, nous pouvons obtenir l’ensemble de produits associés à la catégorie sélectionnée dans le ItemCommand gestionnaire d’événements. Ces produits peuvent ensuite être liés à un contrôle BulletedList dans le ItemTemplate (que nous n'avons pas encore ajouté). Tout ce qui reste, ensuite, consiste à ajouter bulletedList, à le référencer dans le ItemCommand gestionnaire d’événements et à lui lier l’ensemble de produits pour la catégorie sélectionnée, que nous aborderons à l’étape 4.

Remarque

Un objet de type ItemCommand est passé au gestionnaire d’événements DataListCommandEventArgs DataList, qui offre les mêmes quatre propriétés que la classe RepeaterCommandEventArgs.

Étape 4 : Affichage des produits de catégorie sélectionnés dans une liste à puces

Les produits de la catégorie sélectionnée peuvent être affichés dans le Repeater ItemTemplate à l'aide d'un nombre quelconque de contrôles. Nous pourrions ajouter un autre répéteur imbriqué, un DataList, une Liste déroulante, un GridView, et ainsi de suite. Étant donné que nous voulons afficher les produits sous la forme d’une liste à puces, nous allons utiliser le contrôle BulletedList. Revenez au balisage déclaratif de la CustomButtons.aspx page, puis ajoutez un contrôle BulletedList à la ItemTemplate juste après le LinkButton Show Products. Définissez les bulletedLists sur IDProductsInCategory. BulletedList affiche la valeur du champ de données spécifié par la propriété DataTextField ; étant donné que ce contrôle aura des informations sur le produit qui lui sont liées, définissez la propriété DataTextFieldProductName.

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

Dans le gestionnaire d’événements ItemCommand, référencez ce contrôle à l’aide de e.Item.FindControl("ProductsInCategory") et liez-le à l’ensemble des produits associés à la catégorie sélectionnée.

protected void Categories_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "ShowProducts")
    {
        // Determine the CategoryID
        int categoryID = Convert.ToInt32(e.CommandArgument);
        // Get the associated products from the ProudctsBLL and bind
        // them to the BulletedList
        BulletedList products =
            (BulletedList)e.Item.FindControl("ProductsInCategory");
        ProductsBLL productsAPI = new ProductsBLL();
        products.DataSource =
            productsAPI.GetProductsByCategoryID(categoryID);
        products.DataBind());
    }
}

Avant d’effectuer une action dans le ItemCommand gestionnaire d’événements, il est prudent de vérifier d’abord la valeur du gestionnaire d’événements entrant CommandName. Étant donné que le ItemCommand gestionnaire d’événements se déclenche lorsqu’un bouton est cliqué, s’il existe plusieurs boutons dans le modèle, utilisez la valeur pour discerner l’action CommandName à entreprendre. Vérifier le CommandName ici n’a pas vraiment d'importance, puisqu’il n’y a qu'un seul bouton, mais c’est une bonne habitude à prendre. Ensuite, la CategoryID catégorie sélectionnée est récupérée à partir de la CommandArgument propriété. Le contrôle BulletedList dans le modèle est ensuite référencé puis lié aux résultats de la méthode de la classe ProductsBLLGetProductsByCategoryID(categoryID).

Dans les didacticiels précédents qui utilisaient les boutons d’une Liste de données, tels qu’une vue d’ensemble de la modification et de la suppression de données dans DataList, nous avons déterminé la valeur de clé primaire d’un élément donné via la DataKeys collection. Bien que cette approche fonctionne correctement avec DataList, le répéteur n’a pas de DataKeys propriété. Au lieu de cela, nous devons utiliser une autre approche pour fournir la valeur de clé primaire, par exemple via la propriété du bouton CommandArgument ou en affectant la valeur de clé primaire à un contrôle Web Label masqué dans le modèle et en lisant sa valeur dans le gestionnaire d'événements ItemCommand à l'aide de e.Item.FindControl("LabelID").

Une fois le ItemCommand gestionnaire d’événements terminé, prenez un moment pour tester cette page dans un navigateur. Comme le montre la figure 7, cliquer sur le lien Afficher les produits provoque un renvoi et affiche les produits de la catégorie sélectionnée dans une liste à puces. Notez également que ces informations sur le produit demeurent visibles, même si des liens dans d'autres catégories sont cliqués pour afficher les produits.

Remarque

Si vous souhaitez modifier le comportement de ce rapport, de sorte qu'à la fois seuls les produits d'une catégorie soient répertoriés, définissez simplement la propriété EnableViewState du contrôle BulletedList sur False.

Figure 7 : Une bulletedList est utilisée pour afficher les produits de la catégorie sélectionnée (cliquez pour afficher l’image de taille complète)

Résumé

Les contrôles DataList et Repeater peuvent inclure n’importe quel nombre de boutons, linkButtons ou ImageButtons dans leurs modèles. Ces boutons, lorsqu’ils sont cliqués, provoquent un postback et déclenchent l’événement ItemCommand. Pour associer une action côté serveur personnalisée à un bouton en cours de clic, créez un gestionnaire d’événements pour l’événement ItemCommand . Dans ce gestionnaire d’événements, vérifiez d’abord la valeur entrante CommandName pour déterminer quel bouton a été cliqué. Des informations supplémentaires peuvent éventuellement être fournies via la propriété du CommandArgument bouton.

Bonne programmation !

À propos de l’auteur

Scott Mitchell, auteur de sept livres ASP/ASP.NET et fondateur de 4GuysFromRolla.com, travaille avec les technologies Web Microsoft depuis 1998. Scott travaille en tant que consultant indépendant, formateur et écrivain. Son dernier livre est Sams Teach Yourself ASP.NET 2.0 en 24 heures. On peut le joindre à mitchell@4GuysFromRolla.com.

Merci spécial à

Cette série de tutoriels a été examinée par de nombreux réviseurs utiles. Le réviseur principal de ce tutoriel était Dennis Patterson. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.

Prochain