Visualizzare dati in un GridView

Il GridView è un controllo Asp.Net che permette la visualizzazione di dati in formato tabellare. E' l'ideale per visualizzare e gestire le tabelle del database.

Il GridView permette di visualizzare dati provenienti da un DataSource, quindi da un data base o da un file Xml. E' consentito il filtraggio dei dati, l'ordinamento, la paginazione, la modifica/eliminazione/inserimento sia direttamente dal Grid che da un form di dettaglio. E' possibile fare tutto questo in modo dichiarativo scrivendo pochissime o addirittura nessuna riga di codice, ma è anche consentita l'implementazione manuale programmatica. Per adesso mi concentro sul primo metodo. 

Associare un Data Source a un controllo

Per prima cosa bisogna creare e configurare un Data Source. Poi si crea il controllo GridView trascinandolo dalla toolbar di Visual Studio alla pagina aspx. Infine si associa il DataSource al Grid tramite la prorietà DataSourceID o tramite lo smart task menu.

Questa associazione è fattibile anche con altri controlli come ad esempio un menu a tendina.

Configurare un GridView

Le impostazioni del controllo GridView si effettuano visualmente tramite lo Smart Task Menu attivabile dalla modalità Design  facendo clic sulla freccetta in alto a destra del controllo selezionato.
In maniera estremamente intuitiva si possono editare le colonne, ovvero selezionare quali colonne visualizzare e in quale ordine. Per attivare la paginazione e l'ordinamento basta flaggare le apposite checkbox.

Alcune note:

  • Convertire un campo in tipo TemplateField per avere una maggiore flessibilità e creare campi personalizzati
  • Lo stile (es. la larghezza) delle singole colonne si imposta da ItemStyle
  • Se la visualizzazione o le impostazioni in Visual Studio non si aggiornano cliccare su Refresh Schema

Visualizzare i dati

GridView semplice

Visualizza i dati di una tabella di database, renderizzandola in una tabella html:

<!-- Data Source usato dai GridView -->
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Grid_List_DB %>" SelectCommand="SELECT * FROM [Categorie]"></asp:SqlDataSource>

<p><strong>GridView semplice</strong></p>
<p>Visualizza i dati di una tabella di database, renderizzandola in una tabella html:</p>
<asp:GridView ID="GridView_Semplice" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
	DataSourceID="SqlDataSource1">
	<Columns>
		<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
		<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
		<asp:BoundField DataField="Link" HeaderText="Link" SortExpression="Link" />
		<asp:CheckBoxField DataField="Published" HeaderText="Published" SortExpression="Published" />
		<asp:BoundField DataField="Order" HeaderText="Order" SortExpression="Order" />
		<asp:BoundField DataField="Keywords" HeaderText="Keywords" SortExpression="Keywords" />
	</Columns>
</asp:GridView>

GridView con formattazione

  • larghezza colonna ID e colonna Order = 50px
  • formattazione colonne di intestazione
  • campi ID e Order allineati al centro
  • colonna Order spostata in fondo
  • stile righe alterne
<asp:GridView ID="GridView_Formattazione" runat="server" AutoGenerateColumns="False"
	DataKeyNames="ID"
	DataSourceID="SqlDataSource1" GridLines="Horizontal">
	<AlternatingRowStyle BackColor="#FFFFCC" />
	<Columns>
		<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID">	
		<ItemStyle Width="50px" HorizontalAlign="Center" />
		</asp:BoundField>
		<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
		<asp:BoundField DataField="Link" HeaderText="Link" SortExpression="Link" />
		<asp:CheckBoxField DataField="Published" HeaderText="Published" SortExpression="Published" />
		<asp:BoundField DataField="Picture" HeaderText="Picture" SortExpression="Picture" />
		<asp:BoundField DataField="Keywords" HeaderText="Keywords" SortExpression="Keywords" />
		<asp:BoundField DataField="Order" HeaderText="Order" SortExpression="Order" >
		<ItemStyle HorizontalAlign="Center" Width="50px" />
		</asp:BoundField>
	</Columns>
	<HeaderStyle BackColor="#003300" ForeColor="White" />
</asp:GridView>

GridView con ordinamento delle colonne

Impostare AllowSorting="True" - poi via codice togliere SortExpression dai campi in cui non si vuole l'ordinamento.
L'ordinamento in realtà viene fatto dal DataSource

<asp:GridView ID="GridView_Ordinamento" runat="server" AutoGenerateColumns="False" 
		DataKeyNames="ID"
		DataSourceID="SqlDataSource1"
		AllowSorting="True">
	<Columns>
		<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID">
		<ItemStyle Width="50px" HorizontalAlign="Center" />
		</asp:BoundField>
		<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
		<asp:BoundField DataField="Link" HeaderText="Link" />
		<asp:CheckBoxField DataField="Published" HeaderText="Published" SortExpression="Published" />
		<asp:BoundField DataField="Picture" HeaderText="Picture" />
		<asp:BoundField DataField="Keywords" HeaderText="Keywords" SortExpression="Keywords" />
		<asp:BoundField DataField="Order" HeaderText="Order" SortExpression="Order" >
		<ItemStyle HorizontalAlign="Center" Width="50px" />
		</asp:BoundField>
	</Columns>
	<HeaderStyle BackColor="#003300" ForeColor="White" />
