Anzeigen von mehreren Datensätzen pro Zeile mit dem DataList-Steuerelement (C#)
von Scott Mitchell
In diesem kurzen Tutorial erfahren Sie, wie Sie das Layout der DataList über die Eigenschaften RepeatColumns und RepeatDirection anpassen.
Einführung
Die DataList-Beispiele, die wir in den letzten zwei Tutorials gesehen haben, haben jeden Datensatz aus seiner Datenquelle als Zeile in einem einspaltigen HTML <table>gerendert. Dies ist zwar das Standardmäßige DataList-Verhalten, aber es ist sehr einfach, die DataList-Anzeige so anzupassen, dass die Datenquellenelemente auf eine mehrspaltige Tabelle mit mehreren Zeilen verteilt werden. Darüber hinaus ist es möglich, dass alle Datenquellenelemente in einer einzeiligen, mehrspaltigen DataList angezeigt werden.
Wir können das Layout der DataList über die RepeatColumns Eigenschaften und RepeatDirection anpassen, die jeweils angeben, wie viele Spalten gerendert werden und ob diese Elemente vertikal oder horizontal angeordnet sind. Abbildung 1 zeigt beispielsweise eine DataList, die Produktinformationen in einer Tabelle mit drei Spalten anzeigt.
Abbildung 1: DataList zeigt drei Produkte pro Zeile an (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Indem mehrere Datenquellenelemente pro Zeile angezeigt werden, kann dataList den horizontalen Bildschirmbereich effektiver nutzen. In diesem kurzen Tutorial untersuchen wir diese beiden DataList-Eigenschaften.
Schritt 1: Anzeigen von Produktinformationen in einer DataList
Bevor wir die RepeatColumns Eigenschaften und RepeatDirection untersuchen, erstellen wir zunächst eine DataList auf unserer Seite, die Produktinformationen unter Verwendung des standardmäßigen Tabellenlayouts mit einer Spalte mit mehreren Zeilen auflistet. In diesem Beispiel wird der Name, die Kategorie und der Preis des Produkts mithilfe des folgenden Markups angezeigt:
<h4>Product Name</h4>
Available in the Category Name store for Price
In den vorherigen Beispielen haben wir erfahren, wie Daten an eine DataList gebunden werden, sodass ich diese Schritte schnell durchgehen werde. Öffnen Sie zunächst die RepeatColumnAndDirection.aspx Seite im DataListRepeaterBasics Ordner, und ziehen Sie eine DataList aus der Toolbox auf die Designer. Wählen Sie im Smarttag dataList eine neue ObjectDataSource aus, und konfigurieren Sie sie so, dass die Daten aus der ProductsBLL Klasse s-Methode GetProducts abgerufen werden. Wählen Sie dabei die Option (None) auf den Registerkarten INSERT, UPDATE und DELETE des Assistenten aus.
Nach dem Erstellen und Binden der neuen ObjectDataSource an die DataList erstellt Visual Studio automatisch eine ItemTemplate , die den Namen und den Wert für jedes Produktdatenfeld anzeigt. Passen Sie entweder ItemTemplate direkt über das deklarative Markup oder über die Option Vorlagen bearbeiten im Smarttag von DataList an, sodass das oben gezeigte Markup verwendet wird. Ersetzen Sie dabei den Text Produktname, Kategoriename und Preis durch Label-Steuerelemente, die die entsprechende Datenbindungssyntax verwenden, um ihren Text Eigenschaften Werte zuzuweisen. Nach dem Aktualisieren von ItemTemplatesollte das deklarative Markup ihrer Seite in etwa wie folgt aussehen:
<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>
Beachten Sie, dass ich einen Formatbezeichner in die Eval Datenbindungssyntax für eingefügt habe, die UnitPriceden zurückgegebenen Wert als Währung formatiert hat: Eval("UnitPrice", "{0:C}").
Nehmen Sie sich einen Moment Zeit, um Ihre Seite in einem Browser zu besuchen. Wie abbildung 2 zeigt, wird die DataList als einspaltige, mehrzeilenfähige Tabelle mit Produkten gerendert.
Abbildung 2: Standardmäßig wird die DataList als einspaltige tabelle mit mehreren Zeilen gerendert (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Schritt 2: Ändern der Layoutrichtung von DataList
Während das Standardverhalten für dataList darin besteht, die Elemente vertikal in einer einspaltigen tabelle mit mehreren Zeilen anzulegen, kann dieses Verhalten leicht über die DataList s-EigenschaftRepeatDirection geändert werden. Die RepeatDirection -Eigenschaft kann einen von zwei möglichen Werten akzeptieren: Horizontal oder Vertical (standard).
Durch Ändern der RepeatDirection Eigenschaft von in HorizontalVertical rendert die DataList ihre Datensätze in einer einzelnen Zeile und erstellt eine Spalte pro Datenquellenelement. Um diesen Effekt zu veranschaulichen, klicken Sie im Designer auf dataList, und ändern Sie dann im Eigenschaftenfenster die RepeatDirection -Eigenschaft von in VerticalHorizontal. Unmittelbar danach passt der Designer das Layout von DataList an, sodass eine einzeilene, mehrspaltige Schnittstelle erstellt wird (siehe Abbildung 3).
Abbildung 3: Die RepeatDirection -Eigenschaft gibt vor, wie die Richtung der DataList-Elemente angeordnet ist (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Bei der Anzeige kleiner Datenmengen kann eine einreihige, mehrspaltige Tabelle eine ideale Möglichkeit sein, die Bildschirmimmobilie zu maximieren. Für größere Datenmengen erfordert eine einzelne Zeile jedoch zahlreiche Spalten, wodurch die Elemente, die nicht auf den Bildschirm passen können, nach rechts verschoben werden. Abbildung 4 zeigt die Produkte, wenn sie in einer einzeilenigen DataList gerendert werden. Da es viele Produkte (über 80) gibt, muss der Benutzer weit nach rechts scrollen, um Informationen zu den einzelnen Produkten anzuzeigen.
Abbildung 4: Für ausreichend große Datenquellen erfordert eine DataList mit einer einzelnen Spalte horizontalen Bildlauf (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Schritt 3: Anzeigen von Daten in einer mehrspaltigen Tabelle mit mehreren Zeilen
Um eine mehrspaltige DataList mit mehreren Zeilen zu erstellen, müssen wir die RepeatColumns -Eigenschaft auf die Anzahl der anzuzeigenden Spalten festlegen. Standardmäßig ist die RepeatColumns -Eigenschaft auf 0 festgelegt, wodurch die DataList alle elemente in einer einzelnen Zeile oder Spalte anzeigt (abhängig vom Wert der RepeatDirection Eigenschaft).
In unserem Beispiel zeigen wir drei Produkte pro Tabellenzeile an. Legen Sie daher die RepeatColumns -Eigenschaft auf 3 fest. Nehmen Sie sich nach dieser Änderung einen Moment Zeit, um die Ergebnisse in einem Browser anzuzeigen. Wie Abbildung 5 zeigt, sind die Produkte jetzt in einer dreispaltigen, mehrzeilenfähigen Tabelle aufgeführt.
Abbildung 5: Drei Produkte werden pro Zeile angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Die RepeatDirection -Eigenschaft wirkt sich darauf aus, wie die Elemente in dataList angeordnet werden. Abbildung 5 zeigt die Ergebnisse, wobei die RepeatDirection -Eigenschaft auf Horizontalfestgelegt ist. Beachten Sie, dass die ersten drei Produkte Chai, Chang und Anissirup von links nach rechts, von oben nach unten angeordnet sind. Die nächsten drei Produkte (beginnend mit Chef Anton es Cajun Seasoning) erscheinen in einer Reihe unter den ersten drei. Wenn Sie die RepeatDirection -Eigenschaft wieder in ändern Vertical, werden diese Produkte jedoch wie in Abbildung 6 dargestellt von oben nach unten von links nach rechts festgelegt.
Abbildung 6: Hier sind die Produkte vertikal angeordnet (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Die Anzahl der Zeilen, die in der resultierenden Tabelle angezeigt werden, hängt von der Gesamtzahl der Datensätze ab, die an die DataList gebunden sind. Genau, es ist die Obergrenze der Gesamtzahl der Datenquellenelemente dividiert durch den RepeatColumns Eigenschaftswert. Da die Products Tabelle derzeit 84 Produkte enthält, die durch 3 teilbar sind, gibt es 28 Zeilen. Wenn die Anzahl der Elemente in der Datenquelle und der RepeatColumns Eigenschaftswert nicht teilbar sind, enthält die letzte Zeile oder Spalte leere Zellen. Wenn auf RepeatDirectionVerticalfestgelegt ist, enthält die letzte Spalte leere Zellen. Wenn RepeatDirectionHorizontalist, enthält die letzte Zeile die leeren Zellen.
Zusammenfassung
Die DataList listet die zugehörigen Elemente standardmäßig in einer einspaltigen tabelle mit mehreren Zeilen auf, die das Layout einer GridView mit einem einzelnen TemplateField imitiert. Obwohl dieses Standardlayout akzeptabel ist, können wir die Bildschirmumgebung maximieren, indem mehrere Datenquellenelemente pro Zeile angezeigt werden. Dazu müssen Sie einfach die DataList-Eigenschaft RepeatColumns auf die Anzahl der Spalten festlegen, die pro Zeile angezeigt werden sollen. Darüber hinaus kann die DataList-Eigenschaft RepeatDirection verwendet werden, um anzugeben, ob der Inhalt der mehrspaltigen, zeilenübergreifenden Tabelle horizontal von links nach rechts, von oben nach unten oder vertikal von oben nach unten, von links nach rechts angeordnet werden soll.
Zum Autor
Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.
Besonderer Dank an
Diese Tutorialreihe wurde von vielen hilfreichen Prüfern überprüft. Leitender Prüfer für dieses Tutorial war John Suru. Möchten Sie meine bevorstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.