Le GridView pour afficher un tableau de données avec ASP.NET

Le GridView permet d'afficher dans un tableau les données retournées par la requête SELECT d'une source de données. Ce contrôle est très puissant et offre beaucoup de fonctionnalités.

Cette série d'articles sur le GridView vous permettra de démystifier cet important contrôle et vous aidera à en tirer profit au maximum !

▼Publicité

Voici un exemple de GridView dans sa plus simple expression.

Soit le DataSource suivant :

Fichier .aspx (ASP.NET)

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

   SelectCommand="SELECT produit_id, produit_code, produit_nom FROM produit ORDER BY produit_code">

</asp:SqlDataSource>

Lorsqu'on écrit la requête SELECT qui retrouvera les données à afficher dans le GridView, il est important de préciser dans quel ordre les données doivent apparaître. La clause ORDER BY permettra d'y arriver.

GridView dans sa forme la plus simple

On pourra ajouter une grille de données qui se remplit automatiquement à partir des informations retournées par la requête SELECT, comme suit :

Exemple de GridView
Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewProduits" runat="server" 

   DataSourceID="dataSourceProduit" >

</asp:GridView>

N'afficher que certains champs

Si on met l'attribut AutoGenerateColumns à False, on pourra spécifier chacun des champs à afficher :

Exemple de GridView
Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewProduits" runat="server" 

   DataSourceID="dataSourceProduit" AutoGenerateColumns="False" >

   <Columns>

      <asp:BoundField DataField="produit_code" />

      <asp:BoundField DataField="produit_nom" />

   </Columns>

</asp:GridView>

Ajouter des fonctionnalités

ASP.NET met à votre disposition une foule de fonctionnalités vous permettant de transformer ce même GridView à votre guise. Notez que cet exemple est encore incomplet car il faudrait entre autres associer du code aux liens Sélectionner et Modifier et adapter le DataSource en lui fournissant la requête à exécuter lorsqu'une modification doit être enregistrée.

Plus loin dans cette série, on verra qu'il est possible d'utiliser des images ou des boutons plutôt que des liens sur du texte. Il est également possible, lorsqu'on clique sur Modifier, de laisser certains champs en lecture seule ou encore d'afficher une liste déroulante pour une clé étrangère.

Le but de cet exemple incomplet est simplement de vous illustrer la puissance du GridView.

Exemple de GridView
Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewProduits" runat="server"

   DataSourceID="dataSourceProduit"

   AllowSorting="true"

   AutoGenerateEditButton="true"

   AutoGenerateSelectButton="true"

   AutoGenerateColumns="false" >

   <Columns>

      <asp:BoundField DataField="produit_code"

         HeaderText="Code" SortExpression="produit_code" />

      <asp:BoundField DataField="produit_nom"

         HeaderText="Nom" SortExpression="produit_nom" />

   </Columns>

</asp:GridView>

Un peu de mise en forme

En utilisant le CSS de façon judicieuse, il devient relativement simple d'améliorer l'apparence de la grille :

Exemple de GridView
Fichier .aspx (ASP.NET)

<div class="grille">

   <asp:GridView ID="gridViewProduits" runat="server"

      DataSourceID="dataSourceProduit" AllowSorting="true"

      AutoGenerateEditButton="true"

      AutoGenerateSelectButton="true"

      AutoGenerateColumns="false"

      HeaderStyle-CssClass="entetegrille"

      AlternatingRowStyle-CssClass="lignesgrille" >

      <Columns>

         <asp:BoundField DataField="produit_code"

            HeaderText="Code" SortExpression="produit_code" />

         <asp:BoundField DataField="produit_nom"

            HeaderText="Nom" SortExpression="produit_nom" />

      </Columns>

   </asp:GridView>

</div>

CSS

div.grille table {

    border: 1px solid #E5DD71; /* beige foncé */

    box-shadow: 2px 3px 5px #888888;

}

 

div.grille a {

    text-decoration: none;

    color: #84B814; /* vert */

    padding: 5px;

}

 

div.grille td, div.grille th {

    padding: 5px;

}

 

div.grille .entetegrille th, div.grille .entetegrille th a {

    background-color: #358BB6; /* bleu */

    color: White;

    font-size: 1.1em;

    font-weight: bold;

    text-align: left;

}

 

div.grille .lignesgrille {

    background-color: #F5F2C6; /* beige pâle */

Pour plus d'information

« GridView, classe ». MSDN http://msdn.microsoft.com/fr-fr/library/system.web.ui.webcontrols.gridview(v=VS.100).aspx

« What is a GridView ? ». VKInfotek. http://www.vkinfotek.com/gridview/what-is-gridview-control.html

« ASP.NET GridView Tips and Tricks Collection ». DevCurry. http://www.devcurry.com/2010/11/aspnet-gridview-tips-and-tricks.html

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