Anzeigen von Daten mit dem DataList- und Wiederholungssteuerelement (VB)
von Scott Mitchell
In den vorherigen Tutorials haben wir das GridView-Steuerelement verwendet, um Daten anzuzeigen. Beginnend mit diesem Tutorial befassen wir uns mit dem Erstellen gängiger Berichtsmuster mit den DataList- und Repeater-Steuerelementen, beginnend mit den Grundlagen der Anzeige von Daten mit diesen Steuerelementen.
Einführung
Wenn wir in allen Beispielen der letzten 28 Tutorials mehrere Datensätze aus einer Datenquelle anzeigen mussten, haben wir das GridView-Steuerelement aktiviert. GridView rendert eine Zeile für jeden Datensatz in der Datenquelle und zeigt die Datenfelder des Datensatzes in Spalten an. Während gridView zum Anzeigen, Durchblättern, Sortieren, Bearbeiten und Löschen von Daten macht, ist die Darstellung etwas schachtelig. Darüber hinaus ist das Markup, das für die GridView-Struktur verantwortlich ist, festgelegt, es enthält einen HTML-Code <table> mit einer Tabellenzeile (<tr>) für jeden Datensatz und eine Tabellenzelle (<td>) für jedes Feld.
Um die Darstellung und das gerenderte Markup beim Anzeigen mehrerer Datensätze besser anzupassen, bietet ASP.NET 2.0 die Steuerelemente DataList und Repeater (beide waren auch in ASP.NET Version 1.x verfügbar). Die DataList- und Repeater-Steuerelemente rendern ihren Inhalt mithilfe von Vorlagen anstelle von BoundFields, CheckBoxFields, ButtonFields usw. Wie gridView wird dataList als HTML <table>gerendert, ermöglicht jedoch die Anzeige mehrerer Datenquellendatensätze pro Tabellenzeile. Der Repeater hingegen rendert kein zusätzliches Markup als das, was Sie explizit angeben, und ist ein idealer Kandidat, wenn Sie eine präzise Kontrolle über das ausgegebene Markup benötigen.
In den nächsten Etwa-Dutzend-Tutorials befassen wir uns mit dem Erstellen gängiger Berichtsmuster mit den DataList- und Repeater-Steuerelementen, beginnend mit den Grundlagen der Anzeige von Daten mit diesen Steuerelementvorlagen. Wir erfahren, wie Sie diese Steuerelemente formatieren, wie Sie das Layout von Datenquellendatensätzen in der DataList ändern, gängige master/Details-Szenarien, Möglichkeiten zum Bearbeiten und Löschen von Daten, wie Datensätze ausgelagert werden usw.
Schritt 1: Hinzufügen der DataList- und Repeater-Tutorialwebseiten
Bevor wir mit diesem Tutorial beginnen, nehmen wir uns zunächst einen Moment Zeit, um die ASP.NET Seiten hinzuzufügen, die wir für dieses Tutorial und die nächsten Tutorials zum Anzeigen von Daten mithilfe von DataList und Repeater benötigen. Erstellen Sie zunächst einen neuen Ordner im Projekt mit dem Namen DataListRepeaterBasics. Fügen Sie als Nächstes die folgenden fünf ASP.NET Seiten zu diesem Ordner hinzu, wobei sie alle für die Verwendung der master-Seite Site.masterkonfiguriert sind:
Default.aspxBasics.aspxFormatting.aspxRepeatColumnAndDirection.aspxNestedControls.aspx
Abbildung 1: Erstellen eines Ordners DataListRepeaterBasics und Hinzufügen des Tutorials ASP.NET Pages
Öffnen Sie die Default.aspx Seite, und ziehen Sie das SectionLevelTutorialListing.ascx Benutzersteuerelement aus dem UserControls Ordner auf die Entwurfsoberfläche. Dieses Benutzersteuerelement, das wir im Tutorial Gestaltungsvorlagen und Websitenavigation erstellt haben, listet die Websiteübersicht auf und zeigt die Tutorials aus dem aktuellen Abschnitt in einer Aufzählung an.
Abbildung 2: Hinzufügen des SectionLevelTutorialListing.ascx Benutzersteuerelements zu (Klicken Sie hier, umDefault.aspx das Bild in voller Größe anzuzeigen)
Damit die Aufzählungsliste die Tutorials DataList und Repeater anzeigt, die wir erstellen werden, müssen wir sie der Websiteübersicht hinzufügen. Öffnen Sie die Web.sitemap Datei, und fügen Sie das folgende Markup nach dem Knotenknoten Add Custom Buttons (Hinzufügen von benutzerdefinierten Schaltflächen) hinzu:
<siteMapNode
title="Displaying Data with the DataList and Repeater"
description="Samples of Reports that Use the DataList and Repeater Controls"
url="~/DataListRepeaterBasics/Default.aspx" >
<siteMapNode
title="Basic Examples"
description="Examines the basics for displaying data using the
DataList and Repeater controls."
url="~/DataListRepeaterBasics/Basics.aspx" />
<siteMapNode
title="Formatting"
description="Learn how to format the DataList and the Web controls within
the DataList and Repeater's templates."
url="~/DataListRepeaterBasics/Formatting.aspx" />
<siteMapNode
title="Adjusting the DataList s Layout"
description="Illustrates how to alter the DataList's layout, showing
multiple data source records per table row."
url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
<siteMapNode
title="Nesting a Repeater within a DataList"
description="Learn how to nest a Repeater within the template of a DataList."
url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>
Abbildung 3: Aktualisieren der Websiteübersicht, um die neue ASP.NET Pages einzuschließen
Schritt 2: Anzeigen von Produktinformationen mit der DataList
Ähnlich wie bei FormView hängt die gerenderte Ausgabe des DataList-Steuerelements von Vorlagen ab und nicht von BoundFields, CheckBoxFields usw. Im Gegensatz zu FormView ist die DataList so konzipiert, dass sie einen Satz von Datensätzen anstelle eines solitären Datensatzes anzeigt. Beginnen wir dieses Tutorial mit einem Blick auf das Binden von Produktinformationen an eine DataList. Öffnen Sie zunächst die Basics.aspx Seite im DataListRepeaterBasics Ordner. Ziehen Sie als Nächstes eine DataList aus der Toolbox auf die Designer. Wie abbildung 4 veranschaulicht, zeigt die Designer vor dem Angeben der DataList-Vorlagen diese als graues Feld an.
Abbildung 4: Ziehen Sie die DataList aus der Toolbox auf die Designer (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Fügen Sie über das Smarttag dataList eine neue ObjectDataSource hinzu, und konfigurieren Sie es für die Verwendung der ProductsBLL Klasse s-Methode GetProducts . Da wir in diesem Tutorial eine schreibgeschützte DataList erstellen, legen Sie die Dropdownliste auf den Registerkarten INSERT, UPDATE und DELETE des Assistenten auf (Keine) fest.
Abbildung 5: Opt to Create a New ObjectDataSource (Click to view full-size image)
Abbildung 6: Konfigurieren der ObjectDataSource für die Verwendung der ProductsBLL -Klasse (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Abbildung 7: Abrufen von Informationen zu allen Produkten mithilfe der GetProducts -Methode (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Nach dem Konfigurieren der ObjectDataSource und der Zuordnung zur DataList über sein Smarttag erstellt Visual Studio automatisch ein ItemTemplate in der DataList, das den Namen und den Wert jedes von der Datenquelle zurückgegebenen Datenfelds anzeigt (siehe Markup unten). Diese Standarddarstellung ItemTemplate ist identisch mit der der Vorlagen, die automatisch erstellt werden, wenn eine Datenquelle über die Designer an formView gebunden wird.
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<ItemTemplate>
ProductID: <asp:Label ID="ProductIDLabel" runat="server"
Text='<%# Eval("ProductID") %>' /><br />
ProductName: <asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>' /><br />
SupplierID: <asp:Label ID="SupplierIDLabel" runat="server"
Text='<%# Eval("SupplierID") %>' /><br />
CategoryID: <asp:Label ID="CategoryIDLabel" runat="server"
Text='<%# Eval("CategoryID") %>'/><br />
QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
Text='<%# Eval("QuantityPerUnit") %>' /><br />
UnitPrice: <asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice") %>' /><br />
UnitsInStock: <asp:Label ID="UnitsInStockLabel" runat="server"
Text='<%# Eval("UnitsInStock") %>' /><br />
UnitsOnOrder: <asp:Label ID="UnitsOnOrderLabel" runat="server"
Text='<%# Eval("UnitsOnOrder") %>' /><br />
ReorderLevel: <asp:Label ID="ReorderLevelLabel" runat="server"
Text='<%# Eval("ReorderLevel") %>' /><br />
Discontinued: <asp:Label ID="DiscontinuedLabel" runat="server"
Text='<%# Eval("Discontinued") %>' /><br />
CategoryName: <asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Eval("CategoryName") %>' /><br />
SupplierName: <asp:Label ID="SupplierNameLabel" runat="server"
Text='<%# Eval("SupplierName") %>' /><br />
<br />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>
Hinweis
Denken Sie daran, dass Visual Studio beim Binden einer Datenquelle an ein FormView-Steuerelement über das Smarttag von FormView ein ItemTemplate, InsertItemTemplateund EditItemTemplateerstellt hat. Mit der DataList wird jedoch nur ein ItemTemplate erstellt. Dies liegt daran, dass dataList nicht über die gleiche integrierte Bearbeitungs- und Einfügeunterstützung verfügt, die von FormView angeboten wird. Die DataList enthält Bearbeitungs- und Löschereignisse, und Bearbeitungs- und Löschunterstützung kann mit etwas Code hinzugefügt werden, aber es gibt keine einfache sofort einsatzbereite Unterstützung wie bei FormView. In einem zukünftigen Tutorial erfahren Sie, wie Sie die Unterstützung für das Bearbeiten und Löschen von DataList einschließen.
Lassen Sie uns einen Moment zeit, um das Erscheinungsbild dieser Vorlage zu verbessern. Anstatt alle Datenfelder anzuzeigen, zeigen wir nur den Produktnamen, den Lieferanten, die Kategorie, die Menge pro Einheit und den Preis pro Einheit an. Darüber hinaus zeigen wir den Namen in einer <h4> Überschrift an und legen die verbleibenden Felder mit einem <table> unter der Überschrift an.
Um diese Änderungen vorzunehmen, können Sie entweder die Vorlagenbearbeitungsfunktionen im Designer über das Smarttag dataList auf den Link Vorlagen bearbeiten klicken, oder Sie können die Vorlage manuell über die deklarative Syntax der Seite ändern. Wenn Sie die Option Vorlagen bearbeiten in der Designer verwenden, stimmt ihr resultierendes Markup möglicherweise nicht genau mit dem folgenden Markup überein, aber wenn sie über einen Browser angezeigt wird, sollte der Screenshot in Abbildung 8 sehr ähnlich aussehen.
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<ItemTemplate>
<h4><asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>' /></h4>
<table border="0">
<tr>
<td class="ProductPropertyLabel">Category:</td>
<td><asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Eval("CategoryName") %>' /></td>
<td class="ProductPropertyLabel">Supplier:</td>
<td><asp:Label ID="SupplierNameLabel" runat="server"
Text='<%# Eval("SupplierName") %>' /></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Qty/Unit:</td>
<td><asp:Label ID="QuantityPerUnitLabel" runat="server"
Text='<%# Eval("QuantityPerUnit") %>' /></td>
<td class="ProductPropertyLabel">Price:</td>
<td><asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Hinweis
Im obigen Beispiel werden Label Web-Steuerelemente verwendet, deren Text Eigenschaft der Wert der Datenbindungssyntax zugewiesen wird. Alternativ hätten wir die Bezeichnungen ganz weglassen und nur die Datenbindungssyntax eingeben können. Das heißt, anstatt zu verwenden <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> , hätten wir stattdessen die deklarative Syntax <%# Eval("CategoryName") %>verwenden können.
Das Verlassen der Label Web-Steuerelemente bietet jedoch zwei Vorteile. Erstens bietet es eine einfachere Möglichkeit zum Formatieren der Daten basierend auf den Daten, wie wir im nächsten Tutorial sehen werden. Zweitens zeigt die Option Vorlagen bearbeiten im Designer keine deklarative Datenbindungssyntax an, die außerhalb eines Websteuerelements angezeigt wird. Stattdessen soll die Benutzeroberfläche Vorlagen bearbeiten das Arbeiten mit statischem Markup und Websteuerelementen vereinfachen und geht davon aus, dass alle Datenbindungen über das Dialogfeld Datenbindung bearbeiten erfolgen, auf das über die Smarttags für Websteuerelemente zugegriffen werden kann.
Daher ziehe ich bei der Arbeit mit dataList, die die Möglichkeit bietet, die Vorlagen über die Designer zu bearbeiten, die Verwendung von Label Web-Steuerelementen vor, damit der Inhalt über die Benutzeroberfläche Vorlagen bearbeiten zugänglich ist. Wie wir in Kürze sehen werden, erfordert der Repeater, dass der Inhalt der Vorlage aus der Quellansicht bearbeitet wird. Daher werde ich beim Erstellen der Repeater-Vorlagen häufig die Label Web-Steuerelemente weglassen, es sei denn, ich weiß, dass ich die Darstellung des datengebundenen Texts basierend auf programmgesteuerter Logik formatieren muss.
Abbildung 8: Jede Produktausgabe wird mithilfe der DataLists ItemTemplate gerendert (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Schritt 3: Verbessern der Darstellung der DataList
Wie gridView bietet dataList eine Reihe von stilbezogenen Eigenschaften, zFont. B. , ForeColor, BackColor, CssClass, , ItemStyleAlternatingItemStyle, SelectedItemStyle, usw. Bei der Arbeit mit den GridView- und DetailsView-Steuerelementen haben wir Skin-Dateien im DataWebControls Design erstellt, die die CssClass Eigenschaften für diese beiden Steuerelemente und die CssClass -Eigenschaft für mehrere ihrer Untereigenschaften (RowStyle, HeaderStyleusw.) vordefiniert haben. Lassen Sie uns dasselbe für die DataList tun.
Wie im Tutorial Anzeigen von Daten mit objectDataSource erläutert, gibt eine Skin-Datei die standardmäßigen darstellungsbezogenen Eigenschaften für ein Websteuerelement an. ein Design ist eine Sammlung von Skin-, CSS-, Bild- und JavaScript-Dateien, die ein bestimmtes Aussehen und Verhalten für eine Website definieren. Im Tutorial Anzeigen von Daten mit objectDataSource haben wir ein DataWebControls Design (das als Ordner innerhalb des Ordners implementiert ist) erstellt, das App_Themes derzeit zwei Skin-Dateien enthält : GridView.skin und DetailsView.skin. Fügen Sie eine dritte Skin-Datei hinzu, um die vordefinierten Stileinstellungen für dataList anzugeben.
Klicken Sie zum Hinzufügen einer Skin-Datei mit der rechten Maustaste auf den App_Themes/DataWebControls Ordner, wählen Sie Neues Element hinzufügen aus, und wählen Sie in der Liste die Option Skin-Datei aus. Nennen Sie die Datei DataList.skin.
Abbildung 9: Erstellen einer neuen Skindatei namens DataList.skin (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Verwenden Sie das folgende Markup für die DataList.skin Datei:
<asp:DataList runat="server" CssClass="DataWebControlStyle">
<AlternatingItemStyle CssClass="AlternatingRowStyle" />
<ItemStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<FooterStyle CssClass="FooterStyle" />
<SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>
Diese Einstellungen weisen die gleichen CSS-Klassen den entsprechenden DataList-Eigenschaften zu, wie sie mit den GridView- und DetailsView-Steuerelementen verwendet wurden. Die hier DataWebControlStyleverwendeten CSS-Klassen , AlternatingRowStyle, RowStyleusw. sind in der Styles.css Datei definiert und wurden in vorherigen Tutorials hinzugefügt.
Durch das Hinzufügen dieser Skin-Datei wird die Darstellung der DataList im Designer aktualisiert (Möglicherweise müssen Sie die Designer Ansicht aktualisieren, um die Auswirkungen der neuen Skin-Datei anzuzeigen. Wählen Sie im Menü Ansicht die Option Aktualisieren aus). Wie Abbildung 10 zeigt, weist jedes abwechselnde Produkt eine hell rosa Hintergrundfarbe auf.
Abbildung 10: Erstellen einer neuen Skindatei namens DataList.skin (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Schritt 4: Untersuchen der DataList-Vorlagen
Zusätzlich zu ItemTemplateunterstützt DataList sechs weitere optionale Vorlagen:
HeaderTemplateWenn angegeben, fügt der Ausgabe eine Headerzeile hinzu und wird zum Rendern dieser Zeile verwendet.AlternatingItemTemplatewird zum Rendern von abwechselnden Elementen verwendet.SelectedItemTemplatewird verwendet, um das ausgewählte Element zu rendern; Das ausgewählte Element ist das Element, dessen Index der DataList-EigenschaftSelectedIndexentspricht.EditItemTemplatewird verwendet, um das zu bearbeitende Element zu rendernSeparatorTemplatewenn angegeben, fügt ein Trennzeichen zwischen jedem Element hinzu und wird zum Rendern dieses Trennzeichens verwendet.FooterTemplate– falls angegeben, fügt der Ausgabe eine Fußzeile hinzu und wird zum Rendern dieser Zeile verwendet.
Wenn Sie oder HeaderTemplateFooterTemplateangeben, fügt die DataList der gerenderten Ausgabe eine zusätzliche Kopf- oder Fußzeile hinzu. Wie bei den Kopf- und Fußzeilen von GridView sind die Kopf- und Fußzeile in einer DataList nicht an Daten gebunden. Daher gibt jede Datenbindungssyntax in oder, die HeaderTemplateFooterTemplate versucht, auf gebundene Daten zuzugreifen, eine leere Zeichenfolge zurück.
Hinweis
Wie wir im Tutorial Anzeigen von Zusammenfassungsinformationen im GridView-Footer-Tutorial gezeigt haben, unterstützen die Header- und Fußzeilen die Datenbindungssyntax nicht, aber datenspezifische Informationen können direkt aus dem GridView-Ereignishandler RowDataBound in diese Zeilen eingefügt werden. Dieses Verfahren kann sowohl zum Berechnen von Gesamtergebnissen als auch anderen Informationen aus den an das Steuerelement gebundenen Daten sowie zum Zuweisen dieser Informationen zur Fußzeile verwendet werden. Dieses Konzept kann auch auf die DataList- und Repeater-Steuerelemente angewendet werden. Der einzige Unterschied besteht darin, dass für dataList und Repeater ein Ereignishandler für das ItemDataBound Ereignis (anstelle des Ereignisses RowDataBound ) erstellt wird.
In unserem Beispiel wird der Titel Produktinformationen oben in den DataList-Ergebnissen in einer <h3> Überschrift angezeigt. Fügen Sie dazu ein mit dem entsprechenden Markup hinzu HeaderTemplate . In der Designer kann dies erreicht werden, indem Sie im Smarttag des DataList-Smarttags auf den Link Vorlagen bearbeiten klicken, in der Dropdownliste die Kopfzeilenvorlage auswählen und den Text eingeben, nachdem Sie die Option Überschrift 3 aus der Dropdownliste Formatvorlage ausgewählt haben (siehe Abbildung 11).
Abbildung 11: Hinzufügen eines HeaderTemplate mit den Textproduktinformationen (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Alternativ kann dies deklarativ hinzugefügt werden, indem Sie das folgende Markup in die <asp:DataList> Tags eingeben:
<HeaderTemplate>
<h3>Product Information</h3>
</HeaderTemplate>
Um ein wenig Platz zwischen den einzelnen Produkteinträgen hinzuzufügen, fügen sie eine SeparatorTemplate hinzu, die eine Zeile zwischen den einzelnen Abschnitten enthält. Das horizontale Regeltag (<hr>) fügt eine solche Trennlinie hinzu. Erstellen Sie das SeparatorTemplate so, dass es über das folgende Markup verfügt:
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
Hinweis
Wie das HeaderTemplate und FooterTemplatesist der SeparatorTemplate nicht an einen Datensatz aus der Datenquelle gebunden und kann daher nicht direkt auf die Datenquellendatensätze zugreifen, die an die DataList gebunden sind.
Nachdem Sie diese Ergänzung gemacht haben, sollte sie beim Anzeigen der Seite über einen Browser ähnlich wie Abbildung 12 aussehen. Notieren Sie sich die Kopfzeile und die Zeile zwischen den einzelnen Produktlisten.
Abbildung 12: DataList enthält eine Headerzeile und eine horizontale Regel zwischen den einzelnen Produktauflistungen (Klicken, um das bild in voller Größe anzuzeigen)
Schritt 5: Rendern eines bestimmten Markups mit dem Repeater-Steuerelement
Wenn Sie beim Aufrufen des DataList-Beispiels aus Abbildung 12 eine Ansicht/Quelle in Ihrem Browser ausführen, sehen Sie, dass dataList einen HTML-Code <table> ausgibt, der eine Tabellenzeile (<tr>) mit einer einzelnen Tabellenzelle (<td>) für jedes an dataList gebundene Element enthält. Diese Ausgabe ist in der Tat identisch mit der Ausgabe, die von einer GridView mit einem einzelnen TemplateField ausgegeben würde. Wie wir in einem zukünftigen Tutorial sehen werden, ermöglicht dataList eine weitere Anpassung der Ausgabe, sodass wir mehrere Datenquellendatensätze pro Tabellenzeile anzeigen können.
Was ist, wenn Sie keinen HTML-Code <table>ausgeben möchten? Für die vollständige und vollständige Kontrolle über das Markup, das von einem Datenwebsteuerelement generiert wird, müssen wir das Repeater-Steuerelement verwenden. Wie die DataList wird auch der Repeater basierend auf Vorlagen erstellt. Der Repeater bietet jedoch nur die folgenden fünf Vorlagen:
HeaderTemplatefalls angegeben, fügt das angegebene Markup vor den Elementen hinzu.ItemTemplateWird zum Rendern von Elementen verwendetAlternatingItemTemplatewenn angegeben, wird zum Rendern alternierender Elemente verwendet.SeparatorTemplatewenn angegeben, fügt das angegebene Markup zwischen den einzelnen Elementen hinzu.FooterTemplate– falls angegeben, fügt das angegebene Markup nach den Elementen hinzu.
In ASP.NET 1.x wurde das Repeater-Steuerelement häufig verwendet, um eine Aufzählung anzuzeigen, deren Daten aus einer Datenquelle stammen. In einem solchen Fall würde das HeaderTemplate und FooterTemplates die öffnenden und schließenden <ul> Tags enthalten, während das ItemTemplate Elemente mit datenbindender Syntax enthalten <li> würde. Dieser Ansatz kann weiterhin in ASP.NET 2.0 verwendet werden, wie wir in zwei Beispielen im Tutorial Gestaltungsvorlagen und Websitenavigation gezeigt haben:
- Auf der
Site.mastermaster Seite wurde ein Repeater verwendet, um eine Aufzählung der Inhalte der obersten Websiteübersicht anzuzeigen (Grundlegende Berichterstellung, Filterung von Berichten, angepasste Formatierung usw.). Ein anderer geschachtelter Repeater wurde verwendet, um die untergeordneten Abschnitte der abschnitte der obersten Ebene anzuzeigen. - In
SectionLevelTutorialListing.ascxwurde ein Repeater verwendet, um eine Aufzählung der untergeordneten Abschnitte des aktuellen Websiteübersichtsabschnitts anzuzeigen.
Hinweis
ASP.NET 2.0 führt das neue BulletedList-Steuerelement ein, das an ein Datenquellensteuerelement gebunden werden kann, um eine einfache Aufzählung anzuzeigen. Mit dem BulletedList-Steuerelement müssen wir keinen listenbezogenen HTML-Code angeben. Stattdessen geben wir einfach das Datenfeld an, das als Text für jedes Listenelement angezeigt werden soll.
Der Repeater dient als Websteuerelement zum Erfassen aller Daten. Wenn kein Steuerelement vorhanden ist, das das erforderliche Markup generiert, kann das Repeater-Steuerelement verwendet werden. Um die Verwendung des Repeaters zu veranschaulichen, lassen Sie die Liste der Kategorien über der in Schritt 2 erstellten DataList für Produktinformationen anzeigen. Insbesondere lassen Sie die Kategorien in einem einzeilenigen HTML-Code <table> anzeigen, wobei jede Kategorie als Spalte in der Tabelle angezeigt wird.
Um dies zu erreichen, ziehen Sie zunächst ein Repeater-Steuerelement aus der Toolbox auf den Designer oberhalb der Product Information DataList. Wie bei der DataList wird der Repeater zunächst als graues Feld angezeigt, bis seine Vorlagen definiert wurden.
Abbildung 13: Hinzufügen eines Repeaters zum Designer (Klicken Sie hier, um das bild in voller Größe anzuzeigen)
Es gibt nur eine Option im Smarttag des Repeaters: Wählen Sie Datenquelle aus. Wählen Sie aus, um eine neue ObjectDataSource zu erstellen, und konfigurieren Sie sie für die Verwendung der CategoriesBLL Methode s GetCategories der Klasse.
Abbildung 14: Erstellen einer neuen ObjectDataSource (Klicken Sie hier, um das bild in voller Größe anzuzeigen)
Abbildung 15: Konfigurieren der ObjectDataSource für die Verwendung der CategoriesBLL -Klasse (Klicken Sie hier, um das bild in voller Größe anzuzeigen)
Abbildung 16: Abrufen von Informationen zu allen Kategorien mithilfe der GetCategories -Methode (Klicken Sie hier, um das bild in voller Größe anzuzeigen)
Im Gegensatz zur DataList erstellt Visual Studio nicht automatisch eine ItemTemplate für den Repeater, nachdem er an eine Datenquelle gebunden wurde. Darüber hinaus können die Vorlagen des Repeaters nicht über die Designer konfiguriert werden und müssen deklarativ angegeben werden.
Um die Kategorien als einzelne Zeile <table> mit einer Spalte für jede Kategorie anzuzeigen, muss der Repeater Markup ähnlich dem folgenden ausgeben:
<table>
<tr>
<td>Category 1</td>
<td>Category 2</td>
...
<td>Category N</td>
</tr>
</table>
Da der <td>Category X</td> Text der Teil ist, der wiederholt wird, wird dies in der ItemTemplate des Repeaters angezeigt. Das Markup, das vor dem <table><tr> -- angezeigt wird, wird in der HeaderTemplate platziert, während das endende Markup </tr></table> - in der FooterTemplateplatziert wird. Um diese Vorlageneinstellungen einzugeben, wechseln Sie zum deklarativen Teil der ASP.NET Seite, indem Sie in der linken unteren Ecke auf die Schaltfläche Quelle klicken, und geben Sie die folgende Syntax ein:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
EnableViewState="False">
<HeaderTemplate>
<table>
<tr>
</HeaderTemplate>
<ItemTemplate>
<td><%# Eval("CategoryName") %></td>
</ItemTemplate>
<FooterTemplate>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
Der Repeater gibt das präzise Markup aus, wie in seinen Vorlagen angegeben, nicht mehr, nicht weniger. Abbildung 17 zeigt die Ausgabe des Repeaters, wenn sie über einen Browser angezeigt wird.
Abbildung 17: Ein Single-Row HTML-Listen <table> jede Kategorie in einer separaten Spalte (Klicken, um das bild in voller Größe anzuzeigen)
Schritt 6: Verbessern der Darstellung des Repeaters
Da der Repeater genau das Markup ausgibt, das von seinen Vorlagen angegeben wird, sollte es nicht überraschen, dass es keine stilbezogenen Eigenschaften für den Repeater gibt. Um die Darstellung des vom Repeater generierten Inhalts zu ändern, müssen wir die benötigten HTML- oder CSS-Inhalte manuell direkt zu den Vorlagen des Repeaters hinzufügen.
In unserem Beispiel haben wir alternative Hintergrundfarben für die Kategoriespalten, wie bei den wechselnden Zeilen in der DataList. Um dies zu erreichen, müssen wir die RowStyle CSS-Klasse jedem Repeater-Element und der AlternatingRowStyle CSS-Klasse jedem wechselnden Repeater-Element über die ItemTemplate Vorlagen und AlternatingItemTemplate zuweisen, wie so:
<ItemTemplate>
<td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
<td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>
Fügen Sie der Ausgabe auch eine Kopfzeile mit dem Text Product Categories hinzu. Da wir nicht wissen, wie viele Spalten unsere resultierenden <table> Spalten umfassen werden, besteht die einfachste Möglichkeit zum Generieren einer Headerzeile, die garantiert alle Spalten umfasst, darin, zwei<table> s zu verwenden. Die erste <table> enthält zwei Zeilen, die Kopfzeile und eine Zeile, die die zweite, einzelne Zeile <table> enthält, die eine Spalte für jede Kategorie im System enthält. Das heißt, wir möchten das folgende Markup ausgeben:
<table>
<tr>
<th>Product Categories</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>Category 1</td>
<td>Category 2</td>
...
<td>Category N</td>
</tr>
</table>
</td>
</tr>
</table>
Die folgenden HeaderTemplate Und FooterTemplate ergeben das gewünschte Markup:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
EnableViewState="False">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<th class="HeaderStyle">Product Categories</th>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0">
<tr>
</HeaderTemplate>
<ItemTemplate>
<td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
<td class="AlternatingRowStyle">
<%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>
<FooterTemplate>
</tr>
</table>
</td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
Abbildung 18 zeigt den Repeater, nachdem diese Änderungen vorgenommen wurden.
Abbildung 18: Die Kategoriespalten Alternativ in Hintergrundfarbe und enthält eine Kopfzeile (klicken, um das bild in voller Größe anzuzeigen)
Zusammenfassung
Während das GridView-Steuerelement das Anzeigen, Bearbeiten, Löschen, Sortieren und Durchblättern von Daten vereinfacht, ist die Darstellung sehr schachtelig und rasterartig. Wenn Sie mehr Kontrolle über die Darstellung haben möchten, müssen Sie entweder das DataList-Steuerelement oder das Repeater-Steuerelement verwenden. Beide Steuerelemente zeigen einen Satz von Datensätzen mithilfe von Vorlagen anstelle von BoundFields, CheckBoxFields usw. an.
DataList wird als HTML gerendert <table> , der standardmäßig jeden Datenquellendatensatz in einer einzelnen Tabellenzeile anzeigt, genau wie eine GridView mit einem einzelnen TemplateField. Wie wir in einem zukünftigen Tutorial sehen werden, lässt die DataList jedoch die Anzeige mehrerer Datensätze pro Tabellenzeile zu. Der Repeater gibt dagegen streng das markup aus, das in seinen Vorlagen angegeben ist. Es fügt kein zusätzliches Markup hinzu und wird daher häufig verwendet, um Daten in anderen HTML-Elementen als einem <table> anzuzeigen (z. B. in einer Aufzählungsliste).
DataList und Repeater bieten zwar mehr Flexibilität bei der gerenderten Ausgabe, aber es fehlen viele der integrierten Features in GridView. Wie wir in den kommenden Tutorials untersuchen werden, können einige dieser Features ohne großen Aufwand wieder eingesteckt werden. Beachten Sie jedoch, dass die Verwendung von DataList oder Repeater anstelle von GridView die Features einschränken kann, die Sie verwenden können, ohne diese Features selbst implementieren zu müssen.
Viel Spaß beim Programmieren!
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. Leitende Gutachter für dieses Tutorial waren Yaakov Ellis, Liz Shulok, Randy Schmidt und Stacy Park. Möchten Sie meine anstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für