Asp Net inserire una colonna di tipo immagine nel controllo GridView

Riporto l'articolo scritto per il sito iprogrammatori http://www.iprogrammatori.it/articoli/programmazione/art_aspnet-inserire-una-colonna-immagine-in-_713.aspx

Introduzione:

Nel caso che si devono creare delle griglie, con delle colonne che evidenziano tramite immagine lo stato dei dati, o altre indicazioni, tramite la creazione di colonne personalizzate possiamo dotare il controllo gridView di questa particolarità.

Di seguito viene illustrato come creare un controllo GridView, nel quale ci sia una colonna di tipo immagine, che in base al valore di una colonna nascosta, verrà visualizzata una determinata immagine (figura 1) .

Figura 1

Aggiungiamo nel nostro progetto web, un controllo gridView, ed un pulsante. Per il controllo gridview, impostiamo la proprietà autogeneratecolomn a false.

Passiamo in visualizzazione codice html, in questo modo impostiamo le colonne da visualizzare nella griglia.

Qui di seguito si riportano le colonne di cui è composto il controllo gridview.

<Columns>

<asp:BoundField DataField="ValoreStato" ReadOnly="true">

<ItemStyle Font-Size="0pt" Width="0px" Wrap="False" />

<HeaderStyle Font-Size="0pt" Width="0px" Wrap="False" />

<ControlStyle Font-Size="0pt" Width="0px" />

<FooterStyle Font-Size="0pt" Width="0px" Wrap="False" />

asp:BoundField>

<asp:TemplateField>

<HeaderTemplate>

<input ID="chkAll" runat="server"

type="checkbox" />

HeaderTemplate>

<ItemTemplate>

<asp:Panel ID="Panel2" runat="server" Height="16px" Width="20px">

<asp:CheckBox ID="chkSeleziona" runat="server" Text=" " Width="18px" />

asp:Panel>

ItemTemplate>

asp:TemplateField>

<asp:TemplateField HeaderText="Stato">

<HeaderStyle Font-Size="Smaller" Wrap="False" />

<ItemTemplate>

&nbsp;<asp:Image ID="ImgAccettato" runat="server" ImageUrl="~/Img/si.png"

ToolTip="Validato" />

<asp:Image ID="ImgRifiutato" runat="server" ImageUrl="~/Img/no.png"

ToolTip="Rifiutato" />

<asp:Image ID="ImgAttesa" runat="server" ImageUrl="~/Img/attesa.png"

ToolTip="In attesa di validazione" />

ItemTemplate>

<ItemStyle Wrap="False" />

asp:TemplateField>

<asp:BoundField DataField="Nome" HeaderText="Nome" />

<asp:BoundField DataField="Anni" HeaderText="Anni" />

VB.Net

Columns>

Notiamo con attenzione la creazione di queste colonne.

La prima colonna, chiamata ValoreStato di tipo bounField, avrà il compito di contenere il valore di ogni riga relativo allo stato, in questo modo a secondo del valore, verrà visualizzata una determinata immagine.

La seconda colonna di tipo template field, visualizzerà una colonna di tipo checkbox, in questo caso, può essere anche omessa.

La terza colonna, sempre di tipo templateField, avrà il compito di visualizzare l'immagine, in base al valore impostato nella prima colonna.

Come si vede, abbiamo degli oggetti di tipo itemTemplate, nel quale si trovano oggetti image, contenenti l'immagine da visualizzare.

Le ultime due colonne di tipo buondField, sono colonne che visualizzano i dati.

Terminata la personalizzazione del controllo gridView, passiamo in visualizzazione, codice, in particolare, nell'evento load della pagina, in modo che valorizziamo con dei dati, il controllo gridview.

Qui di seguito si riporta un esempio di codice.

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Page.IsPostBack <> True Then

Dim dttDati As New DataTable()

Dim dtcValoreStato As New DataColumn("ValoreStato")

Dim dtcNome As New DataColumn("Nome")

Dim dtcAnni As New DataColumn("Anni")

dttDati.Columns.Add(dtcNome)

dttDati.Columns.Add(dtcAnni)

dttDati.Columns.Add(dtcValoreStato)

Dim dtrRiga As DataRow = dttDati.NewRow()

dtrRiga("ValoreStato") = 0

dtrRiga("Nome") = "Emanuele"

dtrRiga("Anni") = 34

dttDati.Rows.Add(dtrRiga)

dtrRiga = dttDati.NewRow()

dtrRiga("ValoreStato") = 0

dtrRiga("Nome") = "Mario"

dtrRiga("Anni") = 52

dttDati.Rows.Add(dtrRiga)

dtrRiga = dttDati.NewRow()

dtrRiga("ValoreStato") = 0

dtrRiga("Nome") = "Marco"

dtrRiga("Anni") = 14

dttDati.Rows.Add(dtrRiga)

GrvDati.DataSource = dttDati

GrvDati.DataBind()

ViewState("Dati") = dttDati

End If

End Sub

C#

if (!Page.IsPostBack )

