ASP.NET : Filtrer les données d’un GridView à l’aide d’une liste déroulante

Il est possible de filtrer une grille de données pour que les données affichées 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 la grille afin d'afficher seulement les produits d'une catégorie donnée.

▼Publicité

Filtrer un GridView à l'aide d'un DropDownList

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="prod_cat_id={0}"

         SelectCommand="...">

         <FilterParameters>

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

         </FilterParameters>

      </asp:SqlDataSource>

      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.

      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.

      Ex :

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

      protected void dropDownListCategories_SelectedIndexChanged(object sender, EventArgs e)

      {

         dataSourceProduit.SelectCommand += " WHERE prod_cat_id=@cat_id ORDER BY prod_code";

         dataSourceProduit.SelectParameters.Clear();

         dataSourceProduit.SelectParameters.Add("cat_id", dropDownListCategories.SelectedValue.ToString());

      }

       

      protected void dropDownListCategories_DataBound(object sender, EventArgs e)

      {

         dropDownListCategories.SelectedIndex = 0;

         dropDownListCategories_SelectedIndexChanged(sender, e);

      }

  • Peu importe la technique utilisée pour filtrer la grille, vous pouvez gérer le cas où aucun élément de la table ne correspond aux critères sélectionnés 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>

Ajouter un élément au DropDownList utilisé pour filtrer les données

Souvent, les éléments d'une liste déroulante seront tirés d'une base de données. Dans le cas où la liste déroulante est utilisée pour filtrer les données d'une grille, il serait intéressant de pouvoir ajouter un élément en début de liste permettant de montrer toutes les lignes de la grille sans les filtrer. 

Voici deux techniques pour y arriver :

  • Du côté du .aspx, vous pouvez demander à insérer un premier élément manuellement avant que la liaison de données ait lieu (attribut AppendDataBoundItems). Les items tirés de la BD seront donc placés après le nouvel item. Sans cet attribut, le nouvel item serait écrasé par les données tirées de la BD.

    Ex :

    Fichier .aspx (ASP.NET)

    <asp:DropDownList ... AppendDataBoundItems="true" >

       <asp:ListItem Selected="True" Value="-1">Veuillez choisir...</asp:ListItem>

    </asp:DropDownList>

    Notez que vous pouvez choisir la valeur à donner au nouvel élément. Dans cet exemple, j'ai choisi de lui donner -1 puisque je suis certaine que cette valeur n'est utilisée par aucun autre élément de la liste.

    Du côté du .cs, vous devrez gérer le cas où le SelectedIndex a la valeur 0 afin de désactiver le filtre. On utilise ici 0 puisque l'élément qui vient d'être ajouté est au tout début de la liste, soit à l'indice 0.

    Ex :

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

    protected void Page_Load(object sender, EventArgs e)

    {

       if (dropDownListCategories.SelectedIndex == 0)

       {

          dataSourceProduit.FilterExpression = "";

       }

       ...

    }

  • Si vous préférez ajouter l'élément au DropDownList du côté du .cs, le travail se fera dans le gestionnaire d'événement associé au OnDataBound.

    Ex :

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

    protected void dropDownListCategories_DataBound(object sender, EventArgs e)

    {

       dropDownListCategories.Items.Insert(0, "Veuillez choisir...");

       dropDownListCategories.Items[0].Value = "-1";

       dropDownListCategories.SelectedIndex = 0;

    }

Filtrer une ou plusieurs colonnes de la grille

Une autre façon intéressante de filtrer une grille de données consiste à permettre aux usagers d'entrer des caractères de filtrage pour une ou plusieurs colonnes de la grille.

Filtrer un GridView à l'aide de contrôles dans l'entête du tableau

Dans cet exemple, l'usager pourra écrire quelques caractères dans une ou plusieurs colonnes afin de filtrer la grille. Les données devront contenir les caractères entrés afin d'être affichées (on parle de contenir des caractères et non d'être identique aux caractères).

Pour créer les contrôles servant à filtrer la grille, on créera un tableau à bras puis on imbriquera le GridView dans la dernière ligne de ce tableau. La feuille de style permettra de donner l'impression que ces contrôles font partie intégrante de la grille.

Ex :

Fichier .aspx (ASP.NET)

<table>

   <tr>

      <th>Code</th>

      <th>Nom du produit</th>

      <th>Catégorie</th>

      <th>Prix</th>

   </tr>

   <tr>

      <td class="colonnecode">

         <asp:TextBox ID="textBoxCode" runat="server" placeholder="filtrer par code" CssClass="saisiecode" />>

      </td>

      ...

   </tr>

   <tr>

      <td colspan="4">

         <asp:GridView ID="gridViewProduits" runat="server" AutoGenerateColumns="False" DataKeyNames="prod_id" 

            DataSourceID="dataSourceProduit" ShowHeader="false" >

            <EmptyDataTemplate>

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

            </EmptyDataTemplate>

            <EmptyDataRowStyle CssClass="vide" />

            <Columns>

               <asp:BoundField DataField="prod_code" SortExpression="prod_code" ControlStyle-CssClass="colonnecode" />

               ...

            </Columns>

         </asp:GridView>

      </td>

   </tr>

</table> 

...

<asp:SqlDataSource ID="dataSourceProduit" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringVotreSite %>"

   FilterExpression="prod_code LIKE '%{0}%' AND prod_nom LIKE '%{1}%' AND cat_description LIKE '%{2}%' AND prod_prix >= {3} AND prod_prix <= {4}"

   SelectCommand="...">

   <FilterParameters>

      <asp:ControlParameter Name="prod_code" ControlID="textBoxCode" PropertyName="Text" Type="String" ConvertEmptyStringToNull="false" />

      ...

   </FilterParameters>

</asp:SqlDataSource>

Vous devez maintenant prévoir un bouton qui forcera la page à se recharger, ce qui activera le filtre avec les données fraîchement entrées.

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

« SqlDataSource.FilterExpression, propriété ». MSDN. http://msdn.microsoft.com/fr-fr/library/system.web.ui.webcontrols.sqldatasource.filterexpression(v=vs.110).aspx

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories