33.1 DropDownList pour déterminer le sous-ensemble des données d'un GridView

Il est possible de filtrer les données d'un GridView en faisant en sorte que les données à afficher correspondent à un critère. Dans le cas où le critère correspond à une clé étrangère, le DropDownList est le contrôle tout indiqué pour sélectionner la valeur à utiliser.

Par exemple, si on a un liste de produit, on pourra choisir d'afficher tous les produits ou encore filtrer le GridView afin d'afficher seulement les produits d'une catégorie donnée.

Voici comment filtrer un GridView :

• Commencez par créer un DropDownList pour afficher les valeurs pouvant être utilisées pour le sous-ensemble. Par exemple, si on veut afficher tous les produits d'une catégorie donnée, le DropDownList devra afficher la liste des catégories. N'oubliez pas de spécifier dans quel ordre les données doivent être affichées.
• Mettez l'attribut AutoPostBack du DropDownList à True. Ceci assurera que la page sera rechargée dès qu'on sélectionne un nouvel élément dans la liste. La grille sera donc automatiquement rafraîchie pour tenir compte de la valeur sélectionnée.
• Placez un GridView sous le DropDownList. Le GridView utilisera sa propre source de données, différente de celle utilisée par le DropDownList.
• Deux options s'offrent à vous pour que le GridView n'affiche qu'un sous-ensemble des données :

  • La technique la plus simple consiste à utiliser les fonctionnalités de filtrage d'une source de données. Le travail se fera alors dans le fichier .aspx.

    Dans le SqlDataSource utilisé par le GridView, définissez l'attribut FilterExpression. L'expression du filtre sera généralement sous la forme « champ={0} », où {0} représente le paramètre à utiliser.

    Vous devrez utiliser un <FilterParameters> pour indiquer où le paramètre {0} doit prendre sa valeur. Ce sera généralement la valeur sélectionnée dans le DropDownList.

    Ex :

    Fichier .aspx (ASP.NET)

    <asp:SqlDataSource ID="dataSourceProduit" ...

        FilterExpression="produit_cat_id={0}"

        SelectCommand="...">

        <FilterParameters>

            <asp:ControlParameter Name="produit_cat_id" ControlID="dropDownListCategories" PropertyName="SelectedValue" Type="Int32" />

        </FilterParameters>

    </asp:SqlDataSource>

    Si vous permettez l'affichage de tous les items, peu importe leur catégorie, vous devrez éliminer le FilterExpression par programmation. Dans l'extrait de code suivant, on saura que tous les items doivent être affichés lorsque le premier élément de la liste déroulante est sélectionné.

    Fichier .aspx.cs (ASP.NET avec C#)

    protected void Page_Load(object sender, EventArgs e)

    {

        if (dropDownListCategories.SelectedIndex == 0)

        {

            dataSourceProduit.FilterExpression = "";

        }

    }

    ou

  • Certains programmeurs préfèrent gérer le filtre manuellement en ajoutant une clause WHERE à la requête. Le travail se fera en grande partie dans le fichier .aspx.cs.

    Sur l'événement OnSelectIndexChanged du DropDownList, ajoutez la clause WHERE à la source de données afin qu'elle ne retrouve que les enregistrements désirés.

    Vous devrez pour cela utiliser un SelectParameters et l'initialiser à partir de la valeur sélectionnée dans le DropDownList.

    Attention : n'oubliez pas que dans une requête SQL, la clause WHERE doit être placée AVANT la clause ORDER BY. C'est pourquoi on déclarera la requête sans ORDER BY dans le .aspx et qu'on ajoutera les clauses manquantes par programmation.

    Et pour vous assurer que les bonnes données soient affichées dès le départ, alors que le SelectedIndexChanged n'a pas encore eu lieu, vous devez sélectionner manuellement le premier élément de la liste puis appeler le gestionnaire d'événement associé au SelectedIndexChanged.

    L'extrait de code suivant traite lui aussi le cas où on permettrait l'affichage de tous les items, peu importe leur catégorie, en sélectionnant le premier élément de la liste déroulante.

    Ex :

    Fichier .aspx (ASP.NET)

    <asp:SqlDataSource ID="dataSourceProduit" runat="server"

        ConnectionString="<%$ ConnectionStrings:ConnectionStringVotreSite %>"

        SelectCommand="SELECT produit_code, produit_nom, produit_description FROM produit WHERE produit_id=@produit_id>

        ...

    </asp:SqlDataSource>

    Fichier .aspx.cs (ASP.NET avec C#)

    protected void dropDownListCategories_DataBound(object sender, EventArgs e)

    {

        dropDownListCategories.SelectedIndex = 0;

        dropDownListCategories_SelectedIndexChanged(sender, e);

    }

     

    protected void dropDownListCategories_SelectedIndexChanged(object sender, EventArgs e)

    {

        if (dropDownListCategories.SelectedIndex != 0)

        {

            dataSourceProduit.SelectCommand += " WHERE produit_cat_id=@cat_id";

            dataSourceProduit.SelectParameters.Clear();

            dataSourceProduit.SelectParameters.Add("cat_id", System.Data.DbType.Int32, dropDownListCategories.SelectedValue.ToString());

        }

     

        dataSourceProduit.SelectCommand += " ORDER BY produit_code";

    }

  Attention : si vous choisissez d'ajouter manuellement une clause WHERE à la requête SELECT, vous ne devez pas déclarer le paramètre de la clause WHERE dans le .aspx puisque le paramètre ne correspondrait à aucun @ lorsque tous les enregistrements sont affichés. La requête pourrait alors donner un résultat inattendu. Vous devrez donc déclarer le paramètre par programmation.

• Peu importe la technique utilisée pour filtrer la grille, vous devez gérer le cas où aucun élément de la table ne correspond aux critères sélectionnés. Ceci peut être fait en définissant une balise <EmptyDataTemplate> dans le GridView. Au besoin, vous pouvez également utiliser un <EmptyDataRowStyle> pour contrôler l'apparence de ce qui sera affiché lorsque la grille est vide.

  Ex :

  Fichier .aspx (ASP.NET)

  <asp:GridView ... >

     <EmptyDataTemplate>

        <asp:Label runat="server" Text="Il n'y a aucun produit correspondant à la catégorie sélectionnée." />

     </EmptyDataTemplate>

     <EmptyDataRowStyle CssClass="..." />

     ...

  </asp:GridView>

Pour plus d'information

« Asp.net filter gridview records with dropdownlist selection ». Aspdotnet-Suresh. http://www.aspdotnet-suresh.com/2011/11/how-to-filter-gridview-records-with.html

« Accessing and Updating Data in ASP.NET: Filtering Database Data with Parameters ». 4 Guys From Rolla. http://www.4guysfromrolla.com/articles/030106-1.aspx

« Creating a great looking Gridview with filtering ». Evonet. http://evonet.com.au/creating-a-great-looking-gridview-with-filtering/

« GridView.EmptyDataTemplate, propriété ». MSDN. http://msdn.microsoft.com/fr-ca/library/system.web.ui.webcontrols.gridview.emptydatatemplate(v=vs.100).aspx