Visualizzazione di più record per riga con il controllo DataList (VB)

Articolo
07/13/2023

In questa breve esercitazione verrà illustrato come personalizzare il layout di DataList tramite le relative proprietà RepeatColumns e RepeatDirection.

Introduzione

Negli esempi di DataList illustrati nelle ultime due esercitazioni è stato eseguito il rendering di ogni record dall'origine dati come riga in un codice HTML <table>a colonna singola. Anche se si tratta del comportamento DataList predefinito, è molto semplice personalizzare la visualizzazione DataList in modo che gli elementi dell'origine dati vengano distribuiti in una tabella a più colonne e a più righe. Inoltre, è possibile che tutti gli elementi dell'origine dati vengano visualizzati in un oggetto DataList a riga singola e a più colonne.

È possibile personalizzare il layout di DataList tramite le RepeatColumns relative proprietà e RepeatDirection , rispettivamente, che indicano il numero di colonne di cui viene eseguito il rendering e se tali elementi sono disposti verticalmente o orizzontalmente. La figura 1, ad esempio, mostra un oggetto DataList che visualizza le informazioni sul prodotto in una tabella con tre colonne.

Figura 1: DataList mostra tre prodotti per riga (fare clic per visualizzare l'immagine a dimensione intera)

Visualizzando più elementi dell'origine dati per riga, DataList può usare in modo più efficace lo spazio sullo schermo orizzontale. In questa breve esercitazione verranno esaminate queste due proprietà di DataList.

Passaggio 1: Visualizzazione delle informazioni sul prodotto in un oggetto DataList

Prima di esaminare le RepeatColumns proprietà e RepeatDirection , è prima possibile creare un oggetto DataList nella pagina in cui sono elencate le informazioni sul prodotto usando il layout standard di tabella a colonna singola e a più righe. Per questo esempio, è possibile visualizzare il nome, la categoria e il prezzo del prodotto usando il markup seguente:

<h4>Product Name</h4>
Available in the Category Name store for Price

È stato illustrato come associare i dati a un oggetto DataList negli esempi precedenti, quindi si passerà rapidamente a questi passaggi. Per iniziare, aprire la RepeatColumnAndDirection.aspx pagina nella DataListRepeaterBasics cartella e trascinare un oggetto DataList dalla casella degli strumenti nella Designer. Dallo smart tag dataList, scegliere di creare un nuovo ObjectDataSource e configurarlo per eseguire il ProductsBLL pull dei dati dal metodo della GetProducts classe, scegliendo l'opzione (Nessuno) dalle schede INSERT, UPDATE e DELETE della procedura guidata.

Dopo la creazione e l'associazione del nuovo ObjectDataSource a DataList, Visual Studio creerà automaticamente un oggetto ItemTemplate che visualizza il nome e il valore per ognuno dei campi dati del prodotto. Modificare l'oggetto ItemTemplate direttamente tramite il markup dichiarativo o dall'opzione Modifica modelli nello smart tag di DataList in modo che usi il markup illustrato in precedenza, sostituendo il testo Product Name, Category Name e Price con i controlli Label che usano la sintassi di associazione dati appropriata per assegnare valori alle relative Text proprietà. Dopo l'aggiornamento di ItemTemplate, il markup dichiarativo della pagina dovrebbe essere simile al seguente:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h4>
        Available in the
            <asp:Label runat="server" ID="CategoryNameLabel"
                Text='<%# Eval("CategoryName") %>' />
        store for
            <asp:Label runat="server" ID="UnitPriceLabel"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Si noti che è stato incluso un identificatore di formato nella sintassi databinding Eval per UnitPrice, formattando il valore restituito come valuta - Eval("UnitPrice", "{0:C}").

Dedicare qualche minuto a visitare la pagina in un browser. Come illustrato nella figura 2, il rendering di DataList viene eseguito come tabella a colonna singola e a più righe di prodotti.

Figura 2: Per impostazione predefinita, l'oggetto DataList esegue il rendering come tabella a colonna singola e a più righe (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 2: Modifica della direzione del layout di DataList

Anche se il comportamento predefinito per DataList consiste nel disporre verticalmente gli elementi in una tabella a colonna singola e a più righe, questo comportamento può essere facilmente modificato tramite la proprietà DataList sRepeatDirection. La RepeatDirection proprietà può accettare uno dei due valori possibili: Horizontal o Vertical (impostazione predefinita).

Modificando la RepeatDirection proprietà da Vertical a Horizontal, DataList esegue il rendering dei relativi record in una singola riga, creando una colonna per ogni elemento dell'origine dati. Per illustrare questo effetto, fare clic su DataList nel Designer e quindi, dal Finestra Proprietà, modificare la RepeatDirection proprietà da Vertical a Horizontal. Immediatamente dopo questa operazione, il Designer regola il layout di DataList, creando un'interfaccia a riga singola e a più colonne (vedere la figura 3).

Figura 3: La RepeatDirection proprietà determina il modo in cui vengono disposti gli elementi dell'elenco dati (fare clic per visualizzare l'immagine a dimensione intera)

