Asp.Net gridview con checkbox nelle colonne tramite VB.Net e C#

Si riporta l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_aspnet-applicare-un-checkbox-nel-gridvie_1528.aspx

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.