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

di Scott Mitchell

Scarica il PDF

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

Introduzione

Gli esempi di DataList illustrati negli ultimi due esercitazioni hanno eseguito il rendering di ogni record dall'origine dati come riga in un HTML <table>a colonna singola. Anche se si tratta del comportamento predefinito di DataList, è molto facile personalizzare la visualizzazione DataList in modo che gli elementi dell'origine dati vengano distribuiti in una tabella a più colonne, a più righe. Inoltre, è possibile avere tutti gli elementi dell'origine dati visualizzati in una singola riga, datalist a più colonne.

È possibile personalizzare il layout di DataList tramite le relative RepeatColumns proprietà e RepeatDirection , rispettivamente, indicare il numero di colonne di cui viene eseguito il rendering e se tali elementi vengono 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 full-size)

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

Passaggio 1: Visualizzazione delle informazioni sul prodotto in un elenco dati

Prima di esaminare le RepeatColumns proprietà e RepeatDirection , creare prima un oggetto DataList nella pagina in cui sono elencate le informazioni sul prodotto usando il layout di tabella a più righe standard. Per questo esempio, consente di 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. Iniziare aprendo la RepeatColumnAndDirection.aspx pagina nella DataListRepeaterBasics cartella e trascinando un oggetto DataList dalla casella degli strumenti nella Designer. Dallo smart tag di DataList scegliere di creare un nuovo oggetto ObjectDataSource e configurarlo per eseguire il pull dei dati dal ProductsBLL metodo della GetProducts classe, scegliendo l'opzione (None) dalla scheda INSERT, UPDATE e DELETE della procedura guidata.

Dopo aver creato e associando il nuovo OggettoDataSource a DataList, Visual Studio creerà automaticamente un oggetto ItemTemplate che visualizza il nome e il valore per ognuno dei campi dati del prodotto. Modificare direttamente ItemTemplate 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 nome prodotto, ilnome categoria e il testo Price con i controlli Label che usano la sintassi di associazione dati appropriata per assegnare valori alle relative Text proprietà. Dopo aver aggiornato , il ItemTemplatemarkup 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 Eval sintassi databinding per , UnitPriceformattazione del valore restituito come valuta - Eval("UnitPrice", "{0:C}").

Prendi un momento per visitare la tua pagina in un browser. Come illustrato nella figura 2, DataList esegue il rendering come tabella a singola colonna dei prodotti.

Figura 2: Per impostazione predefinita, datalist esegue il rendering come tabella a colonna singola, multi-riga (fare clic per visualizzare l'immagine a dimensioni complete)

Passaggio 2: Modifica della direzione layout di DataList

Anche se il comportamento predefinito per DataList consiste nel definire gli elementi in verticale in una tabella a colonna singola, 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 proprietà da Vertical a Horizontal, DataList esegue il rendering dei RepeatDirection record in una singola riga, creando una colonna per ogni elemento dell'origine dati. Per illustrare questo effetto, fare clic su DataList nella Designer e quindi, dal Finestra Proprietà, modificare la RepeatDirection proprietà da Vertical a Horizontal. A tale scopo, l'Designer regola il layout di DataList, creando un'interfaccia a più colonne a riga singola (vedere la figura 3).

Figura 3: La RepeatDirection proprietà determina la modalità di disposizione degli elementi dell'elenco dati (fare clic per visualizzare l'immagine full-size)

Quando si visualizzano piccole quantità di dati, una tabella 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 esegue il push di tali elementi che non possono adattarsi sullo schermo a destra. La figura 4 mostra i prodotti quando 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 singolo elenco di dati di colonna richiede lo scorrimento orizzontale (fare clic per visualizzare l'immagine a dimensioni complete)

Passaggio 3: Visualizzazione dei dati in una tabella a più colonne, multi-riga

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, che causerà la visualizzazione di tutti gli elementi in una singola riga o in una colonna ( a seconda del valore della RepeatDirection proprietà).

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

Figura 5: Vengono visualizzati tre prodotti per riga (fare clic per visualizzare l'immagine full-size)

La RepeatDirection proprietà influisce sul modo in cui vengono disposti gli elementi nell'elenco dati. La figura 5 mostra i risultati con la RepeatDirection proprietà impostata su Horizontal. Si noti che i primi tre prodotti Chai, Chang e Sciroppo aniseo sono disposti da sinistra a destra, in alto verso il basso. I tre prodotti successivi (a partire da Chef Anton s Cajun Seasoning) appaiono in una riga sotto i primi tre. Modificando la proprietà in Vertical, tuttavia, vengono visualizzati questi prodotti dall'alto RepeatDirection verso il basso, a sinistra a destra, come illustrato nella figura 6.

Figura 6: Qui, i prodotti sono disposti verticalmente (fare clic per visualizzare l'immagine a dimensioni complete)

Il numero di righe visualizzate nella tabella risultante dipende dal numero di record totali associati a DataList. Precisamente, è il soffitto del numero totale di elementi dell'origine dati suddivisi 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 RepeatColumns valore della proprietà non sono divisibili, l'ultima riga o colonna avrà celle vuote. Se l'oggetto RepeatDirection è impostato su Vertical, l'ultima colonna avrà celle vuote. Se RepeatDirection è Horizontal, l'ultima riga avrà le celle vuote.

Riepilogo

DataList, per impostazione predefinita, elenca i relativi elementi in una tabella a più colonne, che simula il layout di un oggetto GridView con un singolo ModelloField. Anche se questo layout predefinito è accettabile, è possibile ottimizzare lo schermo visualizzando più elementi dell'origine dati per riga. A questo scopo, è sufficiente impostare la proprietà DataList s RepeatColumns sul numero di colonne da visualizzare per riga. Inoltre, la proprietà DataList può RepeatDirection essere usata 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 a destra.

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 speciali

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