Formation PUB770 : ASP.NET WebForms, H-2015 Aller plus loin avec le GridView

38.1 GridView éditable


Il est possible d'éditer les données affichées dans un GridView. ASP.NET met en place des automatismes pour faciliter le travail du programmeur. Mais pour profiter de ces automatismes, il faut respecter certaines règles.

▼Publicité Le texte se poursuit plus bas

Requête permettant de faire la mise à jour

La requête qui servira à effectuer la mise à jour doit être spécifiée dans la source de données (attribut UpdateCommand). Il peut s'agir d'une requête UPDATE ou d'une procédure stockée.

Dans tous les cas, il faut respecter les règles suivantes : 

  • La requête SELECT de la source de données associée au GridView doit aller chercher l'identifiant (ex : produit_id) et ce, même si l'identifiant n'est pas affiché. 
  • Le GridView doit utiliser la propriété DataKeyNames pour indiquer le nom du champ servant d'identifiant.
  • La requête UPDATE doit recevoir un paramètre pour chaque champ affiché dans la grille et un paramètre supplémentaire pour l'identifiant (ex : produit_id). Ce dernier sera utilisé dans le WHERE pour préciser quel enregistrement doit être modifié.
  • Le nom des paramètres dans la requête UPDATE doit correspondre exactement au nom des champs dans la ou les tables mises à jour. Si la mise à jour est effectuée à l'aide d'une procédure stockée, le nom des paramètres reçus par la procédure stockée doit correspondre au nom des champs dans la ou les tables mises à jour.

Puisque nous utiliserons les automatismes d'ASP.NET, il n'est pas nécessaire de définir les UpdateParameters pour la requête.

Lien permettant d'éditer directement dans la grille

L'attribut AutoGenerateEditButton du GridView permet d'ajouter automatiquement un lien « Modifier » pour chaque ligne de la grille. 

Voici un exemple de GridView présentant ce lien. Remarquez que l'apparence du lien a été modifiée via le CSS afin qu'il ne soit pas souligné.

GridView avec AutoGenerateEditButton

Lorsqu'un internaute cliquera sur un lien « Modifier », les informations de la ligne seront changées en contrôles éditables et le lien « Modifier » laissera la place aux liens « Mettre à jour » et « Annuler ». Un clic sur « Mettre à jour » exécutera automatiquement la requête précisée dans le UpdateCommand.

Remarquez qu'il est possible de laisser certains champs en lecture seule.

Édition dans un GridView

Voici le code permettant de générer ce GridView :

Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewProduits" runat="server" DataSourceID="dataSourceProduit" AllowSorting="true" DataKeyNames="produit_id"

AutoGenerateEditButton="true" AutoGenerateColumns="false" HeaderStyle-CssClass="entetegrille" AlternatingRowStyle-CssClass="lignesgrille">

   <Columns>

      <asp:BoundField DataField="produit_code"

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

      <asp:BoundField DataField="produit_nom"

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

   </Columns>

</asp:GridView>

 

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

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

   UpdateCommand="UPDATE produit SET produit_nom=@produit_nom WHERE produit_id=@produit_id">

</asp:SqlDataSource>    

Sélectionner, modifier ou supprimer un enregistrement

Les exemples précédents montrent comment modifier un enregistrement directement dans le GridView. Il est également possible de sélectionner un enregistrement ou de le supprimer. 

Voici un exemple :

Édition dans un GridView

Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewProduits" runat="server" DataSourceID="dataSourceProduit" AllowSorting="true" DataKeyNames="produit_id"

   AutoGenerateEditButton="true" AutoGenerateSelectButton="true" AutoGenerateDeleteButton="true"  

   AutoGenerateColumns="false" HeaderStyle-CssClass="entetegrille" AlternatingRowStyle-CssClass="lignesgrille"

   OnSelectedIndexChanged="gridViewProduits_SelectedIndexChanged">

   <Columns>

      <asp:BoundField DataField="produit_code"

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

      <asp:BoundField DataField="produit_nom"

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

   </Columns>        

</asp:GridView>

 

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

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

   UpdateCommand="UPDATE produit SET produit_nom=@produit_nom WHERE produit_id=@produit_id"

   DeleteCommand="DELETE FROM produit WHERE produit_id=@produit_id">

</asp:SqlDataSource>

À la base, les liens pour modifier et supprimer une ligne ne nécessitent aucun code C#. Tout peut se passer dans le fichier de balises. 

Il faudra cependant coder le travail à effectuer sur le lien pour sélectionner. L'événement OnSelectedIndexChanged peut être utilisé pour cela.

Ex :

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

protected void gridViewProduits_SelectedIndexChanged(object sender, EventArgs e)

{

   // Retrouver la référence au GridView pour lequel on vient de sélectionner un élément

   // Cette instruction est ici optionnelle mais dans le cas de tableaux imbriqués, elle deviendra nécessaire

   GridView gridView = (GridView)sender;


   // Retrouver l'identifiant de la ligne sélectionnée

   int id = (int)gridView.DataKeys[gridView.SelectedIndex].Value;

 

   // On peut maintenant effectuer des manipulations à l'aide de ce id.

   ...

 

   // Retrouver la ligne sélectionnée

   GridViewRow row = gridView.SelectedRow;

 

   // On peut maintenant manipuler informations de cette ligne. 

   // La cellule 0 contient les liens pour éditer, supprimer ou sélectionner. 

   // La cellule 1 contient le premier BoundField.

   String code = row.Cells[1].Text;

   ...


   // La sélection d'une ligne dans une grille se termine généralement par l'affichage d'une autre page

   Response.Redirect(...);

}

Pour plus d'information

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

MITCHELL Scott. « Accessing and Updating Data in ASP.NET: Customizing the Editing Interface ». 4GuysFromRolla. http://aspnet.4guysfromrolla.com/demos/printPage.aspx?path=/articles/080807-1.aspx

« Databinding in Templates ». ASP.NET Quickstart Tutorials. http://quickstarts.asp.net/QuickStartv20/%28A%28okQqLaJnvXB9rnXWf_K7m_om-Zx0BYsOsJJrM20f_1axzwx5gnMNCvGwLWtxW8LNMqVbI9ES78LdxbvwHW6g0RWFcIzRzsq60%29%29/aspnet/doc/data/templates.aspx

« Modification des données dans un contrôle serveur Web GridView ». MSDN. http://msdn.microsoft.com/fr-fr/library/c4245bb4.aspx

« GridView Examples for ASP.NET 2.0: Editing the Underlying Data in a GridView ». MSDN. http://msdn.microsoft.com/en-us/library/ms972948.aspx

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 18 août 2017
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre