Visualizzazione di dati con i controlli DataList e Repeater (VB)
Nelle esercitazioni precedenti è stato usato il controllo GridView per visualizzare i dati. A partire da questa esercitazione, viene illustrato come creare modelli di creazione di report comuni con i controlli DataList e Repeater, a partire dalle nozioni di base per la visualizzazione dei dati con questi controlli.
Introduzione
In tutti gli esempi negli ultimi 28 esercitazioni, se è necessario visualizzare più record da un'origine dati, è stato attivato il controllo GridView. GridView esegue il rendering di una riga per ogni record nell'origine dati, visualizzando i campi dati dei record nelle colonne. Mentre GridView lo rende uno snap per visualizzare, passare, ordinare, modificare ed eliminare i dati, l'aspetto è una casella di bit. Inoltre, il markup responsabile della struttura di GridView è fisso include un CODICE HTML <table> con una riga di tabella () per ogni record e una cella di tabella (<tr><td>) per ogni campo.
Per offrire un maggiore grado di personalizzazione nell'aspetto e nel rendering del markup durante la visualizzazione di più record, ASP.NET 2.0 offre i controlli DataList e Repeater (entrambi disponibili ASP.NET anche nella versione 1.x). I controlli DataList e Repeater eseguono il rendering del contenuto usando modelli anziché BoundFields, CheckBoxFields, ButtonFields e così via. Analogamente a GridView, DataList esegue il rendering come html <table>, ma consente la visualizzazione di più record di origine dati per ogni riga di tabella. Il ripetitore, d'altra parte, non esegue il rendering di markup aggiuntivo rispetto a quello specificato in modo esplicito ed è un candidato ideale quando è necessario un controllo preciso sul markup generato.
Oltre la dozzina di esercitazioni successive, si esaminerà la creazione di modelli di creazione di report comuni con i controlli DataList e Repeater, a partire dalle nozioni di base per la visualizzazione dei dati con questi modelli di controlli. Verrà illustrato come formattare questi controlli, come modificare il layout dei record di origine dati negli scenari dataList, master/dettagli comuni, modi per modificare ed eliminare i dati, come paginare i record e così via.
Passaggio 1: Aggiunta delle pagine Web dell'esercitazione DataList e Repeater
Prima di iniziare questa esercitazione, è prima necessario aggiungere le pagine ASP.NET necessarie per questa esercitazione e le esercitazioni successive che gestiscono la visualizzazione dei dati usando DataList e Repeater. Iniziare creando una nuova cartella nel progetto denominato DataListRepeaterBasics. Aggiungere quindi le cinque pagine seguenti ASP.NET a questa cartella, con tutte le pagine configurate per l'uso della pagina Site.mastermaster :
Default.aspxBasics.aspxFormatting.aspxRepeatColumnAndDirection.aspxNestedControls.aspx
Figura 1: Creare una DataListRepeaterBasics cartella e aggiungere le pagine di esercitazione ASP.NET
Aprire la Default.aspx pagina e trascinare il SectionLevelTutorialListing.ascx controllo utente dalla cartella nell'area UserControls Progettazione. Questo controllo utente, creato nell'esercitazione Pagine master e navigazione sito , enumera la mappa del sito e visualizza le esercitazioni dalla sezione corrente in un elenco puntato.
Figura 2: Aggiungere il controllo utente a Default.aspx (Fare clic per visualizzare l'immagineSectionLevelTutorialListing.ascx full-size)
Per visualizzare l'elenco puntato, verranno visualizzate le esercitazioni DataList e Repeater che verranno create, è necessario aggiungerle alla mappa del sito. Aprire il file e aggiungere il markup seguente dopo l'aggiunta del Web.sitemap markup del nodo mappa del sito pulsanti personalizzati:
<siteMapNode
title="Displaying Data with the DataList and Repeater"
description="Samples of Reports that Use the DataList and Repeater Controls"
url="~/DataListRepeaterBasics/Default.aspx" >
<siteMapNode
title="Basic Examples"
description="Examines the basics for displaying data using the
DataList and Repeater controls."
url="~/DataListRepeaterBasics/Basics.aspx" />
<siteMapNode
title="Formatting"
description="Learn how to format the DataList and the Web controls within
the DataList and Repeater's templates."
url="~/DataListRepeaterBasics/Formatting.aspx" />
<siteMapNode
title="Adjusting the DataList s Layout"
description="Illustrates how to alter the DataList's layout, showing
multiple data source records per table row."
url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
<siteMapNode
title="Nesting a Repeater within a DataList"
description="Learn how to nest a Repeater within the template of a DataList."
url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>
Figura 3: Aggiornare la mappa del sito per includere le nuove pagine ASP.NET
Passaggio 2: Visualizzazione delle informazioni sul prodotto con DataList
Analogamente a FormView, l'output di rendering del controllo DataList dipende da modelli anziché BoundFields, CheckBoxFields e così via. A differenza di FormView, DataList è progettato per visualizzare un set di record anziché uno solitario. Iniziare questa esercitazione con un'analisi dell'associazione delle informazioni sul prodotto a un oggetto DataList. Iniziare aprendo la Basics.aspx pagina nella DataListRepeaterBasics cartella. Trascinare quindi un oggetto DataList dalla casella degli strumenti nella Designer. Come illustrato nella figura 4, prima di specificare i modelli di DataList, il Designer lo visualizza come casella di grigio.
Figura 4: Trascinare l'elenco dati dalla casella degli strumenti nella Designer (fare clic per visualizzare l'immagine full-size)
Dallo smart tag di DataList aggiungere un nuovo OggettoDataSource e configurarlo per usare il ProductsBLL metodo della GetProducts classe. Poiché si sta creando un oggetto DataList di sola lettura in questa esercitazione, impostare l'elenco a discesa su (Nessuno) nelle schede INSERT, UPDATE ed DELETE della procedura guidata.
Figura 5: Opt to Create a New ObjectDataSource (Fare clic per visualizzare l'immagine full-size)
Figura 6: Configurare ObjectDataSource per usare la classe (fare clic per visualizzare l'immagineProductsBLL full-size)
Figura 7: Recuperare informazioni su tutti i prodotti usando il metodo (fare clic per visualizzare l'immagineGetProducts full-size)
Dopo aver configurato ObjectDataSource e associarlo a DataList tramite il relativo smart tag, Visual Studio creerà automaticamente un ItemTemplate oggetto in DataList che visualizza il nome e il valore di ogni campo dati restituito dall'origine dati (vedere il markup seguente). L'aspetto predefinito ItemTemplate è identico a quello dei modelli creati automaticamente quando si associa un'origine dati a FormView tramite il Designer.
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<ItemTemplate>
ProductID: <asp:Label ID="ProductIDLabel" runat="server"
Text='<%# Eval("ProductID") %>' /><br />
ProductName: <asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>' /><br />
SupplierID: <asp:Label ID="SupplierIDLabel" runat="server"
Text='<%# Eval("SupplierID") %>' /><br />
CategoryID: <asp:Label ID="CategoryIDLabel" runat="server"
Text='<%# Eval("CategoryID") %>'/><br />
QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
Text='<%# Eval("QuantityPerUnit") %>' /><br />
UnitPrice: <asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice") %>' /><br />
UnitsInStock: <asp:Label ID="UnitsInStockLabel" runat="server"
Text='<%# Eval("UnitsInStock") %>' /><br />
UnitsOnOrder: <asp:Label ID="UnitsOnOrderLabel" runat="server"
Text='<%# Eval("UnitsOnOrder") %>' /><br />
ReorderLevel: <asp:Label ID="ReorderLevelLabel" runat="server"
Text='<%# Eval("ReorderLevel") %>' /><br />
Discontinued: <asp:Label ID="DiscontinuedLabel" runat="server"
Text='<%# Eval("Discontinued") %>' /><br />
CategoryName: <asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Eval("CategoryName") %>' /><br />
SupplierName: <asp:Label ID="SupplierNameLabel" runat="server"
Text='<%# Eval("SupplierName") %>' /><br />
<br />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>
Nota
Tenere presente che quando si associa un'origine dati a un controllo FormView tramite lo smart tag di FormView, Visual Studio ha creato un ItemTemplateoggetto , InsertItemTemplatee EditItemTemplate. Con DataList, tuttavia, viene creato solo un oggetto ItemTemplate . Questo è dovuto al fatto che DataList non dispone dello stesso supporto predefinito di modifica e inserimento offerto da FormView. DataList contiene eventi correlati alla modifica e all'eliminazione e la modifica e l'eliminazione del supporto possono essere aggiunti con un bit di codice, ma non è disponibile un semplice supporto out-of-the-box come con FormView. Verrà illustrato come includere la modifica e l'eliminazione del supporto con DataList in un'esercitazione futura.
Per migliorare l'aspetto di questo modello, è necessario prendere un momento. Anziché visualizzare tutti i campi dati, consente di visualizzare solo il nome del prodotto, il fornitore, la categoria, la quantità per unità e il prezzo unitario. Inoltre, consente di visualizzare il nome in un'intestazione <h4> e di definire i campi rimanenti usando un'intestazione <table> sotto l'intestazione.
Per apportare queste modifiche, è possibile usare le funzionalità di modifica del modello nella Designer dal smart tag di DataList fare clic sul collegamento Modifica modelli oppure modificare manualmente il modello tramite la sintassi dichiarativa della pagina. Se si usa l'opzione Modifica modelli nella Designer, il markup risultante potrebbe non corrispondere esattamente al markup seguente, ma quando visualizzato tramite un browser dovrebbe essere molto simile alla schermata visualizzata nella figura 8.
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<ItemTemplate>
<h4><asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>' /></h4>
<table border="0">
<tr>
<td class="ProductPropertyLabel">Category:</td>
<td><asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Eval("CategoryName") %>' /></td>
<td class="ProductPropertyLabel">Supplier:</td>
<td><asp:Label ID="SupplierNameLabel" runat="server"
Text='<%# Eval("SupplierName") %>' /></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Qty/Unit:</td>
<td><asp:Label ID="QuantityPerUnitLabel" runat="server"
Text='<%# Eval("QuantityPerUnit") %>' /></td>
<td class="ProductPropertyLabel">Price:</td>
<td><asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Nota
L'esempio precedente usa i controlli Web Label la cui Text proprietà viene assegnata al valore della sintassi di associazione dati. In alternativa, è possibile omettere completamente le etichette, digitando solo la sintassi di associazione dei dati. Invece di usare <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> potrebbe essere invece possibile usare la sintassi <%# Eval("CategoryName") %>dichiarativa .
Lasciando i controlli Web etichetta, tuttavia, offrono due vantaggi. In primo luogo, fornisce un mezzo più semplice per la formattazione dei dati in base ai dati, come verrà visualizzato nell'esercitazione successiva. In secondo luogo, l'opzione Modifica modelli nella Designer non visualizza la sintassi di associazione dati dichiarativa visualizzata all'esterno di un controllo Web. L'interfaccia Modifica modelli è invece progettata per facilitare l'uso di markup statico e controlli Web e presuppone che qualsiasi associazione di dati venga eseguita tramite la finestra di dialogo Modifica dataBinding, accessibile dai controlli Web smart tag.
Pertanto, quando si lavora con DataList, che consente di modificare i modelli tramite la Designer, si preferisce usare i controlli Web etichetta in modo che il contenuto sia accessibile tramite l'interfaccia Modifica modelli. Come si vedrà a breve, il ripetitore richiede che il contenuto del modello venga modificato dalla visualizzazione Origine. Di conseguenza, quando si creano i modelli di Ripetitore viene spesso omesso i controlli Web etichetta, a meno che non sia necessario formattare l'aspetto del testo associato ai dati in base alla logica programmatica.
Figura 8: ogni output del prodotto viene eseguito il rendering usando l'elenco dati ItemTemplate (fare clic per visualizzare l'immagine full-size)
Passaggio 3: Miglioramento dell'aspetto dell'elenco dati
Analogamente a GridView, DataList offre numerose proprietà correlate allo stile, ad esempio FontItemStyleSelectedItemStyleForeColorBackColorCssClassAlternatingItemStyle, e così via. Quando si utilizzano i controlli GridView e DetailsView, sono stati creati file Skin nel DataWebControls tema che hanno definito le proprietà per questi due controlli e la CssClassCssClass proprietà per diverse delle relative sotto proprietà (RowStyle, HeaderStylee così via). Eseguire la stessa operazione per DataList.
Come illustrato nell'esercitazione Visualizzazione dati con ObjectDataSource , un file Skin specifica le proprietà predefinite correlate all'aspetto per un controllo Web; un tema è una raccolta di file Skin, CSS, image e JavaScript che definiscono un aspetto specifico per un sito Web. Nell'esercitazione Visualizzazione dati con ObjectDataSource è stato creato un DataWebControls tema (che viene implementato come cartella all'interno della App_Themes cartella) con attualmente due file Skin e GridView.skinDetailsView.skin. Aggiungere un terzo file Skin per specificare le impostazioni di stile predefinite per DataList.
Per aggiungere un file Skin, fare clic con il pulsante destro del mouse sulla App_Themes/DataWebControls cartella, scegliere Aggiungi un nuovo elemento e selezionare l'opzione File skin dall'elenco. Assegnare al file il nome DataList.skin.
Figura 9: Creare un nuovo file skin denominato DataList.skin (fare clic per visualizzare l'immagine full-size)
Usare il markup seguente per il DataList.skin file:
<asp:DataList runat="server" CssClass="DataWebControlStyle">
<AlternatingItemStyle CssClass="AlternatingRowStyle" />
<ItemStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<FooterStyle CssClass="FooterStyle" />
<SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>
Queste impostazioni assegnano le stesse classi CSS alle proprietà DataList appropriate usate con i controlli GridView e DetailsView. Le classi CSS usate qui DataWebControlStyle, , AlternatingRowStyleRowStylee così via sono definite nel Styles.css file e sono state aggiunte nelle esercitazioni precedenti.
Con l'aggiunta di questo file Skin, l'aspetto di DataList viene aggiornato nella Designer (potrebbe essere necessario aggiornare la visualizzazione Designer per visualizzare gli effetti del nuovo file Skin; dal menu Visualizza scegliere Aggiorna). Come illustrato nella figura 10, ogni prodotto alternato ha un colore di sfondo rosa chiaro.
Figura 10: Creare un nuovo file skin denominato DataList.skin (fare clic per visualizzare l'immagine a dimensioni complete)
Passaggio 4: Esplorazione degli altri modelli di DataList
Oltre a ItemTemplate, DataList supporta sei altri modelli facoltativi:
HeaderTemplatese specificato, aggiunge una riga di intestazione all'output e viene usata per eseguire il rendering di questa rigaAlternatingItemTemplateusato per eseguire il rendering di elementi alternativiSelectedItemTemplateusato per eseguire il rendering dell'elemento selezionato; l'elemento selezionato è l'elemento il cui indice corrisponde alla proprietà DataList sSelectedIndexEditItemTemplateusato per eseguire il rendering dell'elemento da modificareSeparatorTemplatese specificato, aggiunge un separatore tra ogni elemento e viene usato per eseguire il rendering di questo separatoreFooterTemplate- se specificato, aggiunge una riga piè di pagina all'output e viene usata per eseguire il rendering di questa riga
Quando si specifica l'oggetto HeaderTemplate o FooterTemplate, DataList aggiunge una riga di intestazione o piè di pagina aggiuntiva all'output di cui è stato eseguito il rendering. Analogamente alle righe di intestazione e piè di pagina di GridView, l'intestazione e il piè di pagina in un oggetto DataList non sono associati ai dati. Pertanto, qualsiasi sintassi databinding nell'oggetto HeaderTemplate o FooterTemplate che tenta di accedere ai dati associati restituirà una stringa vuota.
Nota
Come illustrato nell'esercitazione Visualizza informazioni di riepilogo nell'esercitazione Piè di pagina di GridView, mentre le righe dell'intestazione e del piè di pagina non supportano la sintassi databinding, le informazioni specifiche dei dati possono essere inserite direttamente in queste righe dal gestore eventi di GridView s RowDataBound . Questa tecnica può essere usata per calcolare i totali in esecuzione o altre informazioni dai dati associati al controllo e assegnare tali informazioni al piè di pagina. Questo stesso concetto può essere applicato ai controlli DataList e Repeater; l'unica differenza è che per DataList e Repeater creare un gestore eventi per l'evento anziché per l'evento ItemDataBoundRowDataBound .
Per l'esempio, consentire di visualizzare il titolo Informazioni sul prodotto nella parte superiore dei risultati di DataList in un'intestazione <h3> . A tale scopo, aggiungere un oggetto HeaderTemplate con il markup appropriato. Dalla Designer, è possibile eseguire questa operazione facendo clic sul collegamento Modifica modelli nello smart tag dataList, scegliendo il modello di intestazione dall'elenco a discesa e digitando nel testo dopo aver selezionato l'opzione Intestazione 3 dall'elenco a discesa stile (vedere La figura 11).
Figura 11: Aggiungere un con le informazioni sul prodotto di testo (fare clic per visualizzare l'immagineHeaderTemplate full-size)
In alternativa, è possibile aggiungere in modo dichiarativo immettendo il markup seguente all'interno dei <asp:DataList> tag:
<HeaderTemplate>
<h3>Product Information</h3>
</HeaderTemplate>
Per aggiungere un po' di spazio tra ogni elenco di prodotti, aggiungere un SeparatorTemplate oggetto che include una riga tra ogni sezione. Il tag di regola orizzontale (<hr>), aggiunge un divisore di questo tipo. Creare in SeparatorTemplate modo che disponga del markup seguente:
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
Nota
HeaderTemplate Analogamente a e FooterTemplates, l'oggetto SeparatorTemplate non è associato a alcun record dall'origine dati e pertanto non può accedere direttamente ai record di origine dati associati a DataList.
Dopo aver effettuato questa aggiunta, quando si visualizza la pagina tramite un browser, dovrebbe essere simile alla figura 12. Prendere nota della riga di intestazione e della riga tra ogni elenco di prodotti.
Figura 12: DataList include una riga di intestazione e una regola orizzontale tra ogni elenco di prodotti (fare clic per visualizzare un'immagine full-size)
Passaggio 5: Rendering di markup specifico con il controllo Ripetitore
Se si esegue una visualizzazione/origine dal browser quando si visita l'esempio DataList dalla figura 12, si noterà che DataList genera un CODICE HTML <table> contenente una riga di tabella () con una singola cella di tabella (<tr><td>) per ogni elemento associato a DataList. Questo output, in effetti, è identico a quello che verrebbe generato da un oggetto GridView con un singolo TemplateField. Come si vedrà in un'esercitazione futura, DataList consente una ulteriore personalizzazione dell'output, consentendo di visualizzare più record di origine dati per ogni riga di tabella.
Cosa succede se non si vuole generare un codice HTML <table>, anche se? Per il controllo totale e completo sul markup generato da un controllo Web dati, è necessario usare il controllo Ripetitore. Analogamente a DataList, il ripetitore viene costruito in base ai modelli. Il ripetitore, tuttavia, offre solo i cinque modelli seguenti:
HeaderTemplatese specificato, aggiunge il markup specificato prima degli elementiItemTemplateusato per eseguire il rendering di elementiAlternatingItemTemplatese specificato, usato per eseguire il rendering di elementi alternatiSeparatorTemplatese specificato, aggiunge il markup specificato tra ogni elementoFooterTemplate- se specificato, aggiunge il markup specificato dopo gli elementi
In ASP.NET 1.x, il controllo Repeater è stato comunemente usato per visualizzare un elenco puntato i cui dati provengono da un'origine dati. In tal caso, l'oggetto HeaderTemplate e FooterTemplates conterrà rispettivamente i tag di apertura e chiusura <ul> , mentre gli ItemTemplate elementi con <li> sintassi databinding contengono elementi. Questo approccio può comunque essere usato in ASP.NET 2.0 come illustrato in due esempi nell'esercitazione Master Pages and Site Navigation:This approach can still be used in ASP.NET 2.0 as we saw in two examples in the Master Pages and Site Navigation tutorial:
Site.masterNella pagina master è stato usato un ripetitore per visualizzare un elenco puntato del contenuto della mappa del sito di primo livello (creazione di report di base, filtro report, formattazione personalizzata e così via); è stato usato un altro ripetitore annidato per visualizzare le sezioni figlio delle sezioni principali delle sezioni di primo livello- In
SectionLevelTutorialListing.ascxè stato usato un ripetitore per visualizzare un elenco puntato delle sezioni figlio della sezione mappa del sito corrente
Nota
ASP.NET 2.0 introduce il nuovo controllo BulletedList, che può essere associato a un controllo origine dati per visualizzare un semplice elenco puntato. Con il controllo BulletedList non è necessario specificare alcun html correlato all'elenco; Invece, è sufficiente indicare il campo dati da visualizzare come testo per ogni elemento dell'elenco.
Il ripetitore funge da controllo Web catch di tutti i dati. Se non è presente un controllo esistente che genera il markup necessario, è possibile usare il controllo Repeater. Per illustrare l'uso del ripetitore, consentire di visualizzare l'elenco di categorie visualizzate sopra l'Elenco dati informazioni prodotto creato nel passaggio 2. In particolare, consente di visualizzare le categorie in un HTML <table> a riga singola con ogni categoria visualizzata come colonna nella tabella.
A questo scopo, iniziare trascinando un controllo Repeater dalla casella degli strumenti nella Designer, sopra l'Elenco dati informazioni prodotto. Come per DataList, il ripetitore viene inizialmente visualizzato come una casella grigia fino a quando i relativi modelli non sono stati definiti.
Figura 13: Aggiungere un ripetitore alla Designer (Fare clic per visualizzare l'immagine full-size)
C'è solo un'opzione nello smart tag del ripetitore: scegliere Origine dati. Scegliere di creare un nuovo OggettoDataSource e configurarlo per usare il CategoriesBLL metodo della GetCategories classe.
Figura 14: Creare un nuovo oggettoDataSource (Fare clic per visualizzare l'immagine a dimensioni complete)
Figura 15: Configurare ObjectDataSource per usare la classe (fare clic per visualizzare l'immagineCategoriesBLL full-size)
Figura 16: Recuperare informazioni su tutte le categorie usando il metodo (fare clic per visualizzare l'immagineGetCategories full-size)
A differenza di DataList, Visual Studio non crea automaticamente un elemento ItemTemplate per il ripetitore dopo l'associazione a un'origine dati. Inoltre, i modelli di Ripetitore non possono essere configurati tramite la Designer e devono essere specificati in modo dichiarativo.
Per visualizzare le categorie come singola riga <table> con una colonna per ogni categoria, è necessario che il ripetitore emetta markup simile al seguente:
<table>
<tr>
<td>Category 1</td>
<td>Category 2</td>
...
<td>Category N</td>
</tr>
</table>
Poiché il testo è la parte che ripete, verrà visualizzato nell'elemento <td>Category X</td> ItemTemplate del ripetitore. Markup visualizzato prima di esso , <table><tr> che verrà inserito nel HeaderTemplate mentre il markup finale - </tr></table> verrà inserito nell'oggetto FooterTemplate. Per immettere queste impostazioni modello, passare alla parte dichiarativa della pagina ASP.NET facendo clic sul pulsante Origine nell'angolo inferiore sinistro e digitare nella sintassi seguente:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
EnableViewState="False">
<HeaderTemplate>
<table>
<tr>
</HeaderTemplate>
<ItemTemplate>
<td><%# Eval("CategoryName") %></td>
</ItemTemplate>
<FooterTemplate>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
Il ripetitore genera il markup preciso come specificato dai relativi modelli, niente di più, niente di meno. La figura 17 mostra l'output del ripetitore quando visualizzato tramite un browser.
Figura 17: Single-Row HTML <table> Elenchi Ogni categoria in una colonna separata (fare clic per visualizzare un'immagine a dimensioni complete)
Passaggio 6: Miglioramento dell'aspetto del ripetitore
Poiché il ripetitore genera esattamente il markup specificato dai relativi modelli, non dovrebbe sorprendere che non ci siano proprietà correlate allo stile per il ripetitore. Per modificare l'aspetto del contenuto generato dal ripetitore, è necessario aggiungere manualmente il contenuto HTML o CSS necessario direttamente ai modelli di Ripetitore.
Per l'esempio, è possibile che le colonne di categoria abbiano colori di sfondo alternativi, ad esempio con le righe alternate nell'elenco dati. A questo scopo, è necessario assegnare la RowStyle classe CSS a ogni elemento Repeater e alla AlternatingRowStyle classe CSS a ogni elemento ripetitore alternato tramite i ItemTemplate modelli e AlternatingItemTemplate , ad esempio:
<ItemTemplate>
<td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
<td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>
Consente anche di aggiungere una riga di intestazione all'output con il testo Categorie prodotto. Poiché non si conosce il numero di colonne risultanti <table> , il modo più semplice per generare una riga di intestazione garantita per l'intervallo di tutte le colonne consiste nell'usare due<table> s. Il primo <table> conterrà due righe la riga di intestazione e una riga che conterrà la seconda riga singola <table> con una colonna per ogni categoria nel sistema. Ovvero, si vuole generare il markup seguente:
<table>
<tr>
<th>Product Categories</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>Category 1</td>
<td>Category 2</td>
...
<td>Category N</td>
</tr>
</table>
</td>
</tr>
</table>
Il markup seguente HeaderTemplate e FooterTemplate comporta il markup desiderato:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
EnableViewState="False">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<th class="HeaderStyle">Product Categories</th>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0">
<tr>
</HeaderTemplate>
<ItemTemplate>
<td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
<td class="AlternatingRowStyle">
<%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>
<FooterTemplate>
</tr>
</table>
</td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
La figura 18 mostra il ripetitore dopo aver apportato queste modifiche.
Figura 18: Le colonne di categoria alternative in colore di sfondo e includono una riga di intestazione (fare clic per visualizzare un'immagine full-size)
Riepilogo
Anche se il controllo GridView semplifica la visualizzazione, la modifica, l'eliminazione, l'ordinamento e la pagina tramite i dati, l'aspetto è molto boxy e griglia. Per un maggiore controllo sull'aspetto, è necessario passare ai controlli DataList o Repeater. Entrambi questi controlli visualizzano un set di record usando modelli anziché BoundFields, CheckBoxFields e così via.
DataList esegue il rendering come HTML <table> che, per impostazione predefinita, visualizza ogni record dell'origine dati in una singola riga di tabella, proprio come un oggetto GridView con un singolo ModelloField. Come si vedrà in un'esercitazione futura, tuttavia, DataList consente la visualizzazione di più record per ogni riga di tabella. Il ripetitore, d'altra parte, emette rigorosamente il markup specificato nei relativi modelli; non aggiunge alcun markup aggiuntivo e pertanto viene comunemente usato per visualizzare i dati in elementi HTML diversi da un <table> oggetto (ad esempio in un elenco puntato).
Anche se dataList e Repeater offrono maggiore flessibilità nell'output di cui è stato eseguito il rendering, mancano molte delle funzionalità predefinite disponibili in GridView. Come si esaminerà nelle esercitazioni imminenti, alcune di queste funzionalità possono essere collegate senza troppo sforzo, ma tenere presente che l'uso di DataList o Repeater al posto di GridView limita le funzionalità che è possibile usare senza dover implementare queste funzionalità autonomamente.
Programmazione felice!
Informazioni sull'autore
Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, ha lavorato con le tecnologie Microsoft Web dal 1998. Scott lavora come consulente indipendente, allenatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2,0 in 24 Ore. Può essere raggiunto a mitchell@4GuysFromRolla.com. o tramite il suo blog, che può essere trovato in http://ScottOnWriting.NET.
Grazie speciale a
Questa serie di esercitazioni è stata esaminata da molti revisori utili. I revisori principali di questa esercitazione erano Yaakov Ellis, Liz Shulok, Randy Schmidt e Stacy Park. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, rilasciami una riga in mitchell@4GuysFromRolla.com.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per