</asp:GridView>

GridView con paginazione

Impostare AllowPaging="True" e PageSize="n"
La paginazione avviene a livello di controllo stesso e non di DataSource/DataSet

<asp:GridView ID="GridView_Paginazione_1" runat="server" 
	AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1"
	AllowSorting="True" 
	AllowPaging="True" PageSize="10">
	<Columns>
		<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID">	
		<ItemStyle Width="50px" HorizontalAlign="Center" />
		</asp:BoundField>
		<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
		<asp:BoundField DataField="Link" HeaderText="Link" />
		<asp:CheckBoxField DataField="Published" HeaderText="Published" SortExpression="Published" />
		<asp:BoundField DataField="Picture" HeaderText="Picture" />
		<asp:BoundField DataField="Keywords" HeaderText="Keywords" SortExpression="Keywords" />
		<asp:BoundField DataField="Order" HeaderText="Order" SortExpression="Order" >
		<ItemStyle HorizontalAlign="Center" Width="50px" />
		</asp:BoundField>
	</Columns>
	<HeaderStyle BackColor="#003300" ForeColor="White" />
	<PagerStyle HorizontalAlign="Center" />
</asp:GridView>

Filtrare i dati

Filtro con menu a tendina

In questo esempio si ha una tendina contenente le categorie; selezionando un elemento il GridView si aggiorna mostrando solo gli articoli appartenenti a tale categoria.

  • creare un data source con elenco categorie
  • aggiungere una Drop Down List e assegnarle il data source delle categorie (dove il campo visualizzato è il nome e il valore è l'id)
  • impostare la proprietà AutoPostBack="True" nella drop down list
  • creare un sql data source con gli articoli. Usando il Wizard impostare il campo Where di tipo Controllo e selezionare la drop down list
  • Aggiungere il GridView e associarlo al data source degli articoli
  • usare il parametro EmptyDataTemplate per mostrare un testo nel caso in cui la griglia non abbia nessuna riga di output
<%-- Data Source delle categorie --%>
<asp:SqlDataSource ID="SqlDataSource_Cat" runat="server" 
	ConnectionString="<%$ ConnectionStrings:Grid_List_DB %>"
	SelectCommand="SELECT [ID], [Name] FROM [Categories] ORDER BY [Name]">
</asp:SqlDataSource>

<%-- Data Source degli articoli --%>
<asp:SqlDataSource ID="SqlDataSource_Art" runat="server"
	ConnectionString="<%$ ConnectionStrings:Grid_List_DB %>"
	SelectCommand="SELECT [ID], [Title], [Preview], [Published] FROM [Articles] WHERE ([Cat_ID] = @Cat_ID) ORDER BY [Title]">
	<SelectParameters>
		<asp:ControlParameter ControlID="DropDownList1" DefaultValue="1" Name="Cat_ID" PropertyName="SelectedValue" Type="Int16" />
	</SelectParameters>
</asp:SqlDataSource>

<%-- Menu a tendina --%>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource_Cat" 
	DataTextField="Name" DataValueField="ID" AutoPostBack="True">
</asp:DropDownList>

<%-- Griglia --%>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
	DataKeyNames="ID" DataSourceID="SqlDataSource_Art">
	<EmptyDataTemplate>Nessun record</EmptyDataTemplate>
	<Columns>
		<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
		<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
		<asp:BoundField DataField="Preview" HeaderText="Preview" SortExpression="Preview" />
		<asp:CheckBoxField DataField="Published" HeaderText="Published" SortExpression="Published" />
	</Columns>
</asp:GridView>

Filtro con casella di testo

  • aggiungere una text box e un pulsante
  • creare un data source impostando nel campo Where il controllo Textbox
  • aggiungere un GridView associato al data source
<asp:TextBox ID="txtFiltra" runat="server"></asp:TextBox>

<asp:Button ID="btnFiltra" runat="server" Text="Button" />

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Grid_List_DB %>"
	SelectCommand="SELECT [ID], [Title], [Preview], [Keywords], [Published] FROM [Articles] WHERE ([Title] LIKE '%' + @Title + '%')">
	<SelectParameters>
		<asp:ControlParameter ControlID="txtFiltra" DefaultValue="%" Name="Title" PropertyName="Text" Type="String" />
	</SelectParameters>
</asp:SqlDataSource>

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
	DataKeyNames="ID" DataSourceID="SqlDataSource1">
	<Columns>
		<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
		<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
		<asp:BoundField DataField="Preview" HeaderText="Preview" SortExpression="Preview" />
		<asp:BoundField DataField="Keywords" HeaderText="Keywords" SortExpression="Keywords" />
		<asp:CheckBoxField DataField="Published" HeaderText="Published" SortExpression="Published" />
	</Columns>
</asp:GridView>

Autore: Sergio Roberto Boarina