11 Mar2016
Suppression de plusieurs lignes d’une GridView avec CheckBox
Objectifs:
- Manipuler le contrôle serveur GridView
- Associer le contrôle GridView avec une source de données de type SqlDataSource
- Récupérer les données d'un contrôle serveur avec Javascript
Énoncé:
L’objectif de cet exercice est de créer une page ASP.Net qui permet la suppression de plusieurs enregistrements affichés dans une grille (GridView) en utilisant des cases à cochés (CheckBox).
Suppression avec CheckBox
Afficher un message de confirmation de la suppression avec le nombre de clients sélectionnés:
Message de confirmation
Prévoir le cas où aucun client n'est sélectionné:
Cas: Aucune sélection
Code ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SuppressionCheckBox.aspx.cs" Inherits="ctrlServeur_exelib.SuppressionCheckBox" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Suppression de plusieurs lignes d’une GridView avec CheckBox</title>
<script type = "text/javascript">
function ConfirmerSuppression()
{
var count = 0;
var gv = document.getElementById("<%= GridView1.ClientID%>");
var chk = gv.getElementsByTagName("input");
for(var i=0; i<chk.length; i++)
{
if(chk[i].checked)
{
count++;
}
}
if(count == 0)
{
alert("Aucun client sélectionné.");
return false;
}
else if(count == 1)
{
return confirm("Voulez-vous supprimer le client sélectionné?");
}
else
{
return confirm("Voulez-vous supprimer les " + count + " clients sélectionnés?");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>Liste des clients</h3>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Id" DataSourceID="SqlDataSource1" EmptyDataText="Il n'y a aucun enregistrement de données à afficher." ForeColor="#333333" GridLines="None" BorderStyle="Solid">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="Action">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="Nom" HeaderText="Nom" SortExpression="Nom" />
<asp:BoundField DataField="Prenom" HeaderText="Prenom" SortExpression="Prenom" />
<asp:BoundField DataField="Adresse" HeaderText="Adresse" SortExpression="Adresse" />
<asp:BoundField DataField="Ville" HeaderText="Ville" SortExpression="Ville" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:gestionCmdConnectionString1 %>" SelectCommand="SELECT [Id], [Nom], [Prenom], [Adresse], [Ville] FROM [Clients]">
</asp:SqlDataSource>
<br />
<asp:Button ID="btnSupprimer" runat="server" Text="Supprimer la sélection" OnClick="btnSupprimer_Click" OnClientClick="return ConfirmerSuppression()" />
<br />
<br />
<asp:Label ID="lblMsg" runat="server" ForeColor="Green"></asp:Label>
</div>
</form>
</body>
</html>
Note
- La fonction JavaScript permet de parcourir les cases à cocher (input) du GridView et compter le nombre de lignes sélectionné.
- L'instruction :
<%= GridView1.ClientID%>
permet de récupérer l'ID du contrôle GridView1 après génération du code HTML.
Code-Behind C#
protected void btnSupprimer_Click(object sender, EventArgs e)
{
lblMsg.Text = "";
int nb = 0;
string cltId = "";
foreach(GridViewRow row in GridView1.Rows)
{
var chk = (row.Cells[0].FindControl("CheckBox1") as CheckBox);
if (chk.Checked)
{
nb++;
cltId += row.Cells[1].Text + ",";
}
}
if (nb > 0)
{
string chaine = ConfigurationManager.ConnectionStrings["gestionCmdConnectionString1"].ConnectionString;
SqlConnection cn = new SqlConnection(chaine);
try
{
cltId = cltId.TrimEnd(',');
string req = "DELETE FROM Clients WHERE Id IN(" + cltId + ")";
SqlCommand cmd = new SqlCommand(req, cn);
cn.Open();
cmd.ExecuteNonQuery();
lblMsg.Text = nb + " Client(s) supprimé(s) avec succès.";
}
finally
{
cn.Close();
}
}
}
Note
La fonction JavaScript (Client) ConfirmerSuppression sera appelé avant l’événement du clic sur le bouton côté serveur.
