In questo articolo vedremo come applicare ad un controllo gridview, una colonna di tipo Checkbox e gestire fino ad un massimo di due selezioni.
Vedremo come con Javascript, e codice .Net possiamo estendere il controllo griglia, con interessanti colonne personalizzate.
Si crea un nuovo progetto in Visual Studio, di tipo web selezionando il linguaggio di programmazione di proprio interesse.
Aggiungiamo alla nostra pagina web, un controllo gridView, a questo punto dobbiamo scrivere il codice.
Stesura del codice
Ora non ci resta che scrivere il codice relativo alla gestione dei controlli.
Nella parte markup, ossia nel codice Html, impostiamo le colonne al controllo griglia, in particolare, avremmo tre colonne, una di tipo checkbox e due con i dati.
Qui di seguito un esempio di codice.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Descrizione">
<ItemTemplate>
<input type="checkbox" name="chkProdotto" <%#DataBinder.Eval(Container.DataItem, "ISVISIBLE")%> value="<%#DataBinder.Eval(Container.DataItem, "ID")%>"
onclick="CheckSelezionati();" /><%#DataBinder.Eval(Container.DataItem, "DESCRIZIONE")%>
-
<%#DataBinder.Eval(Container.DataItem, "DESCRIZIONE")%>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="NOME" HeaderText="Nome" />
<asp:BoundField DataField="COGNOME" HeaderText="Cognome" />
</Columns>
</asp:GridView>
Aggiungiamo anche un pulsante alla nostra pagina, come riportato qui di seguito.
<asp:Button ID="BtnEsegui" runat="server" Text="Ottieni valori" OnClick="BtnEsegui_Click" />
Il pulsante avrà l’obiettivo di visualizzare i dati selezionati o meglio il codice ID del checkbox selezionato.
Ora dobbiamo scrivere il codice Javascript, che controlla se abbiamo selezionato più di un controllo.
Si riporta qui di seguito la funzione Javascript, che verrà utilizzata nell’evento onclick del pulsante Checkbox situato nella griglia.
<script language="javascript">
function CheckSelezionati() {
var count = 0;
for (i = 0; i < document.forms[0].elements.length; i++) {
if ((document.forms[0].elements[i].type == 'checkbox') && (document.forms[0].elements[i].name.indexOf('chkProdotto') > -1)) {
if (document.forms[0].elements[i].checked == true) {
count++;
if (count > 2) {
document.forms[0].elements[i].checked = false;
alert("Si possono selezionare massimo 2 scelte.");
break;
}
}
}
}
if (count > 2) {
return false;
}
else { return true; }
}
</script>
Il codice Javascript precedente, verifica se i vari oggetti checkbox, in particolare quelli che hanno il nome chkprodotto, sono selezionati, in tal caso, verifica che il numero non sia superiore a 2.
Ora dobbiamo scrivere il codice per valorizzare la griglia.
Qui di seguito, si riporta un frammento di codice, che crea un datatable, con tre record, per entrambi i linguaggi.
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim DttDati As New DataTable
Dim ColonnaID As New DataColumn("ID")
Dim ColonnaDescrizione As New DataColumn("DESCRIZIONE")
Dim ColonnaNome As New DataColumn("NOME")
Dim ColonnaCognome As New DataColumn("COGNOME")
Dim ColonnaCheccato As New DataColumn("ISVISIBLE")
DttDati.Columns.Add(ColonnaID)
DttDati.Columns.Add(ColonnaDescrizione)
DttDati.Columns.Add(ColonnaNome)
DttDati.Columns.Add(ColonnaCognome)
DttDati.Columns.Add(ColonnaCheccato)
Dim DtrRiga As DataRow = DttDati.NewRow()
DtrRiga("ID") = 1
DtrRiga("DESCRIZIONE") = "MELA"
DtrRiga("NOME") = "Emanuele"
DtrRiga("COGNOME") = "Mattei"
DtrRiga("ISVISIBLE") = "checked"
DttDati.Rows.Add(DtrRiga)
DtrRiga = DttDati.NewRow()
DtrRiga("ID") = 2
DtrRiga("DESCRIZIONE") = "PERA"
DtrRiga("NOME") = "Manuel"
DtrRiga("COGNOME") = "Maffei"
DtrRiga("ISVISIBLE") = "checked"
DttDati.Rows.Add(DtrRiga)
DtrRiga = DttDati.NewRow()
DtrRiga("ID") = 3
DtrRiga("DESCRIZIONE") = "BANANE"
DtrRiga("NOME") = "Maria"
DtrRiga("COGNOME") = "Bianchi"
DtrRiga("ISVISIBLE") = ""
DttDati.Rows.Add(DtrRiga)
GridView1.DataSource = DttDati
GridView1.DataBind()
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
DataTable DttDati = new DataTable();
DataColumn ColonnaID = new DataColumn("ID");
DataColumn ColonnaDescrizione = new DataColumn("DESCRIZIONE");
DataColumn ColonnaNome = new DataColumn("NOME");
DataColumn ColonnaCognome = new DataColumn("COGNOME");
DataColumn ColonnaCheccato = new DataColumn("ISVISIBLE");
DttDati.Columns.Add(ColonnaID);
DttDati.Columns.Add(ColonnaDescrizione);
DttDati.Columns.Add(ColonnaNome);
DttDati.Columns.Add(ColonnaCognome);
DttDati.Columns.Add(ColonnaCheccato);
DataRow DtrRiga = DttDati.NewRow();
DtrRiga("ID") = 1;
DtrRiga("DESCRIZIONE") = "MELA";
DtrRiga("NOME") = "Emanuele";
DtrRiga("COGNOME") = "Mattei";
DtrRiga("ISVISIBLE") = "checked";
DttDati.Rows.Add(DtrRiga);
DtrRiga = DttDati.NewRow();
DtrRiga("ID") = 2;
DtrRiga("DESCRIZIONE") = "PERA";
DtrRiga("NOME") = "Manuel";
DtrRiga("COGNOME") = "Maffei";
DtrRiga("ISVISIBLE") = "checked";
DttDati.Rows.Add(DtrRiga);
DtrRiga = DttDati.NewRow();
DtrRiga("ID") = 3;
DtrRiga("DESCRIZIONE") = "BANANE";
DtrRiga("NOME") = "Maria";
DtrRiga("COGNOME") = "Bianchi";
DtrRiga("ISVISIBLE") = "";
DttDati.Rows.Add(DtrRiga);
GridView1.DataSource = DttDati;
GridView1.DataBind();
}
Ora scriviamo il codice da inserire nell’evento click del pulsante, che verifica tutti i controlli checkbox selezionati e ne riporta il valore.
Qui di seguito tali dichiarazioni per entrambi i linguaggi.
VB.Net
Protected Sub BtnEsegui_Click(sender As Object, e As EventArgs) Handles BtnEsegui.Click
If Not Request.Form("chkProdotto") Is Nothing Then
For Each lIdProdotto As Object In Request.Form("chkProdotto").Split(",")
Response.Write("ID Prodotto: " & lIdProdotto)
Next
End If
End Sub
C#
protected void BtnEsegui_Click(object sender, EventArgs e)
{
if ((Request.Form("chkProdotto") != null))
{
foreach (object lIdProdotto in Request.Form("chkProdotto").Split(","))
{
Response.Write("ID Prodotto: " + lIdProdotto);
}
}
}
Conclusioni
L’articolo ha voluto riportare una delle tante tecniche di come estendere il controllo GridView, dotandolo di una colonna di tipo controllo checkbox.
L’utilizzo di Javascript per verificare il numero delle selezioni, fornisce all’utente un controllo sulla gestione dei dati più mirata.