Uso di TemplateFields nel controllo GridView (C#)

di Scott Mitchell

Scaricare il PDF

Per offrire flessibilità, GridView offre TemplateField, che esegue il rendering usando un modello. Un modello può includere una combinazione di codice HTML statico, controlli Web e sintassi di associazione dati. In questa esercitazione si esaminerà come usare TemplateField per ottenere un maggior grado di personalizzazione con il controllo GridView.

Introduzione

GridView è costituito da un set di campi che indicano quali proprietà di DataSource devono essere incluse nell'output sottoposto a rendering insieme alla modalità di visualizzazione dei dati. Il tipo di campo più semplice è BoundField, che visualizza un valore di dati come testo. Altri tipi di campo visualizzano i dati usando elementi HTML alternativi. CheckBoxField, ad esempio, esegue il rendering come casella di controllo il cui stato selezionato dipende dal valore di un campo dati specificato; ImageField esegue il rendering di un'immagine la cui origine dell'immagine si basa su un campo dati specificato. È possibile eseguire il rendering di collegamenti ipertestuali e pulsanti il cui stato dipende da un valore di campo dati sottostante usando i tipi di campo HyperLinkField e ButtonField.

Sebbene i tipi di campo CheckBoxField, ImageField, HyperLinkField e ButtonField consentano una visualizzazione alternativa dei dati, sono comunque abbastanza limitati rispetto alla formattazione. Un CheckBoxField può visualizzare solo una singola casella di controllo, mentre un ImageField può visualizzare solo una singola immagine. Cosa accade se un campo specifico deve visualizzare testo, una casella di controllo e un'immagine, in base a valori di campo dati diversi? O cosa accade se si desidera visualizzare i dati usando un controllo Web diverso da CheckBox, Image, HyperLink o Button? Inoltre, BoundField limita la visualizzazione a un singolo campo dati. Cosa accade se si desidera visualizzare due o più valori di campo dati in una singola colonna GridView?

Per supportare questo livello di flessibilità, GridView offre TemplateField, che esegue il rendering usando un modello. Un modello può includere una combinazione di codice HTML statico, controlli Web e sintassi di associazione dati. Inoltre, TemplateField include un'ampia gamma di modelli che possono essere usati per personalizzare il rendering per situazioni diverse. Ad esempio, ItemTemplate viene usato per impostazione predefinita per rendere la cella di ogni riga, ma il modello EditItemTemplate può essere usato per personalizzare l'interfaccia durante la modifica dei dati.

In questa esercitazione si esaminerà come usare TemplateField per ottenere un maggior grado di personalizzazione con il controllo GridView. Nell'esercitazione precedente è stato illustrato come personalizzare la formattazione in base ai dati sottostanti usando i DataBound gestori eventi e RowDataBound . Un altro modo per personalizzare la formattazione in base ai dati sottostanti consiste nel chiamare i metodi di formattazione dall'interno di un modello. Questa tecnica verrà esaminata anche in questa esercitazione.

Per questa esercitazione si userà TemplateFields per personalizzare l'aspetto di un elenco di dipendenti. In particolare, verranno elencati tutti i dipendenti, ma verranno visualizzati il nome e il cognome del dipendente in una colonna, la data di assunzione in un controllo Calendario e una colonna di stato che indica il numero di giorni in cui sono stati impiegati nella società.

Figura 1: Vengono usati tre campi modello per personalizzare la visualizzazione (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 1: Associazione dei dati a GridView

Negli scenari di creazione di report in cui è necessario usare TemplateFields per personalizzare l'aspetto, trovo più semplice iniziare creando un controllo GridView che contiene solo BoundFields e quindi per aggiungere nuovi Campi TemplateField o convertire i BoundField esistenti in TemplateFields in base alle esigenze. Di conseguenza, si inizierà questa esercitazione aggiungendo un controllo GridView alla pagina tramite la finestra di progettazione e associandolo a un ObjectDataSource che restituisce l'elenco dei dipendenti. Questi passaggi creeranno un controllo GridView con BoundFields per ognuno dei campi relativi ai dipendenti.

Aprire la GridViewTemplateField.aspx pagina e trascinare gridView dalla casella degli strumenti nella finestra di progettazione. Dallo smart tag gridView scegliere di aggiungere un nuovo controllo ObjectDataSource che richiama il EmployeesBLL metodo della GetEmployees() classe.

Figura 2: Aggiungere un nuovo controllo ObjectDataSource che richiama il metodo (GetEmployees() a dimensione intera)

L'associazione di GridView in questo modo aggiungerà automaticamente un BoundField per ognuna delle proprietà dei dipendenti: EmployeeID, LastName, FirstName, Title, HireDate, ReportsTo e Country. Per questo report non preoccupiamoci di visualizzare le EmployeeID, ReportsTo o Country. Per rimuovere questi BoundFields, è possibile:

• Utilizzare la finestra di dialogo Campi e fare clic sul collegamento Modifica colonne dallo smart tag di GridView per aprire questa finestra di dialogo. Selezionare quindi BoundFields nell'elenco in basso a sinistra e fare clic sul pulsante X rosso per rimuovere BoundField.
• Modificare la sintassi dichiarativa di GridView a mano dalla visualizzazione Origine, eliminare l'elemento <asp:BoundField> per BoundField che si desidera rimuovere.

Dopo aver rimosso EmployeeID, ReportsToe Country BoundFields, il markup di GridView dovrebbe essere simile al seguente:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
            SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
            SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
            SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Dedicare qualche istante alla visualizzazione dello stato di avanzamento in un browser. A questo punto dovrebbe essere visualizzata una tabella con un record per ogni dipendente e quattro colonne: una per il cognome del dipendente, una per il nome, una per il titolo e una per la data di assunzione.

Figura 3: I LastNamecampi , FirstName, Titlee HireDate vengono visualizzati per ogni dipendente (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 2: Visualizzazione del nome e del cognome in una singola colonna

Attualmente, i nomi e i cognome di ogni dipendente vengono visualizzati in una colonna separata. Potrebbe essere bello combinarli in una singola colonna. A tale scopo, è necessario usare un oggetto TemplateField. È possibile aggiungere un nuovo oggetto TemplateField, aggiungerlo alla sintassi necessaria per il markup e il databinding e quindi eliminare FirstName e LastName BoundFields oppure convertire FirstName BoundField in un oggetto TemplateField, modificare TemplateField per includere il LastName valore e quindi rimuovere BoundField LastName .

Entrambi gli approcci hanno lo stesso risultato, ma personalmente mi piace convertire i BoundField in TemplateField, quando possibile, perché la conversione aggiunge automaticamente un ItemTemplate con controlli Web e EditItemTemplate con sintassi di associazione dati per imitare l'aspetto e la funzionalità dei BoundField. Il vantaggio è che sarà necessario eseguire meno operazioni con TemplateField perché il processo di conversione avrà eseguito alcune delle operazioni per noi.

Per convertire un oggetto BoundField esistente in un oggetto TemplateField, fare clic sul collegamento Modifica colonne dallo smart tag gridView, visualizzando la finestra di dialogo Campi. Selezionare BoundField da convertire dall'elenco nell'angolo inferiore sinistro e quindi fare clic sul collegamento "Converti questo campo in un campo Modello" nell'angolo inferiore destro.

Figura 4: Convertire un oggetto BoundField in un campo modello dalla finestra di dialogo Campi (fare clic per visualizzare l'immagine a dimensione intera)

Procedi e converti il BoundField FirstName in un TemplateField. Dopo questa modifica non c'è alcuna differenza percettiva nel Designer. Ciò è dovuto al fatto che la conversione di BoundField in un oggetto TemplateField crea un oggetto TemplateField che mantiene l'aspetto di BoundField. Nonostante non esistano differenze visive a questo punto nella finestra di progettazione, questo processo di conversione ha sostituito la sintassi <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> dichiarativa di BoundField, con la sintassi TemplateField seguente:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Come si può notare, TemplateField è costituito da due modelli: un ItemTemplate che contiene un'etichetta la cui proprietà Text è impostata sul valore del campo dati FirstName, e un EditItemTemplate che contiene un controllo TextBox la cui proprietà Text è impostata anch'essa sul campo dati FirstName. La sintassi di associazione dati - <%# Bind("fieldName") %> indica che il campo fieldName dati è associato alla proprietà del controllo Web specificata.

Per aggiungere il valore del LastName campo dati a questo oggetto TemplateField, è necessario aggiungere un altro controllo Web Label in ItemTemplate e associarne la Text proprietà a LastName. Questa operazione può essere eseguita a mano o tramite il Designer. Per farlo manualmente, basta aggiungere la sintassi dichiarativa appropriata a ItemTemplate:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Per aggiungerlo tramite la finestra di progettazione, fare clic sul collegamento Modifica modelli dallo smart tag gridView. Verrà visualizzata l'interfaccia di modifica del modello di GridView. In questo smart tag dell'interfaccia è riportato un elenco dei modelli in GridView. Poiché a questo punto è presente un solo TemplateField, gli unici modelli elencati nel menu a discesa sono quelli per il TemplateField FirstName, insieme ai template EmptyDataTemplate e PagerTemplate. Il EmptyDataTemplate modello, se specificato, viene usato per eseguire il rendering dell'output di GridView se non sono presenti risultati nei dati associati a GridView; il PagerTemplate, se specificato, viene usato per eseguire il rendering dell'interfaccia di paging per un controllo GridView che supporta il paging.

Figura 5: I modelli di GridView possono essere modificati tramite la finestra di progettazione (fare clic per visualizzare l'immagine a dimensione intera)

Per visualizzare anche LastName nel FirstName TemplateField, trascinare il controllo Etichetta dalla casella degli strumenti nel TemplateField FirstName nell'interfaccia di modifica del modello GridView.

Figura 6: Aggiungere un controllo Web etichetta al ItemTemplate di TemplateField (FirstName a dimensione intera)

A questo punto, il controllo Web Etichetta aggiunto al TemplateField ha la proprietà Text impostata su "Label". È necessario modificare questa proprietà in modo che questa proprietà sia associata al valore del LastName campo dati. A tale scopo, fare clic sullo smart tag del controllo etichetta e scegliere l'opzione Modifica associazioni dati.

Figura 7: Scegliere l'opzione Modifica dataBindings dallo smart tag dell'etichetta (fare clic per visualizzare l'immagine a dimensione intera)

Verrà visualizzata la finestra di dialogo DataBindings. Da qui è possibile selezionare la proprietà a cui partecipare all'associazione dati dall'elenco a sinistra e scegliere il campo a cui associare i dati dall'elenco a discesa a destra. Scegliere la Text proprietà a sinistra e il LastName campo a destra e fare clic su OK.

Figura 8: Associare la Text proprietà al LastName campo dati (fare clic per visualizzare l'immagine a dimensione intera)

Annotazioni

La finestra di dialogo DataBindings consente di indicare se eseguire l'associazione dati bidirezionale. Se si lascia deselezionata questa opzione, verrà usata la sintassi <%# Eval("LastName")%> di associazione dati anziché <%# Bind("LastName")%>. Entrambi gli approcci sono adatti a questa esercitazione. Il databinding bidirezionale diventa importante durante l'inserimento e la modifica dei dati. Per visualizzare semplicemente i dati, tuttavia, entrambi gli approcci funzioneranno altrettanto bene. Discuteremo in dettaglio l'associazione dati bidirezionale nelle esercitazioni future.

Dedicare un attimo alla visualizzazione di questa pagina tramite un browser. Come si può notare, GridView include ancora quattro colonne; tuttavia, la FirstName colonna ora elenca entrambi i valori dei campi dati FirstName e LastName.

Figura 9: Entrambi i FirstName valori e LastName sono visualizzati in una singola colonna (fare clic per visualizzare l'immagine a dimensione intera)

Per completare questo primo passaggio, rimuovere BoundField LastName e rinominare la FirstName proprietà TemplateField HeaderText in "Name". Dopo aver modificato il markup dichiarativo di GridView, dovrebbe essere simile al seguente:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
            SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Figura 10: il nome e il cognome di ogni dipendente vengono visualizzati in una colonna (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 3: Utilizzo del controllo Calendario per visualizzare ilHiredDatecampo

La visualizzazione di un campo dati come testo in un controllo GridView è semplice come utilizzare un BoundField. Per alcuni scenari, tuttavia, i dati sono espressi meglio usando un particolare controllo Web anziché solo testo. Tale personalizzazione della visualizzazione dei dati è possibile con TemplateFields. Ad esempio, anziché visualizzare la data di assunzione del dipendente come testo, è possibile visualizzare un calendario (usando il controllo Calendario) con la data di assunzione evidenziata.

A tale scopo, iniziare convertendo BoundField HiredDate in un oggetto TemplateField. È sufficiente passare allo smart tag di GridView e fare clic sul collegamento Modifica colonne, visualizzando la finestra di dialogo Campi. Selezionare BoundField HiredDate e fare clic su "Converti questo campo in un campo modello".

Figura 11: Convertire boundfield HiredDate in un campo modello (fare clic per visualizzare l'immagine a dimensione intera)

Come illustrato nel passaggio 2, questo sostituirà BoundField con un TemplateField che contiene un ItemTemplate e un EditItemTemplate con un oggetto Label e TextBox le cui Text proprietà sono vincolate al HiredDate valore usando la sintassi databinding <%# Bind("HiredDate")%>.

Per sostituire il testo con un controllo Calendario, modificare il modello rimuovendo l'etichetta e aggiungendo un controllo Calendario. Dal Designer, selezionare Modifica template dallo smart tag di GridView e scegliere il TemplateField HireDate dall'elenco a discesa ItemTemplate. Eliminare quindi il controllo Etichetta e trascinare un controllo Calendario dalla casella degli strumenti nell'interfaccia di modifica del modello.

Figura 12: Aggiungere un controllo calendario a TemplateField HireDate (ItemTemplate a dimensione intera)

A questo punto ogni riga di GridView conterrà un controllo Calendario nel relativo HiredDate campo TemplateField. Tuttavia, il valore effettivo HiredDate del dipendente non viene impostato in nessun punto del controllo Calendario, causando che ogni controllo Calendario visualizzi per impostazione predefinita il mese e la data correnti. Per risolvere questo problema, è necessario assegnare ogni dipendente HiredDate alle proprietà SelectedDate e VisibleDate del controllo Calendario.

Dallo smart tag del controllo Calendario scegliere Modifica DataBindings. Associare quindi entrambe le proprietà SelectedDate e VisibleDate al campo dati HiredDate.

Figura 13: Associare le SelectedDate proprietà e VisibleDate al HiredDate campo dati (fare clic per visualizzare l'immagine a dimensione intera)

Annotazioni

La data selezionata del controllo Calendario non deve necessariamente essere visibile. Ad esempio, un calendario può avere^{il 1°} agosto 1999 come data selezionata, ma mostra il mese e l'anno correnti. La data selezionata e la data visibile sono specificate dalle proprietà SelectedDate e VisibleDate del controllo Calendar. Poiché vogliamo sia selezionare il dipendente HiredDate sia assicurarci che venga mostrato, è necessario associare entrambe queste proprietà al campo dati HireDate.

Quando si visualizza la pagina in un browser, il calendario visualizza ora il mese della data di assunzione del dipendente e seleziona tale data specifica.

Figura 14: Il dipendente HiredDate è visualizzato nel controllo Calendario (fare clic per visualizzare l'immagine a dimensione intera)

Annotazioni

Contrariamente a tutti gli esempi finora illustrati, in questo tutorial non abbiamo impostato la proprietà EnableViewState su false per questo GridView. Il motivo di questa decisione è dovuto al fatto che facendo clic sulle date del controllo Calendario viene generato un postback, impostando la data selezionata del Calendario sulla data appena selezionata. Se lo stato di visualizzazione di GridView è disabilitato, tuttavia, a ogni postback i dati di GridView vengono ricollegati all'origine dati sottostante, il che provoca che la data selezionata del Calendario venga reimpostata sulla data del HireDatedipendente, sovrascrivendo la data scelta dall'utente.

Per questa esercitazione è una discussione inutile poiché l'utente non è in grado di aggiornare il HireDate del dipendente. Probabilmente sarebbe preferibile configurare il controllo Calendario in modo che le relative date non siano selezionabili. Indipendentemente da ciò, questo tutorial mostra che in alcune circostanze è necessario abilitare lo stato di visualizzazione per fornire determinate funzionalità.

Passaggio 4: Visualizzazione del numero di giorni in cui il dipendente ha lavorato per l'azienda

Finora abbiamo visto due applicazioni di TemplateFields:

• Combinazione di due o più valori di campo dati in una colonna e
• Espressione di un valore di campo dati tramite un controllo Web anziché testo

Un terzo uso di TemplateFields consiste nella visualizzazione dei metadati relativi ai dati sottostanti di GridView. Oltre a visualizzare le date di assunzione dei dipendenti, ad esempio, potrebbe essere necessario avere anche una colonna che visualizza il numero totale di giorni in cui sono stati sul lavoro.

Un altro uso di TemplateFields si verifica in scenari in cui i dati sottostanti devono essere visualizzati in modo diverso nel report della pagina Web rispetto al formato archiviato nel database. Si supponga che la Employees tabella avesse un Gender campo che archiviava il carattere M o F per indicare il sesso del dipendente. Quando si visualizzano queste informazioni in una pagina Web, è possibile che si voglia mostrare il sesso come "Maschio" o "Femmina", anziché semplicemente "M" o "F".

Entrambi questi scenari possono essere gestiti creando un metodo di formattazione nella classe code-behind della pagina ASP.NET (o in una libreria di classi separata, implementata come static metodo) richiamata dal modello. Tale metodo di formattazione viene richiamato dal modello usando la stessa sintassi di associazione dati illustrata in precedenza. Il metodo di formattazione può accettare un numero qualsiasi di parametri, ma deve restituire una stringa. Questa stringa restituita è il codice HTML inserito nel modello.

Per illustrare questo concetto, verrà ora ampliata l'esercitazione per visualizzare una colonna che elenca il numero totale di giorni in cui un dipendente è stato sul lavoro. Questo metodo di formattazione richiederà un Northwind.EmployeesRow oggetto e restituirà il numero di giorni in cui il dipendente è stato utilizzato come stringa. Questo metodo può essere aggiunto alla classe code-behind della pagina ASP.NET, ma deve essere contrassegnato come protected o public per essere accessibile dal modello.

protected string DisplayDaysOnJob(Northwind.EmployeesRow employee)
{
    // Make sure HiredDate is not null... if so, return "Unknown"
    if (employee.IsHireDateNull())
        return "Unknown";
    else
    {
        // Returns the number of days between the current
        // date/time and HireDate
        TimeSpan ts = DateTime.Now.Subtract(employee.HireDate);
        return ts.Days.ToString("#,##0");
    }
}

Poiché il HiredDate campo può contenere NULL valori di database, è necessario assicurarsi che il valore non NULL sia prima di procedere con il calcolo. Se il HiredDate valore è NULL, viene semplicemente restituita la stringa "Unknown"; se non NULLè , viene calcolata la differenza tra l'ora corrente e il HiredDate valore e viene restituito il numero di giorni.

Per utilizzare questo metodo, è necessario richiamarlo da un oggetto TemplateField in GridView usando la sintassi di associazione dati. Per iniziare, aggiungere un nuovo oggetto TemplateField a GridView facendo clic sul collegamento Modifica colonne nello smart tag gridView e aggiungendo un nuovo oggetto TemplateField.

Figura 15: Aggiungere un nuovo campo modello a GridView (fare clic per visualizzare l'immagine a dimensione intera)

Imposta la proprietà HeaderText di questo nuovo TemplateField su "Days on the Job" e imposta la proprietà ItemStyle di HorizontalAlign su Center. Per chiamare il metodo DisplayDaysOnJob dal template, aggiungere un ItemTemplate e utilizzare la seguente sintassi di associazione dati:

<%# DisplayDaysOnJob((Northwind.EmployeesRow)
     ((System.Data.DataRowView) Container.DataItem).Row) %>

Container.DataItem restituisce un DataRowView oggetto corrispondente al DataSource record associato all'oggetto GridViewRow. La proprietà Row restituisce l'oggetto fortemente tipizzato Northwind.EmployeesRow, che viene passato al metodo DisplayDaysOnJob. Questa sintassi di associazione dati può essere visualizzata direttamente in ItemTemplate (come illustrato nella sintassi dichiarativa seguente) o può essere assegnata alla Text proprietà di un controllo Web Label.

Annotazioni

In alternativa, invece di passare l'istanza EmployeesRow, è possibile passare semplicemente il valore HireDate usando <%# DisplayDaysOnJob(Eval("HireDate")) %>. Tuttavia, il metodo Eval restituisce un object, pertanto è necessario modificare la firma del metodo DisplayDaysOnJob in modo da accettare invece un parametro di input di tipo object. Non possiamo convertire ciecamente la chiamata Eval("HireDate") a un DateTime perché la colonna HireDate nella tabella Employees può contenere valori NULL. Pertanto, dovremmo accettare un object come parametro di input per il metodo DisplayDaysOnJob, verificare se ha un valore nel database NULL (che può essere controllato usando Convert.IsDBNull(objectToCheck)) e quindi procedere di conseguenza.

A causa di queste sottigliezze, ho scelto di passare l'intera EmployeesRow istanza. Nell'esercitazione successiva verrà illustrato un esempio più appropriato per l'uso della Eval("columnName") sintassi per passare un parametro di input in un metodo di formattazione.

Di seguito viene illustrata la sintassi dichiarativa per GridView dopo l'aggiunta di TemplateField e il DisplayDaysOnJob metodo chiamato da ItemTemplate:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate"
            SortExpression="HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
            </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob((Northwind.EmployeesRow)
                    ((System.Data.DataRowView) Container.DataItem).Row) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

La figura 16 mostra l'esercitazione completata, quando visualizzata tramite un browser.

Il numero di giorni in cui il dipendente è stato al lavoro viene visualizzato.

Figura 16: Il numero di giorni in cui il dipendente è stato sul processo viene visualizzato (fare clic per visualizzare l'immagine a dimensione intera)

Riassunto

Il campo Template nel controllo GridView consente un livello di flessibilità superiore nella visualizzazione dei dati rispetto a quello disponibile con gli altri controlli campo. TemplateFields è ideale per situazioni in cui:

• È necessario visualizzare più campi dati in una colonna GridView
• I dati sono espressi in modo ottimale usando un controllo Web anziché testo normale
• L'output dipende dai dati sottostanti, ad esempio la visualizzazione di metadati o la riformattazione dei dati

Oltre a personalizzare la visualizzazione dei dati, TemplateFields viene usato anche per personalizzare le interfacce utente usate per la modifica e l'inserimento dei dati, come si vedrà nelle esercitazioni future.

Le due esercitazioni successive continuano a esplorare i modelli, iniziando dall'uso dei campi modello in un controllo DetailsView. Successivamente, si tornerà a FormView, che usa i modelli al posto dei campi per offrire maggiore flessibilità nel layout e nella struttura dei dati.

Buon programmatori!

Informazioni sull'autore

Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, ha lavorato con le tecnologie Web Microsoft dal 1998. Scott lavora come consulente indipendente, formatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2.0 in 24 ore. Può essere raggiunto a mitchell@4GuysFromRolla.com.

Grazie speciale a

Questa serie di esercitazioni è stata esaminata da molti revisori competenti. Il revisore principale per questo tutorial era Dan Jagers. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, mandami un messaggio a mitchell@4GuysFromRolla.com.

PrecedenteAvanti