Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
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 relative RepeatColumns 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: l'elenco dati mostra tre prodotti per riga (fare clic per visualizzare l'immagine a dimensione intera)
Mostrando 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à DataList.
Passaggio 1: Visualizzazione delle informazioni sul prodotto in un oggetto DataList
Prima di esaminare le proprietà RepeatColumns e RepeatDirection, creiamo un DataList nella nostra pagina che elenchi le informazioni sui prodotti usando il layout standard di tabella a colonna singola e multipla. 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
Negli esempi precedenti è stato illustrato come associare i dati a un oggetto DataList, 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 finestra di progettazione. Dallo smart tag di DataList scegliere di creare un nuovo ObjectDataSource e configurarlo per recuperare i dati dal metodo ProductsBLL della classe, scegliendo l'opzione (Nessuno) nelle 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 ho incluso un identificatore di formato nella sintassi di associazione dati Eval, 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, DataList esegue il rendering come tabella di prodotti a colonna singola e su più righe.
Figura 2: per impostazione predefinita, 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 gli elementi verticalmente in una tabella a colonna singola e su 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à RepeatDirection da Vertical a Horizontal, DataList esegue il rendering dei relativi record in una singola riga, creando una colonna per ciascun elemento della sorgente dati. Per illustrare questo effetto, fare clic su DataList in Progettazione e quindi, nella finestra Proprietà, modificare la RepeatDirection proprietà da Vertical a Horizontal. Appena fatto, il Designer regola il layout della DataList, creando un'interfaccia a riga singola e a più colonne (vedere la figura 3).
Figura 3: La RepeatDirection proprietà determina la modalità di disposizione degli elementi dell'elenco di 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 spazio sullo schermo. Per volumi di dati di dimensioni maggiori, tuttavia, una singola riga richiederà numerose colonne, spingendo gli elementi che non possono essere visualizzati sullo schermo fuori a destra. La figura 4 mostra i prodotti di cui viene eseguito il rendering in un DataList con una singola riga. 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 dimensione intera)
Passaggio 3: Visualizzazione di 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 in una 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, attendere qualche minuto per visualizzare 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 aniseo sono disposti da sinistra a destra, dall'alto verso il basso. I tre prodotti successivi (a partire da Chef Anton s Cajun Seasoning) appaiono sotto i primi tre. Tuttavia, modificando nuovamente la RepeatDirection proprietà su Vertical, questi prodotti vengono disposti 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 limite massimo 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.
RepeatDirection Se è impostato su Vertical, l'ultima colonna avrà celle vuote; se RepeatDirection è Horizontal, l'ultima riga avrà le celle vuote.
Riassunto
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 sullo schermo visualizzando più elementi dell'origine dati per riga. A tale scopo, è sufficiente impostare la proprietà DataList sul RepeatColumns numero di colonne da visualizzare per riga. Inoltre, è possibile utilizzare la proprietà DataList s RepeatDirection per indicare se il contenuto della tabella su 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, 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 questa esercitazione era John Suru. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, mandami un messaggio a mitchell@4GuysFromRolla.com.