Ajout d’une colonne GridView de cases à cocher (VB)

2025-04-30

Ce tutoriel explique comment ajouter une colonne de cases à cocher à un contrôle GridView pour fournir à l’utilisateur un moyen intuitif de sélectionner plusieurs lignes de GridView.

Présentation

Dans le tutoriel précédent, nous avons examiné comment ajouter une colonne de boutons radio à le GridView afin de sélectionner un enregistrement particulier. Une colonne de cases à cocher est une interface utilisateur appropriée lorsque l'utilisateur ne peut choisir qu'un seul élément dans la grille. Toutefois, nous souhaitons peut-être permettre à l’utilisateur de choisir un nombre arbitraire d’éléments dans la grille. Les clients de messagerie web, par exemple, affichent généralement la liste des messages avec une colonne de cases à cocher. L’utilisateur peut sélectionner un nombre arbitraire de messages, puis effectuer une action, par exemple déplacer les e-mails vers un autre dossier ou les supprimer.

Dans ce tutoriel, nous allons voir comment ajouter une colonne de cases à cocher et comment déterminer quelles cases ont été cochées lors du postback. En particulier, nous allons créer un exemple qui imite étroitement l’interface utilisateur du client de messagerie web. Notre exemple inclut un GridView paginé répertoriant les produits dans la Products table de base de données avec une case à cocher dans chaque ligne (voir la figure 1). Un bouton Supprimer les produits sélectionnés, lorsqu’il est cliqué, supprime ces produits sélectionnés.

Figure 1 : Chaque ligne de produit inclut une case à cocher (cliquez pour afficher l’image de taille complète)

Étape 1 : Ajout d’un GridView paginé qui répertorie les informations sur le produit

Avant de nous soucier de l’ajout d’une colonne de cases à cocher, nous allons tout d’abord vous concentrer sur la liste des produits dans un GridView qui prend en charge la pagination. Commencez par ouvrir la page CheckBoxField.aspx dans le dossier EnhancedGridView et faites glisser un GridView depuis la boîte à outils sur le Concepteur, en définissant sa propriété ID à Products. Ensuite, choisissez de lier GridView à un nouvel ObjectDataSource nommé ProductsDataSource. Configurez ObjectDataSource pour utiliser la ProductsBLL classe, en appelant la GetProducts() méthode pour retourner les données. Étant donné que ce GridView est en lecture seule, définissez les listes déroulantes dans les onglets UPDATE, INSERT et DELETE sur (Aucun).

Figure 2 : Créer un ObjetDataSource nommé ProductsDataSource (cliquez pour afficher l’image de taille complète)

Figure 3 : Configurer ObjectDataSource pour récupérer des données à l’aide de la GetProducts() méthode (Click pour afficher l’image de taille complète)

Figure 4 : Définir les listes Drop-Down dans les onglets UPDATE, INSERT et DELETE sur (Aucun) (Cliquez pour afficher l’image de taille complète)

Une fois l’Assistant Configuration de la source de données terminé, Visual Studio crée automatiquement des colonnes liées et une colonne à case à cocher pour les champs de données liés au produit. Comme nous l’avons fait dans le tutoriel précédent, supprimez tous les éléments, mais ProductName, CategoryName et UnitPrice BoundFields, et changez les HeaderText propriétés en Produit, Catégorie et Prix. UnitPrice Configurez BoundField afin que sa valeur soit mise en forme en tant que devise. Configurez également la GridView pour prendre en charge la pagination en cochant la case Activer la pagination à partir de la balise intelligente.

Ajoutons également l’interface utilisateur pour supprimer les produits sélectionnés. Ajoutez un contrôle Web Button sous le GridView, en réglant sa propriété ID à DeleteSelectedProducts et sa propriété Text à "Supprimer les produits sélectionnés". Au lieu de supprimer réellement des produits de la base de données, pour cet exemple, nous allons simplement afficher un message indiquant les produits qui auraient été supprimés. Pour ce faire, ajoutez un contrôle Label Web sous le Bouton. Définissez son ID sur DeleteResults, effacez sa propriété Text, et définissez ses propriétés Visible et EnableViewState sur False.

Après avoir apporté ces modifications, le balisage déclaratif gridView, ObjectDataSource, Button et Label doit ressembler à ce qui suit :

<p>
    <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="ProductsDataSource" 
        AllowPaging="True" EnableViewState="False">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="Product" 
                SortExpression="ProductName" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                ReadOnly="True" SortExpression="CategoryName" />
            <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                HeaderText="Price" HtmlEncode="False" 
                SortExpression="UnitPrice" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ProductsDataSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetProducts" TypeName="ProductsBLL">            
    </asp:ObjectDataSource>
