Template con DynamicData

In un precedente articolo abbiamo cominciato a prendere confidenza con le caratteristiche base di ASP.NET Dynamic Data, tecnologia integrata nel Service Pack 1 del .Net Framework 3.5 e deputata alla realizzazione di applicazioni fortemente data-driven.

In questo secondo tutorial ci occuperemo della personalizzazione dei template attraverso cui vengono visualizzati i dati. La base per il nostro esempio sarà l'applicazione sviluppata nell'articolo precedente.

Tipologie di template

In ASP.NET Dynamic Data abbiamo a disposizione tre tipi di template:

• Field Template, si occupano di visualizzare un particolare tipo di dato presente in una tabella, come le date, i valori boolean, il testo e così via. Sono contenuti nella cartella /DynamicData/FieldTemplates sotto forma di User Controls (estensione .ascx) e derivano dalla classe System.Web.DynamicData.FieldTemplateUserControl
• Page Template, sono template generici, contenuti nella cartella /DynamicData/PageTemplates, ed utilizzati dal motore di Dynamic Data per mostrare i dati in assenza di template personalizzati
• Custom Template, contenuti invece nella cartella /DynamicData/CustomPages, sono i template personalizzati, relativi solitamente ad una tabella specifica. Come vedremo permettono di ottenere il massimo grado di personalizzazione nella visualizzazione dei dati

Modificare i Field Template

Cominciamo il tutorial modificando il funzionamento di DateTime.ascx, template che si occupa della visualizzazione dei campi di tipo DateTime. In particolare vogliamo che la data sia formattata nel formato gg/mm/aaaa. Per fare questo sostituiamo il contenuto del controllo con quanto segue:

<%# ((DateTime)FieldValue).ToString("dd/MM/yyyy") %>

Il codice è molto semplice: come già detto i Field Template derivano dalla classe FieldTemplateUserControl che espone, assieme ad altre, la proprietà FieldValue contenente il valore del campo estratto dal database. Il cast a DateTime si rende necessario poiché la proprietà è definita come object.

Eseguiamo l'applicazione e apriamo la tabella Orders. Le date appariranno nel formato desiderato.

Figura 1. Modifica al formato della data

Modifica dei template generici

Passiamo ora ai Page Template. Apriamo List.aspx, contenuto nella cartella /DynamicData/PageTemplates, template che mostra attraverso un controllo GridView la lista dei record contenuti in una tabella, e aggiungiamo sotto il titolo della pagina la scritta: Ciao dal template List.aspx!.

...
<asp:DynamicDataManager ID="DynamicDataManager1" runat="server" AutoLoadForeignKeys="true" />

<h2><%= table.DisplayName%></h2>
<h3 style="color:Red">Ciao dal template List.aspx!</h3>

<asp:ScriptManagerProxy runat="server" ID="ScriptManagerProxy1" />
...

Salviamo, avviamo l'applicazione e selezioniamo la tabella Products dall'elenco. La pagina si presenta ora in questo modo:

Figura 2. Modifica al template

È importante sottolinerare che la modifica appena eseguita è visibile indipendentemente dalla tabella selezionata:

Figura 3. Template applicato a tutte le tabelle

I cambiamenti effettuati sui template generici si riflettono infatti su ogni pagina che li utilizza, e non forniscono la possibilità di mostrare determinati elementi a seconda dell'oggetto selezionato. Se avessimo voluto visualizzare la scritta unicamente per la tabella Products avremmo dovuto definire un template personalizzato.

Aggiungere un template personalizzato

Creiamo una nuova cartella chiamata Products all'interno di /DynamicData/CustomPages e copiamo al suo interno il file List.aspx modificato in precedenza. Con questi due semplici passaggi il nostro template personalizzato è già pronto per essere utilizzato.

ASP.NET, per convenzione, prima di utilizzare il template generico cerca, nella cartella CustomPages, una directory con lo stesso nome della tabella che vogliamo visualizzare e utilizza i file al suo interno per mostrare i dati. Quindi, se clicchiamo su Products, ASP.NET userà automaticamente il template appena creato.

Per osservare questo comportamento, modifichiamo il testo "Ciao dal template List.aspx" in "Ciao dal template personalizzato!".

Figura 4. Caricamento del custom template

Aprendo le altre tabelle ci accorgiamo che il testo visualizzato è sempre quello del template /DynamicData/CustomPages/List.aspx.

DynamicField vs BoundField

Le modifiche fin qui effettuate sono molto semplici e non variano il funzionamento dell'applicazione. Vediamo quindi un esempio di modifica più "sostanziosa", cambiando i campi visualizzati all'interno del GridView.

Aggiungiamo al controllo l'attributo AutoGenerateColumns con valore false per selezionare manualmente i campi da visualizzare e inseriamo all'interno della collection Columns due tag DynamicField con attributo DataField con valore, rispettivamente, ProductID e ProductName:

<asp:GridView ID="GridView1" runat="server" DataSourceID="GridDataSource" AllowPaging="True"
     AllowSorting="True" CssClass="gridview" AutoGenerateColumns="false">
  <Columns>
    <asp:DynamicField DataField="ProductID" />
    <asp:DynamicField DataField="ProductName" />

In questo modo verranno visualizzati soltanto l'id e il nome dei prodotti.

Figura 5. Introduzione del DynamicField nel GridView

Il controllo DynamicField è una novità del framework .Net 3.5 SP 1 e va a sostituire il precedente controllo BoundField.

È importante sottolineare che, aggiungendo un template personalizzato, non va persa la possibilità di utilizzare le funzionalità offerte di default da Dynamic Data e implementate nei template generici. Possiamo infatti continuare ad utilizzare le funzioni di inserimento, modifica e cancellazione dei dati senza dover aggiungere nessuna nuova pagina.