Visualizzazione di dati con i controlli DataList e Repeater (C#)

di Scott Mitchell

Scarica PDF

Nelle esercitazioni precedenti è stato usato il controllo GridView per visualizzare i dati. A partire da questa esercitazione, si esaminerà la creazione di modelli di creazione di report comuni con i controlli DataList e Repeater, a partire dalle nozioni di base sulla visualizzazione dei dati con questi controlli.

Introduzione

In tutti gli esempi delle ultime 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 del record nelle colonne. Mentre GridView lo rende uno snap per visualizzare, scorrere, ordinare, modificare ed eliminare i dati, l'aspetto è un po' boxy. Inoltre, il markup responsabile della struttura di GridView è fisso include un CODICE HTML <table> con una riga di tabella (<tr>) per ogni record e una cella di tabella (<td>) per ogni campo.

Per offrire un maggior grado di personalizzazione nell'aspetto e nel markup sottoposto a rendering durante la visualizzazione di più record, ASP.NET 2.0 offre i controlli DataList e Repeater ,entrambi disponibili in ASP.NET 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 repeater, 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 in DataList, scenari master/dettagli comuni, modi per modificare ed eliminare dati, come scorrere i record e così via.

Passaggio 1: Aggiunta di pagine Web dell'esercitazione su DataList e Repeater

Prima di iniziare questa esercitazione, è necessario prima di tutto aggiungere le pagine ASP.NET necessarie per questa esercitazione e le esercitazioni successive che gestiscono la visualizzazione dei dati usando DataList e Repeater. Per iniziare, creare una nuova cartella nel progetto denominato DataListRepeaterBasics. Aggiungere quindi le cinque pagine ASP.NET seguenti a questa cartella, con tutte le pagine configurate per l'uso della pagina Site.mastermaster :

• Default.aspx
• Basics.aspx
• Formatting.aspx
• RepeatColumnAndDirection.aspx
• NestedControls.aspx

Figura 1: Creare una DataListRepeaterBasics cartella e aggiungere l'esercitazione ASP.NET pagine

Aprire la Default.aspx pagina e trascinare il SectionLevelTutorialListing.ascx controllo utente dalla UserControls cartella nell'area di progettazione. Questo controllo utente, creato nell'esercitazione Pagine master e navigazione sito, enumera la mappa del sito e visualizza le esercitazioni della sezione corrente in un elenco puntato.

Figura 2: Aggiungere il SectionLevelTutorialListing.ascx controllo utente a Default.aspx (fare clic per visualizzare l'immagine a dimensione intera)

Per fare in modo che l'elenco puntato visualizzi le esercitazioni su DataList e Repeater che verranno create, è necessario aggiungerle alla mappa del sito. Aprire il file e aggiungere il Web.sitemap markup seguente dopo l'aggiunta del markup del nodo della 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 di ASP.NET

Passaggio 2: Visualizzazione delle informazioni sul prodotto con DataList

Analogamente a FormView, l'output sottoposto a rendering del controllo DataList dipende dai modelli anziché da BoundFields, CheckBoxFields e così via. A differenza di FormView, DataList è progettato per visualizzare un set di record anziché uno solitario. Iniziamo questa esercitazione con un'occhiata all'associazione delle informazioni sul prodotto a un oggetto DataList. Per iniziare, aprire la Basics.aspx pagina nella DataListRepeaterBasics cartella . Trascinare quindi un oggetto DataList dalla casella degli strumenti nella finestra di progettazione. Come illustrato nella figura 4, prima di specificare i modelli di DataList, la finestra di progettazione la visualizza come casella grigia.

Figura 4: Trascinare DataList dalla casella degli strumenti nella finestra di progettazione (fare clic per visualizzare l'immagine a dimensione intera)

Dallo smart tag di DataList aggiungere un nuovo ObjectDataSource e configurarlo per l'uso del 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 e DELETE della procedura guidata.

Figura 5: Scegliere di creare un nuovo oggettoDataSource (fare clic per visualizzare l'immagine a dimensione intera)

Figura 6: Configurare ObjectDataSource per l'uso della classe (fare clic per visualizzare l'immagine ProductsBLLa dimensione intera)

Figura 7: Recuperare informazioni su tutti i prodotti utilizzando il metodo (fare clic per visualizzare l'immagine GetProductsa dimensione intera)

Dopo aver configurato ObjectDataSource e associato a DataList tramite lo smart tag, Visual Studio creerà automaticamente un oggetto ItemTemplate in DataList che visualizza il nome e il valore di ogni campo dati restituito dall'origine dati (vedere il markup seguente). Questo aspetto predefinito ItemTemplate è identico a quello dei modelli creati automaticamente quando si associa un'origine dati a FormView tramite la finestra di progettazione.

<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 formView, Visual Studio ha creato un ItemTemplateoggetto , InsertItemTemplatee EditItemTemplate. Con DataList, tuttavia, viene creato solo un oggetto ItemTemplate . Il motivo è che DataList non ha lo stesso supporto predefinito per la modifica e l'inserimento offerti da FormView. DataList contiene eventi correlati alla modifica e all'eliminazione e la modifica e l'eliminazione del supporto possono essere aggiunti con un po' di codice, ma non esiste un semplice supporto predefinito come con FormView. Verrà illustrato come includere la modifica e l'eliminazione del supporto con DataList in un'esercitazione futura.

Diamo un po' di tempo per migliorare l'aspetto di questo modello. Anziché visualizzare tutti i campi dati, è possibile 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 disporre i campi rimanenti usando un <table> sotto l'intestazione.

Per apportare queste modifiche, è possibile utilizzare le funzionalità di modifica dei modelli nella finestra di progettazione dallo smart tag datalist di Fare clic sul collegamento Modifica modelli oppure modificare manualmente il modello tramite la sintassi dichiarativa della pagina. Se si usa l'opzione Modifica modelli in Progettazione, il markup risultante potrebbe non corrispondere esattamente al markup seguente, ma quando visualizzato tramite un browser dovrebbe essere molto simile allo screenshot illustrato 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

Nell'esempio precedente vengono utilizzati i controlli Web Label la cui Text proprietà è assegnata al valore della sintassi di associazione dati. In alternativa, è possibile omettere completamente le etichette, digitando solo la sintassi di associazione dati. In alternativa, <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> è possibile usare invece la sintassi <%# Eval("CategoryName") %>dichiarativa .

Lasciare i controlli Web Etichetta, tuttavia, offrono due vantaggi. In primo luogo, offre un modo più semplice per formattare i dati in base ai dati, come illustrato nell'esercitazione successiva. In secondo luogo, l'opzione Modifica modelli in Progettazione non visualizza la sintassi di associazione dati dichiarativa visualizzata all'esterno di un controllo Web. L'interfaccia Modifica modelli è invece progettata per facilitare l'utilizzo di markup statico e controlli Web e presuppone che qualsiasi associazione dati venga eseguita tramite la finestra di dialogo Modifica dataBinding, accessibile dagli smart tag dei controlli Web.

Pertanto, quando si lavora con DataList, che offre la possibilità di modificare i modelli tramite la finestra di progettazione, preferisco usare i controlli Web Etichetta in modo che il contenuto sia accessibile tramite l'interfaccia Modifica modelli. Come si vedrà a breve, repeater richiede che il contenuto del modello venga modificato dalla visualizzazione Origine. Di conseguenza, quando si creano i modelli di Repeater, spesso si ometteranno i controlli Web Etichetta, a meno che non si sappia che è necessario formattare l'aspetto del testo associato a dati in base alla logica programmatica.

Figura 8: Viene eseguito il rendering di ogni output del prodotto usando l'elenco dati (ItemTemplatefare clic per visualizzare l'immagine a dimensione intera)

Passaggio 3: Miglioramento dell'aspetto di DataList

Analogamente a GridView, DataList offre una serie di proprietà correlate allo stile, ad esempio Font, , ForeColorBackColor, AlternatingItemStyleCssClassItemStyleSelectedItemStylee così via. Quando si utilizzano i controlli GridView e DetailsView, sono stati creati i file Skin nel DataWebControls tema che hanno definito in modo predefinito le CssClass proprietà per questi due controlli e la CssClass proprietà per diverse delle relative sottoproprietà (RowStyle, HeaderStylee così via). Eseguire la stessa operazione per DataList.

Come descritto nell'esercitazione Visualizzazione di dati con ObjectDataSource , un file Skin specifica le proprietà predefinite correlate all'aspetto per un controllo Web. Un theme è una raccolta di file Skin, CSS, image e JavaScript che definiscono un aspetto specifico per un sito Web. Nell'esercitazione Visualizzazione dei dati con ObjectDataSource è stato creato un DataWebControls tema (che viene implementato come cartella all'interno della App_Themes cartella) che contiene attualmente due file Skin - GridView.skin e DetailsView.skin. Aggiungi 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. Denominare il file DataList.skin.

Figura 9: Creare un nuovo file di interfaccia denominato DataList.skin (fare clic per visualizzare l'immagine a dimensione intera)

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, AlternatingRowStyle, RowStylee così via vengono 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 finestra di progettazione (potrebbe essere necessario aggiornare la visualizzazione Progettazione 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 dimensione intera)

Passaggio 4: Esplorazione di altri modelli di DataList

Oltre a ItemTemplate, DataList supporta sei altri modelli facoltativi:

• HeaderTemplate se specificato, aggiunge una riga di intestazione all'output e viene usata per eseguire il rendering di questa riga
• AlternatingItemTemplate utilizzato per eseguire il rendering di elementi alternati
• SelectedItemTemplateutilizzato per eseguire il rendering dell'elemento selezionato; l'elemento selezionato è l'elemento il cui indice corrisponde alla proprietà DataList s SelectedIndex
• EditItemTemplate utilizzato per eseguire il rendering dell'elemento da modificare
• SeparatorTemplate se specificato, aggiunge un separatore tra ogni elemento e viene usato per eseguire il rendering di questo separatore
• FooterTemplate - se specificato, aggiunge una riga del piè di pagina all'output e viene usata per eseguire il rendering di questa riga

Quando si specifica o HeaderTemplate FooterTemplate, DataList aggiunge un'intestazione o una riga piè di pagina aggiuntivi all'output sottoposto a 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 di associazione dati in HeaderTemplate o FooterTemplate che tenta di accedere ai dati associati restituirà una stringa vuota.

Nota

Come illustrato nell'esercitazione Visualizzazione delle informazioni di riepilogo nell'esercitazione Piè di pagina di GridView, mentre le righe di intestazione e piè di pagina non supportano la sintassi di associazione dati, le informazioni specifiche dei dati possono essere inserite direttamente in queste righe dal gestore eventi di GridView.RowDataBound Questa tecnica può essere usata per calcolare i totali in esecuzione o altre informazioni dai dati associati al controllo e per 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 ItemDataBound (anziché per l'evento RowDataBound ).

Per questo esempio, lasciare che il titolo Informazioni prodotto sia visualizzato nella parte superiore dei risultati di DataList in un'intestazione <h3> . A tale scopo, aggiungere un oggetto HeaderTemplate con il markup appropriato. Da Progettazione, questa operazione può essere eseguita facendo clic sul collegamento Modifica modelli nello smart tag DataList, scegliendo il modello di intestazione dall'elenco a discesa e digitando il testo dopo aver selezionato l'opzione Titolo 3 dall'elenco a discesa stile (vedere la figura 11).

Figura 11: Aggiungere un oggetto HeaderTemplate con le informazioni sul prodotto di testo (fare clic per visualizzare l'immagine a dimensione intera)

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 presentazione di prodotti, aggiungere un elemento SeparatorTemplate che includa una riga tra ogni sezione. Il tag regola orizzontale (<hr>), aggiunge tale divisore. Creare in SeparatorTemplate modo che abbia il markup seguente:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Nota

Analogamente a e FooterTemplates, l'oggetto HeaderTemplate SeparatorTemplate non è associato ad alcun record dall'origine dati e pertanto non può accedere direttamente ai record dell'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 presentazione del prodotto.

Figura 12: DataList include una riga di intestazione e una regola orizzontale tra ogni elenco di prodotti (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 5: Rendering di markup specifico con il controllo Repeater

Se si esegue una visualizzazione/origine dal browser quando si visita l'esempio DataList della 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 all'oggetto DataList. Questo output, infatti, è identico a quello che verrebbe generato da un controllo GridView con un singolo oggetto TemplateField. Come vedremo in un'esercitazione futura, DataList consente un'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>, tuttavia? Per il controllo totale e completo sul markup generato da un controllo Web dati, è necessario usare il controllo Repeater. Analogamente a DataList, il repeater viene costruito in base ai modelli. Il Repeater, tuttavia, offre solo i cinque modelli seguenti:

• HeaderTemplate se specificato, aggiunge il markup specificato prima degli elementi
• ItemTemplate utilizzato per il rendering degli elementi
• AlternatingItemTemplate se specificato, utilizzato per eseguire il rendering di elementi alternati
• SeparatorTemplate se specificato, aggiunge il markup specificato tra ogni elemento
• FooterTemplate - 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 questo caso, HeaderTemplate e FooterTemplates conterrà rispettivamente i tag di apertura e chiusura <ul> , mentre ItemTemplate contiene <li> elementi con sintassi di associazione dati. Questo approccio può ancora essere usato in ASP.NET 2.0, come illustrato in due esempi nell'esercitazione pagine master e navigazione sito :

• Site.master Nella pagina master è stato utilizzato un repeater per visualizzare un elenco puntato del contenuto della mappa del sito di primo livello (report di base, filtro report, formattazione personalizzata e così via); un altro ripetitore annidato è stato usato per visualizzare le sezioni figlio delle sezioni di primo livello
• In SectionLevelTutorialListing.ascxè stato usato un repeater 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 codice HTML correlato all'elenco; In alternativa, si indica semplicemente il campo dati da visualizzare come testo per ogni voce di elenco.

Il Repeater funge da controllo Web catch per tutti i dati. Se non è presente un controllo esistente che genera il markup necessario, è possibile utilizzare il controllo Repeater. Per illustrare l'uso di Repeater, lasciare che l'elenco delle categorie sia visualizzato sopra l'Elenco dati informazioni prodotto creato nel passaggio 2. In particolare, consentire di visualizzare le categorie in un codice HTML <table> a riga singola con ogni categoria visualizzata come colonna nella tabella.

A tale scopo, trascinare un controllo Repeater dalla casella degli strumenti nella finestra di progettazione, sopra l'elenco Dati informazioni prodotto. Come per DataList, il Repeater viene inizialmente visualizzato come casella grigia fino a quando non sono stati definiti i relativi modelli.

Figura 13: Aggiungere un ripetitore alla finestra di progettazione (fare clic per visualizzare l'immagine a dimensione intera)

Esiste una sola opzione nello smart tag Repeater: scegliere Origine dati. Scegliere di creare un nuovo ObjectDataSource e configurarlo per l'uso del CategoriesBLL metodo della classe .GetCategories

Figura 14: Creare un nuovo oggettoDataSource (fare clic per visualizzare l'immagine a dimensione intera)

Figura 15: Configurare ObjectDataSource per l'uso della classe (fare clic per visualizzare l'immagine CategoriesBLLa dimensione intera)

Figura 16: Recuperare informazioni su tutte le categorie usando il metodo (fare clic per visualizzare l'immagine GetCategoriesa dimensione intera)

A differenza di DataList, Visual Studio non crea automaticamente un ItemTemplate per repeater dopo l'associazione a un'origine dati. Inoltre, i modelli di Repeater non possono essere configurati tramite la finestra di progettazione e devono essere specificati in modo dichiarativo.

Per visualizzare le categorie come riga singola <table> con una colonna per ogni categoria, è necessario il Repeater per generare markup simile al seguente:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

Poiché il <td>Category X</td> testo è la parte ripetuta, questo verrà visualizzato nell'elemento ItemTemplate di Repeater. Il markup visualizzato prima di esso , <table><tr> verrà inserito nel HeaderTemplate mentre il markup finale , </tr></table> verrà inserito in FooterTemplate. Per immettere queste impostazioni del modello, passare alla parte dichiarativa della pagina ASP.NET facendo clic sul pulsante Origine nell'angolo in basso a sinistra e digitare la 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 Repeater genera il markup preciso come specificato dai relativi modelli, niente di più, niente di meno. La figura 17 mostra l'output di Repeater quando visualizzato tramite un browser.

Figura 17: Un html <table> a riga singola elenca ogni categoria in una colonna separata (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 6: Miglioramento dell'aspetto del ripetitore

Poiché il Repeater genera esattamente il markup specificato dai relativi modelli, non dovrebbe sorprendere che non ci siano proprietà correlate allo stile per il Repeater. Per modificare l'aspetto del contenuto generato dal Repeater, è necessario aggiungere manualmente il contenuto HTML o CSS necessario direttamente ai modelli di Repeater.

Per questo esempio, lasciare che le colonne di categoria abbiano colori di sfondo alternativi, ad esempio con le righe alternate in DataList. A tale scopo, è necessario assegnare la RowStyle classe CSS a ogni elemento Repeater e alla AlternatingRowStyle classe CSS a ogni elemento Repeater alternato tramite i ItemTemplate modelli e AlternatingItemTemplate , in questo modo:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Aggiungere anche 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 tutte le colonne consiste nell'usare due <table> colonne. Il primo <table> conterrà due righe la riga di intestazione e una riga che conterrà la seconda riga a riga <table> singola 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>

Di seguito HeaderTemplate viene restituito FooterTemplate 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: Colonne di categoria alternative in colore di sfondo e Include una riga di intestazione (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

Anche se il controllo GridView semplifica la visualizzazione, la modifica, l'eliminazione, l'ordinamento e la pagina dei dati, l'aspetto è molto boxy e grid-like. 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.

Il rendering di DataList viene eseguito come HTML <table> che, per impostazione predefinita, visualizza ogni record di origine dati in una singola riga di tabella, proprio come un controllo GridView con un singolo oggetto TemplateField. Come si vedrà in un'esercitazione futura, tuttavia, DataList consente la visualizzazione di più record per ogni riga di tabella. Il Repeater, 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 ( <table> 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 prossime esercitazioni, alcune di queste funzionalità possono essere ricollegate 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 manualmente tali funzionalità.

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 all'indirizzo mitchell@4GuysFromRolla.com. o tramite il suo blog, che può essere trovato all'indirizzo http://ScottOnWriting.NET.

Grazie speciale a

Questa serie di esercitazioni è stata esaminata da molti revisori utili. I revisori potenziali per questa esercitazione erano Yaakov Ellis, Liz Shulok, Randy Schmidt e Stacy Park. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, rilasciarmi una riga in mitchell@4GuysFromRolla.com.

Avanti