{

DataTable dttDati = new DataTable();

DataColumn dtcValoreStato = new DataColumn("ValoreStato");

DataColumn dtcNome = new DataColumn("Nome");

DataColumn dtcAnni = new DataColumn("Anni");

dttDati.Columns.Add(dtcNome);

dttDati.Columns.Add(dtcAnni);

dttDati.Columns.Add(dtcValoreStato);

DataRow dtrRiga = dttDati.NewRow();

dtrRiga["ValoreStato"] = 0;

dtrRiga["Nome"] = "Emanuele";

dtrRiga["Anni"] =34;

dttDati.Rows.Add(dtrRiga);

dtrRiga = dttDati.NewRow();

dtrRiga["ValoreStato"] = 0;

dtrRiga["Nome"] = "Mario";

dtrRiga["Anni"] = 52;

dttDati.Rows.Add(dtrRiga);

dtrRiga = dttDati.NewRow();

dtrRiga["ValoreStato"] = 0;

dtrRiga["Nome"] = "Marco";

dtrRiga["Anni"] = 14;

dttDati.Rows.Add(dtrRiga);

GrvDati.DataSource = dttDati;

GrvDati.DataBind();

ViewState["Dati"] = dttDati;

}

else

{

DataTable dttDati = (DataTable)ViewState["Dati"];

GrvDati.DataSource = dttDati;

GrvDati.DataBind();

}

Quando si creano le varie righe del controllo gridView, dobbiamo impostare l'immagine che dovrà essere visualizzata. Nell'evento RowDataBound, del controllo gridiView, dobbiamo rilevare i vari oggetti image, e renderli visibili o no, a seconda del valore della prima colonna,

Qui di seguito si riporta un esempio di codice.

VB.Net

Protected Sub GrvDati_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GrvDati.RowDataBound

'visualizzo o no le varie immagini

Try

If e.Row.RowType = DataControlRowType.DataRow Then

Dim chkSelect As CheckBox = CType(e.Row.FindControl("chkSeleziona"), CheckBox)

Dim ImgSi As Image = CType(e.Row.FindControl("ImgAccettato"), Image)

Dim ImgNO As Image = CType(e.Row.FindControl("ImgRifiutato"), Image)

Dim ImgAttesa As Image = CType(e.Row.FindControl("ImgAttesa"), Image)

Dim status As Integer = Integer.Parse((e.Row.Cells(0).Text))

If status = 0 Then

ImgSi.Visible = False

ImgNO.Visible = False

ImgAttesa.Visible = True

ElseIf status = 1 Then

ImgSi.Visible = True

ImgNO.Visible = False

ImgAttesa.Visible = False

chkSelect.Checked = True

ElseIf status = 2 Then

ImgSi.Visible = False

ImgNO.Visible = True

ImgAttesa.Visible = False

chkSelect.Checked = True

End If

End If

Catch ex As Exception

Response.Write(ex.Message)

End Try

End Sub

C#

protected void GrvDati_RowDataBound(object sender, GridViewRowEventArgs e)

{

//visualizzo o no le varie immagini

try

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

CheckBox chkSelect = (CheckBox)e.Row.FindControl("chkSeleziona");

Image ImgSi = (Image)e.Row.FindControl("ImgAccettato");

Image ImgNO = (Image)e.Row.FindControl("ImgRifiutato");

Image ImgAttesa = (Image)e.Row.FindControl("ImgAttesa");

int status = int.Parse(e.Row.Cells[0].Text);

if (status == 0)

{

ImgSi.Visible = false;

ImgNO.Visible = false;

ImgAttesa.Visible = true;

}

if (status == 1)

{

ImgSi.Visible = true;

ImgNO.Visible = false;

ImgAttesa.Visible = false;

chkSelect.Checked = true;

}

if (status == 2)

{

ImgSi.Visible = false;

ImgNO.Visible = true;

ImgAttesa.Visible = false;

chkSelect.Checked = true;

}

}

}

catch (Exception ex)

{

Response.Write( ex.Message);

}

}

Terminato ciò, non ci resta che cambiare i valori nella griglia, in modo che vengano visualizzate le varie immagini.

Nell'evento click del pulsante, cambiamo il valore della prima colonna, per ogni riga, in questo modo, ogni riga avrà un determinato valore.

Protected Sub BtnSi_Click(ByVal sender As Object, ByVal e As EventArgs) Handles BtnSi.Click

Dim dttDati As DataTable = CType(ViewState("Dati"), DataTable)

dttDati.Rows(0)("ValoreStato") = 1

dttDati.Rows(1)("ValoreStato") = 2

GrvDati.DataSource = dttDati

GrvDati.DataBind()

End Sub

C#

protected void BtnSi_Click(object sender, EventArgs e)

{

DataTable dttDati = (DataTable)ViewState["Dati"];

dttDati.Rows[0]["ValoreStato"] = 1;

dttDati.Rows[1]["ValoreStato"] = 2;

GrvDati.DataSource = dttDati;

GrvDati.DataBind();

}

Conclusioni

Abbiamo visto una delle tante possibilità di come personalizzare il controllo GridView, in particolare visualizzare una colonna di tipo immagine, che indica visibilmente lo stato della riga a cui fa riferimento.

Tramite la parola download è possibile scaricare il file di progetto utilizzato, sia per il linguaggio Visual Basic Net e sia per C#.

Download