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
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 :
Puisque nous utiliserons les automatismes d'ASP.NET, il n'est pas nécessaire de définir les UpdateParameters pour la requête.
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é.
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.
Voici le code permettant de générer ce GridView :
<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>
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 :
<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 :
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(...);
}
« 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
Site fièrement hébergé chez A2 Hosting.