Quando si visualizzano piccole quantità di dati, una tabella a riga singola e a più colonne può essere un modo ideale per ottimizzare lo schermo. Per volumi più grandi di dati, tuttavia, una singola riga richiederà numerose colonne, che inserisce gli elementi che non possono essere inseriti sullo schermo a destra. La figura 4 mostra i prodotti di cui viene eseguito il rendering in un oggetto DataList a riga singola. Poiché ci sono molti prodotti (oltre 80), l'utente dovrà scorrere fino a destra per visualizzare le informazioni su ognuno dei prodotti.

Figura 4: per origini dati sufficientemente grandi, un oggetto DataList a colonna singola richiede lo scorrimento orizzontale (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 3: Visualizzazione dei dati in una tabella a più colonne e a più righe

Per creare un oggetto DataList a più colonne, è necessario impostare la RepeatColumns proprietà sul numero di colonne da visualizzare. Per impostazione predefinita, la RepeatColumns proprietà è impostata su 0, in modo che DataList visualizzi tutti i relativi elementi in una singola riga o colonna (a seconda del valore della RepeatDirection proprietà).

Per questo esempio, è possibile visualizzare tre prodotti per riga di tabella. Impostare quindi la RepeatColumns proprietà su 3. Dopo aver apportato questa modifica, esaminare i risultati in un browser. Come illustrato nella figura 5, i prodotti sono ora elencati in una tabella a tre colonne con più righe.

Figura 5: Vengono visualizzati tre prodotti per riga (fare clic per visualizzare l'immagine a dimensione intera)

La RepeatDirection proprietà influisce sulla disposizione degli elementi nell'oggetto DataList. La figura 5 mostra i risultati con la RepeatDirection proprietà impostata su Horizontal. Si noti che i primi tre prodotti Chai, Chang e Sciroppo aiseo sono disposti da sinistra a destra, dall'alto verso il basso. I tre prodotti successivi (a partire da Chef Anton s Cajun Seasoning) vengono visualizzati sotto i primi tre. La modifica della RepeatDirection proprietà in Vertical, tuttavia, dispone questi prodotti dall'alto verso il basso, da sinistra a destra, come illustrato nella figura 6.

Figura 6: Qui i prodotti sono disposti verticalmente (fare clic per visualizzare l'immagine a dimensione intera)

Il numero di righe visualizzate nella tabella risultante dipende dal numero di record totali associati all'oggetto DataList. Precisamente, è il soffitto del numero totale di elementi dell'origine dati diviso per il valore della RepeatColumns proprietà. Poiché la Products tabella ha attualmente 84 prodotti, che è divisibile per 3, ci sono 28 righe. Se il numero di elementi nell'origine dati e il valore della RepeatColumns proprietà non sono divisibile, l'ultima riga o colonna avrà celle vuote. Se è RepeatDirection impostato su Vertical, l'ultima colonna avrà celle vuote; se RepeatDirection è Horizontal, l'ultima riga avrà le celle vuote.

Riepilogo

Per impostazione predefinita, DataList elenca i relativi elementi in una tabella a colonna singola e a più righe, che simula il layout di un controllo GridView con un singolo oggetto TemplateField. Anche se questo layout predefinito è accettabile, è possibile ottimizzare lo spazio dello schermo visualizzando più elementi dell'origine dati per riga. A tale scopo, è sufficiente impostare la proprietà DataList s RepeatColumns sul numero di colonne da visualizzare per riga. È inoltre possibile utilizzare la proprietà DataList s RepeatDirection per indicare se il contenuto della tabella a più colonne deve essere disposto orizzontalmente da sinistra a destra, dall'alto verso il basso o verticalmente dall'alto verso il basso, da sinistra a destra.

Informazioni sull'autore

Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, lavora 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, disponibile all'indirizzo http://ScottOnWriting.NET.

Grazie speciale a

Questa serie di esercitazioni è stata esaminata da molti revisori utili. Il revisore principale di questa esercitazione era John Suru. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, rilasciami una riga in mitchell@4GuysFromRolla.com.

Indietro Avanti