</p>
<p>
    <asp:Button ID="DeleteSelectedProducts" runat="server" 
        Text="Delete Selected Products" />
</p>
<p>
    <asp:Label ID="DeleteResults" runat="server" EnableViewState="False" 
        Visible="False"></asp:Label>
</p>

Prenez un moment pour afficher la page dans un navigateur (voir la figure 5). À ce stade, vous devez voir le nom, la catégorie et le prix des dix premiers produits.

Figure 5 : Le nom, la catégorie et le prix des dix premiers produits sont répertoriés (cliquez pour afficher l’image de taille complète)

Étape 2 : Ajout d’une colonne de cases à cocher

Étant donné que ASP.NET 2.0 inclut un CheckBoxField, on peut penser qu’il peut être utilisé pour ajouter une colonne de cases à un GridView. Malheureusement, ce n’est pas le cas, car CheckBoxField est conçu pour fonctionner avec un champ de données booléen. Autrement dit, pour utiliser CheckBoxField, nous devons spécifier le champ de données sous-jacent dont la valeur est consultée pour déterminer si la case rendue est cochée. Nous ne pouvons pas utiliser CheckBoxField pour inclure simplement une colonne de cases à cocher non cochées.

Au lieu de cela, nous devons ajouter un TemplateField et ajouter un contrôle Web CheckBox à son ItemTemplate. Allez-y et ajoutez un TemplateField à Products GridView et faites-le le premier champ (à gauche). À partir de la balise active GridView, cliquez sur le lien Modifier les modèles, puis faites glisser un contrôle Web CheckBox à partir de la boîte à outils dans le ItemTemplate. Définissez cette propriété CheckBox ID sur ProductSelector.

Figure 6 : Ajouter un contrôle web CheckBox nommé ProductSelector à templateField s ItemTemplate (cliquez pour afficher l’image de taille complète)

Avec le contrôle Web TemplateField et CheckBox ajoutés, chaque ligne inclut désormais une case à cocher. La figure 7 montre cette page, lorsqu’elle est consultée via un navigateur, une fois que TemplateField et CheckBox ont été ajoutés.

Figure 7 : Chaque ligne de produit inclut désormais une case à cocher (cliquez pour afficher l’image de taille complète)

Étape 3 : Détermination des cases à cocher cochées lors de la publication

À ce stade, nous avons une colonne de cases à cocher, mais aucun moyen de déterminer quelles cases ont été cochées lors du retour de soumission. Toutefois, lorsque le bouton Supprimer les produits sélectionnés est cliqué, nous devons savoir quelles cases ont été cochées pour supprimer ces produits.

La propriété GridView Rows permet d’accéder aux lignes de données dans GridView. Nous pouvons parcourir ces lignes, accéder par programmation au contrôle de case à cocher, puis consulter sa Checked propriété pour déterminer si la case à cocher a été sélectionnée.

Créez un gestionnaire d'événements pour l'événement du contrôle de type Button sur le Web DeleteSelectedProducts et ajoutez le code suivant :

Protected Sub DeleteSelectedProducts_Click(sender As Object, e As EventArgs) _
    Handles DeleteSelectedProducts.Click
    
    Dim atLeastOneRowDeleted As Boolean = False
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing AndAlso cb.Checked Then
            ' Delete row! (Well, not really...)
            atLeastOneRowDeleted = True
            ' First, get the ProductID for the selected row
            Dim productID As Integer = _
                Convert.ToInt32(Products.DataKeys(row.RowIndex).Value)
            ' "Delete" the row
            DeleteResults.Text &= String.Format( _
                "This would have deleted ProductID {0}<br />", productID)
            '... To actually delete the product, use ...
            ' Dim productAPI As New ProductsBLL
            ' productAPI.DeleteProduct(productID)
            '............................................
        End If
    Next
    ' Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted
End Sub

La Rows propriété retourne une collection d’instances GridViewRow qui constituent les lignes de données de GridView. La For Each boucle ici énumère cette collection. Pour chaque GridViewRow objet, la CheckBox de la ligne est accessible programmatiquement à l’aide de row.FindControl("controlID"). Si la CheckBox est cochée, la valeur correspondante ProductID de la ligne est récupérée à partir de la collection DataKeys. Dans cet exercice, nous affichons simplement un message informatif dans l'étiquette DeleteResults, bien que dans une application fonctionnelle, nous effectuions plutôt un appel à la méthode ProductsBLL de la classe DeleteProduct(productID).

