Anzeigen von mehreren Datensätzen pro Zeile mit dem DataList-Steuerelement (VB)

Artikel
07/13/2023

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 beiden Tutorials gesehen haben, haben jeden Datensatz aus seiner Datenquelle als Zeile in einem einspaltigen HTML <table>gerendert. Dies ist zwar das Standardverhalten von DataList, aber es ist sehr einfach, die DataList-Anzeige so anzupassen, dass die Datenquellenelemente auf eine tabelle mit mehreren Spalten 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: Die DataList zeigt drei Produkte pro Zeile (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Indem mehrere Datenquellenelemente pro Zeile angezeigt werden, kann dataList den horizontalen Bildschirmraum 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 im Standardlayout einer einspaltigen Tabelle mit mehreren Zeilen auflistet. In diesem Beispiel wird der Name, die Kategorie und der Preis des Produkts mit dem folgenden Markup angezeigt:

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

Wir haben in früheren Beispielen gesehen, wie Daten an eine DataList gebunden werden, daher werde ich diese Schritte schnell durchgehen. Ö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 des DataList-Smarttags eine neue ObjectDataSource aus, und konfigurieren Sie sie so, dass die Daten aus der Methode der ProductsBLL Klasse GetProducts abgerufen werden. Wählen Sie die Option (Keine) 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 einen ItemTemplate , der 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 des DataList-Smarttags so an, dass das oben gezeigte Markup verwendet wird, und ersetzen Sie den Text Product Name, Category Name und Price durch Label-Steuerelemente, die die entsprechende Datenbindungssyntax verwenden, um ihren Text Eigenschaften Werte zuzuweisen. Nach dem Aktualisieren sollte ItemTemplatedas deklarative Markup ihrer Seite 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 eine einspaltige, mehrzeilenige Tabelle mit Produkten gerendert.

Abbildung 2: Standardmäßig wird die DataList als eine einspaltige Tabelle mit mehreren Zeilen gerendert (Klicken Sie hier, um das bild in voller Größe anzuzeigen).

Schritt 2: Ändern der Layoutrichtung der DataList

Während das Standardverhalten für dataList darin besteht, die Elemente vertikal in einer einspaltigen Tabelle mit mehreren Zeilen zu gestalten, kann dieses Verhalten leicht über die DataList-Eigenschaft RepeatDirectiongeä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 auf die DataList im Designer, und ändern Sie dann in der Eigenschaftenfenster die RepeatDirection Eigenschaft von in VerticalHorizontal. Unmittelbar danach passt der Designer das Layout der DataList an und erstellt eine einreihige, mehrspaltige Schnittstelle (siehe Abbildung 3).

Abbildung 3: Die RepeatDirection -Eigenschaft legt fest, wie die Richtung der DataList-Elemente angeordnet ist (Klicken Sie, 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, die in einer einzeilenigen DataList gerendert werden. Da es viele Produkte gibt (über 80), 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 horizontales Scrollen (klicken Sie, um das bild in voller Größe anzuzeigen)

Schritt 3: Anzeigen von Daten in einer tabelle mit mehreren Spalten und 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, werden die Produkte jetzt in einer dreispaltigen Tabelle mit mehreren Zeilen aufgeführt.

Abbildung 5: Drei Produkte werden pro Zeile angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Die RepeatDirection -Eigenschaft wirkt sich darauf aus, wie die Elemente in der DataList angeordnet werden. Abbildung 5 zeigt die Ergebnisse, bei denen die RepeatDirection -Eigenschaft auf festgelegt ist Horizontal. Beachten Sie, dass die ersten drei Produkte Chai, Chang und Anissirup von links nach rechts, von oben nach unten ausgelegt sind. Die nächsten drei Produkte (beginnend mit Chef Antons Cajun Seasoning) erscheinen in einer Reihe unter den ersten drei. Wenn Sie die RepeatDirection Eigenschaft zurück in Verticaländern, werden diese Produkte jedoch von oben nach unten, von links nach rechts, wie Abbildung 6 veranschaulicht.

Abbildung 6: Hier werden die Produkte vertikal angeordnet (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Die Anzahl der in der resultierenden Tabelle angezeigten Zeilen hängt von der Anzahl der an die DataList gebundenen Datensätze insgesamt ab. 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 RepeatDirection festgelegt Verticalist, enthält die letzte Spalte leere Zellen. Wenn RepeatDirection dies der Wert ist Horizontal, enthält die letzte Zeile die leeren Zellen.

Zusammenfassung

Die DataList listet ihre 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 Bildschirmimmobilien maximieren, indem mehrere Datenquellenelemente pro Zeile angezeigt werden. Hierzu 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 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 Stunden. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Besonderen 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 anstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.

Zurück Weiter

Share via