Avec l’ajout de ce gestionnaire d’événements, le fait de cliquer sur le bouton Supprimer les produits sélectionnés affiche désormais les ProductID produits sélectionnés.

Figure 8 : Lorsque le bouton Supprimer les produits sélectionnés est cliqué sur les produits ProductID sélectionnés sont répertoriés (cliquez pour afficher l’image de taille complète)

Étape 4 : Ajout de l’option Vérifier tout et désactiver tous les boutons

Si un utilisateur souhaite supprimer tous les produits de la page active, il doit cocher chacune des dix cases à cocher. Nous pouvons accélérer ce processus en ajoutant un bouton Vérifier tout qui, lorsque vous cliquez, sélectionne toutes les cases dans la grille. Un bouton Désactiver tout serait également utile.

Ajoutez deux contrôles Web Button à la page, en les plaçant au-dessus de GridView. Définissez le premier sur IDCheckAll et sa propriété Text sur Tout Cocher ; définissez le deuxième sur IDUncheckAll et sa propriété Text sur Tout Décocher.

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

Ensuite, créez une méthode dans la classe code-behind nommée ToggleCheckState(checkState) qui, lorsqu'elle est appelée, énumère la collection Products de GridView Rows et définit la propriété Checked de chaque CheckBox sur la valeur du paramètre checkState passé.

Private Sub ToggleCheckState(ByVal checkState As Boolean)
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing Then
            cb.Checked = checkState
        End If
    Next
End Sub

Ensuite, créez des gestionnaires d’événements pour les boutons Click et CheckAll. Dans le gestionnaire d’événements CheckAll, appelez simplement ToggleCheckState(True) ; dans UncheckAll, appelez ToggleCheckState(False).

Protected Sub CheckAll_Click(sender As Object, e As EventArgs) _
    Handles CheckAll.Click
    
    ToggleCheckState(True)
End Sub
Protected Sub UncheckAll_Click(sender As Object, e As EventArgs) _
    Handles UncheckAll.Click
    
    ToggleCheckState(False)
End Sub

Avec ce code, le fait de cliquer sur le bouton Vérifier tout provoque un rechargement de la page et vérifie toutes les cases à cocher dans la GridView. De même, cliquez sur Désactiver toutes les cases à cocher. La figure 9 montre l’écran une fois que le bouton Vérifier tout a été activé.

Figure 9 : Cliquer sur le bouton Vérifier toutes les cases à cocher (Cliquer pour afficher l’image de taille complète)

Remarque

Lors de l’affichage d’une colonne de cases à cocher, une méthode pour sélectionner ou désélectionner toutes les cases consiste à utiliser une case à cocher dans la ligne d’en-tête. De plus, l'implémentation actuelle de "Tout cocher/Tout décocher" nécessite une réactualisation. Les cases à cocher peuvent être cochées ou décochées, cependant, entièrement via un script côté client, fournissant ainsi une expérience utilisateur plus fluide. Pour explorer l’utilisation d’une case à cocher de ligne d’en-tête pour Vérifier tout et décocher tout en détail, ainsi qu’une discussion sur l’utilisation de techniques côté client, consultez Vérification de tous les CheckBox dans un GridView à l’aide de Client-Side script et d’une case à cocher Check All CheckBox.

Résumé

Dans les cas où vous devez permettre aux utilisateurs de choisir un nombre arbitraire de lignes à partir d’un GridView avant de continuer, l’ajout d’une colonne de cases à cocher est une option. Comme nous l’avons vu dans ce didacticiel, pour inclure une colonne de cases à cocher dans le GridView, il faut ajouter un TemplateField avec un contrôle Web CheckBox. En utilisant un contrôle Web (par rapport à l'injection de balisage directement dans le modèle, comme nous l'avons fait dans le didacticiel précédent), ASP.NET mémorise automatiquement quelles cases à cocher ont été cochées ou non lors du retour de page. Nous pouvons également accéder par programmation aux CheckBox dans le code pour déterminer si une CheckBox donnée est cochée ou pour modifier l’état vérifié.

Ce tutoriel et le dernier ont examiné l’ajout d’une colonne de sélecteur de lignes à GridView. Dans notre prochain tutoriel, nous allons examiner comment, avec un peu de travail, nous pouvons ajouter des fonctionnalités d’insertion à GridView.

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.

Précédent Suivant

Partager via