Exemplarische Vorgehensweise: Anzeigen und Formatieren von Daten mit dem DataList-Webserversteuerelement

Aktualisiert: November 2007

Eine übliche Aufgabe ist die Anzeige von Daten auf Webseiten - genau genommen, das Erstellen von Datenberichten. In dieser exemplarischen Vorgehensweise arbeiten Sie mit dem DataList-Steuerelement, mit dem Sie Freiformlayouts für Datensätze erstellen können, die Sie auf einer ASP.NET-Webseite anzeigen.

Im Rahmen dieser exemplarischen Vorgehensweise erhalten Sie Informationen zu folgenden Vorgängen:

• Hinzufügen eines DataList-Steuerelements und Verwenden von Vorlagen zum Erstellen eines Layouts der im DataList-Steuerelement angezeigten Daten.

• Binden des DataList-Steuerelements an eine Datenquelle.

• Hinzufügen eines untergeordneten Steuerelements und von Teilen des Codes zum DataList-Steuerelement, um Daten in einer Master-Detail-Beziehung anzuzeigen.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

• Microsoft Visual Web Developer (Visual Studio).

• Zugriff auf die Northwind-Datenbank in SQL Server. Informationen über das Herunterladen und Installieren der SQL Server-Beispieldatenbank Northwind finden Sie auf der Microsoft SQL Server-Website unter Installing Sample Databases.

  Hinweis:
  Wenden Sie sich an den Serveradministrator, wenn Sie Informationen zur Anmeldung an dem Computer benötigen, auf dem SQL Server ausgeführt wird.

• Microsoft Data Access Components (MDAC), Version 2.7 oder höher.

  Wenn Sie Microsoft Windows XP oder Windows Server 2003 verwenden, verfügen Sie bereits über MDAC 2.7. Wenn Sie jedoch Microsoft Windows 2000 verwenden, müssen Sie möglicherweise die bereits auf dem Computer installierte Version von MDAC aktualisieren. Weitere Informationen finden Sie unter "Microsoft Data Access Components (MDAC) Installation" in der MSDN Library.

Erstellen der Website

Erstellen Sie eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

1. Öffnen Sie Visual Web Developer.

2. Klicken Sie im Menü Datei auf Neu, und klicken Sie anschließend auf Website. Wenn Sie Visual Web Developer Express verwenden, klicken Sie im Menü Datei auf Neue Website.

   Das Dialogfeld Neue Website wird angezeigt.

3. Wählen Sie unter Von Visual Studio installierte Vorlagen die Option ASP.NET-Website aus.

4. Wählen Sie im Feld Speicherort die Option Dateisystem aus, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website aufbewahren möchten.

   Geben Sie z. B. den Ordnernamen C:\WebSites\FormatDataList ein.

5. Klicken Sie in der Liste Sprachen auf die Programmiersprache, in der Sie arbeiten möchten.

   Die gewählte Programmiersprache wird zur Standardsprache für die Website. Sie können jedoch die Programmiersprache für jede Seite einzeln festlegen.

6. Klicken Sie auf OK.

   Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Hinzufügen eines DataList-Steuerelements

Im ersten Teil dieser exemplarischen Vorgehensweise fügen Sie ein DataList-Steuerelement hinzu und konfigurieren dann seine Datenquelle.

So können Sie ein DataList-Steuerelement hinzufügen und konfigurieren, um Daten in einem Raster anzuzeigen

1. Wechseln Sie in die Entwurfsansicht.

2. Ziehen Sie in der Toolbox aus der Gruppe Daten ein DataList-Steuerelement auf die Seite.

3. Klicken Sie mit der rechten Maustaste auf das DataList-Steuerelement, und klicken Sie dann auf Smarttag anzeigen.

4. Klicken Sie im Menü DataList-Aufgaben in der Liste Datenquelle auswählen auf Neue Datenquelle.

   Der Assistent Konfigurieren von Datenquellen wird angezeigt.

5. Klicken Sie auf Datenbank.

   Dies gibt an, dass Sie Daten aus einer Datenbank abrufen möchten, die SQL-Anweisungen unterstützt. (Dies schließt SQL Server und andere OLE DB-kompatible Datenbanken ein.)

6. Im Feld ID für Datenquelle angeben wird ein Standardname für ein Datenquellen-Steuerelement (SqlDataSource1) angezeigt. Sie können diesen Namen beibehalten.

7. Klicken Sie auf OK.

   Der Assistent zum Konfigurieren von Datenquellen zeigt eine Seite an, auf der Sie eine Verbindung erstellen können.

8. Klicken Sie auf Neue Verbindung.

   • Wenn die Seite Datenquelle auswählen angezeigt wird, wählen Sie in der Liste Datenquelle den Typ der zu verwendenden Datenquelle aus. Für diese exemplarische Vorgehensweise ist der Datenquellentyp Microsoft SQL Server. Klicken Sie in der Liste Datenanbieter auf .NET Framework-Datenanbieter für SQL Server, und klicken Sie danach auf Weiter.

   Die Seite Verbindung hinzufügen wird angezeigt.

9. Geben Sie auf der Seite Verbindung hinzufügen im Textfeld Servername den Namen des Computers ein, auf dem die SQL Server-Datenbank ausgeführt wird.

10. Wählen Sie als Anmeldeinformationen die passende Option für den Zugriff auf den Computer aus, auf dem die SQL Server-Datenbank ausgeführt wird (integrierte Sicherheit oder bestimmte ID und Kennwort), und geben Sie, wenn erforderlich, einen Benutzernamen und ein Kennwort ein.

11. Aktivieren Sie das Kontrollkästchen Kennwort speichern.

12. Klicken Sie auf die Schaltfläche Datenbanknamen auswählen oder eingeben aus, und geben Sie dann Northwind ein.

13. Klicken Sie auf Testverbindung, und wenn Sie sicher sind, dass sie funktioniert, klicken Sie auf OK.

    Der Assistent zum Konfigurieren von Datenquellen wird mit den eingetragenen Verbindungsinformationen angezeigt.

14. Klicken Sie auf Next.

    Der Assistent zum Konfigurieren von Datenquellen zeigt eine Seite an, auf der Sie die Verbindungszeichenfolge in der Konfigurationsdatei speichern können. Das Speichern der Verbindungszeichenfolge in der Konfigurationsdatei hat zwei Vorteile:

    • Es ist sicherer als das Speichern auf der Seite.

    • Sie können die gleiche Verbindungszeichenfolge auf mehreren Seiten wiederverwenden.

15. Vergewissern Sie sich, dass das Kontrollkästchen Ja, Verbindung speichern unter aktiviert ist, und klicken Sie dann auf Weiter. Sie können die Standardverbindungszeichenfolge beibehalten.

    Der Assistent zum Konfigurieren von Datenquellen zeigt eine Seite an, auf der Sie angeben können, welche Daten Sie aus der Datenbank abrufen möchten.

16. Vergewissern Sie sich, dass Spalten von Tabelle oder Ansicht angeben ausgewählt ist.

17. Klicken Sie in der Liste Name auf Kategorien.

18. Aktivieren Sie unter Spalten die Kontrollkästchen CategoryID und CategoryName.

    Der Assistent zum Konfigurieren von Datenquellen zeigt die SQL-Anweisung an, die Sie in einem Feld im unteren Bereich der Seite erstellen.

    Hinweis:
    Im Assistenten zum Konfigurieren von Datenquellen können Sie die Auswahlkriterien (eine WHERE-Klausel) und andere SQL-Abfrageoptionen angeben. In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine einfache Anweisung ohne Auswahl- oder Sortieroptionen.

19. Klicken Sie auf Next.

20. Klicken Sie auf Testabfrage, um sicherzustellen, dass Sie die von Ihnen gewünschten Daten abrufen.

21. Klicken Sie auf Fertig stellen.

    Der Assistent zum Konfigurieren von Datenquellen wird geschlossen, und Sie kehren zum SqlDataSource-Steuerelement zurück. Wenn Sie die Eigenschaften für das SqlDataSource-Steuerelement betrachten, können Sie sehen, dass der Assistent zum Konfigurieren von Datenquellen Werte für die ConnectionString-Eigenschaft und für die SelectQuery-Eigenschaft erstellt hat. Selbst wenn in den Eigenschaften in Visual Web Developer die vollständige Verbindungszeichenfolge angezeigt wird, wird nur der Bezeichner für die Verbindungszeichenfolge auf der Seite gespeichert (in diesem Fall, NorthwindConnectionString).

Formatieren des Layouts des DataList-Steuerelements

Zu diesem Zeitpunkt gibt es auf der Seite ein DataList-Steuerelement mit einem Standardlayout für Informationen aus der Kategorientabelle. Der Vorteil des DataList-Steuerelements liegt darin, dass Sie ein Freiformlayout für die Daten erstellen können. In diesem Abschnitt arbeiten Sie mit einer Vorlage und konfigurieren diese mit Text und Steuerelementen zum Anpassen der Datenanzeige.

So formatieren Sie das Layout im DataList-Steuerelement

1. Klicken Sie mit der rechten Maustaste auf das DataList-Steuerelement, klicken Sie auf Vorlage bearbeiten, und klicken Sie dann auf Elementvorlagen.

   Das DataList-Steuerelement schaltet in den Vorlagenbearbeitungsmodus um und zeigt Vorlagenfelder für diese Vorlagen an:

   • ItemTemplate enthält den Text und die Steuerelemente, die standardmäßig im DataList-Steuerelement angezeigt werden.

   • AlternatingItemTemplate ist eine optionale Vorlage, in der Sie ein Layout erstellen können, das für jeden anderen Datensatz verwendet wird. In der Regel ähnelt die AlternatingItemTemplate-Eigenschaft der ItemTemplate-Eigenschaft, aber die AlternatingItemTemplate-Eigenschaft verwendet eine andere Hintergrundfarbe für einen Streifeneffekt.

   • SelectedItemTemplate definiert das Layout für einen Datensatz, der explizit durch Klicken auf eine Schaltfläche o. ä. ausgewählt wurde. Diese Vorlage wird typischerweise für eine erweiterte Ansicht eines Datensatzes oder als Masterdatensatz für eine Master-Detail-Beziehung verwendet. Sie müssen Code schreiben, um das Öffnen eines Datensatzes im ausgewählten Modus zu unterstützen. (Dies wird in dieser exemplarischen Vorgehensweise nicht geschehen. Weitere Informationen finden Sie unter Gewusst wie: Ermöglichen des Auswählens von Elementen in DataList-Webserversteuerelementen und unter Exemplarische Vorgehensweise: Erstellen von Master-Detail-Webseiten in Visual Studio.)

   • EditItemTemplate definiert das Layout für den Bearbeitungsmodus für einen Datensatz. In der Regel enthält die EditItemTemplate-Eigenschaft bearbeitbare Steuerelemente, z. B. das TextBox-Steuerelement und das CheckBox-Steuerelement, in denen Benutzer den Datensatz ändern können. Sie müssen Code schreiben, um einen Datensatz im Bearbeitungsmodus aufrufen zu können, und um das Speichern des Datensatzes nach Abschluss der Bearbeitung behandeln zu können. (Dies wird in dieser exemplarischen Vorgehensweise nicht geschehen. Informationen über das Schreiben von Code zur Bearbeitung von Datensätzen finden Sie unter Gewusst wie: Ermöglichen des Bearbeitens von Elementen in DataList-Webserversteuerelementen.)

   Visual Web Developer füllt normalerweise die Elementvorlage für jede Datenspalte in der Datenquelle mit einem datengebundenen Label-Steuerelement. Zusätzlich generiert Visual Web Developer für jede Bezeichnung statischen Text, der als Beschriftung fungiert.

2. Ziehen Sie den Größenziehpunkt auf der rechten Seite, um das DataList-Steuerelement so zu verbreitern, dass es fast die gesamte Seitenbreite einnimmt.

3. Bearbeiten Sie die Elementvorlage, um die Label-Steuerelemente neu anzuordnen und eine neue Beschriftung zu erstellen, damit der Vorlageninhalt ähnlich wie im folgenden Codebeispiel angezeigt wird.

   Name: [CategoryNameLabel] (ID: [CategoryIDLabel])
   

4. Klicken Sie auf das CategoryNameLabel-Steuerelement. Erweitern Sie in den Eigenschaften den Knoten Schriftart, und legen Sie dann Fett auf true fest.

5. Klicken Sie im DataList-Steuerelement in der Entwurfsansicht mit der rechten Maustaste auf die Titelleiste, klicken Sie auf Vorlage bearbeiten, und klicken Sie dann auf Trennzeichenvorlage.

   Mit der Trennzeichenvorlage können Sie angeben, welcher Text oder welche anderen Elemente zwischen Datensätzen angezeigt werden.

6. Ziehen Sie aus der Gruppe HTML der Toolbox ein Element Horizontale Trennlinie in die Trennzeichenvorlage.

7. Klicken Sie im DataList-Steuerelement mit der rechten Maustaste auf die Titelleiste, und klicken Sie dann auf Vorlagenbearbeitung beenden.

Testen des DataList-Steuerelements

Sie können jetzt das von Ihnen erstellte Layout testen.

So testen Sie das DataList-Steuerelement

• Drücken Sie STRG+F5, um die Seite auszuführen.

  Auf der Seite wird eine Liste von Kategorienamen und IDs mit einer Linie zwischen den einzelnen Datensätzen angezeigt.

Anzeigen von verwandten Informationen im DataList-Steuerelement

In dem von Ihnen verwendeten DataList-Steuerelement werden momentan Datensätze zu einzelnen Kategorien mit dem vorher von Ihnen definierten benutzerdefinierten Layout angezeigt. Sie haben das Layout nur wenig geändert, aber Sie sehen, dass Sie durch das Arbeiten mit der Vorlage Text und Steuerelemente anordnen, den Inhalt formatieren und die Anzeige der Datensätze auf andere Weise ändern können.

Das Layout kann den aktuellen Datensatz, aber auch verknüpfte Datensätze enthalten. In diesem Teil der exemplarischen Vorgehensweise ändern Sie das Layout so, dass in jeder Zeile eine Kategorie und die Produkte in dieser Kategorie angezeigt werden. Damit wird praktisch in jeder Zeile des DataList-Steuerelements eine Master-Detail-Beziehung angezeigt. Sie müssen ein kurzes Stück Code schreiben, um dieses Szenario zu aktivieren.

So zeigen Sie verwandte Informationen im DataList-Steuerelement an

1. Klicken Sie mit der rechten Maustaste auf das DataList-Steuerelement, klicken Sie auf Vorlagen bearbeiten, und klicken Sie dann auf Elementvorlagen.

2. Ziehen Sie aus der Gruppe Standard der Toolbox ein BulletedList-Steuerelement in die Elementvorlage, und platzieren das BulletedList-Steuerelement unterhalb der Kategorieinformation.

   Im BulletedList-Steuerelement können Daten angezeigt werden, wobei eine Datenspalte einem Aufzählungselement entspricht.

3. Klicken Sie mit der rechten Maustaste auf das BulletedList-Steuerelement, und klicken Sie dann auf Smarttag anzeigen.

4. Klicken Sie auf Datenquelle auswählen.

   Sie erstellen ein zweites Datenquellen-Steuerelement, um die verwandten Datensätze zu lesen.

5. Klicken Sie in der Liste Datenquelle wählen im Dialogfeld Datenquelle auswählen auf Neue Datenquelle.

6. Klicken Sie auf Datenbank.

7. Im Feld ID für Datenquelle angeben geben Sie bulletedListDataSource ein.

   Obwohl Sie i. d. R. den Standardnamen für die Datenquelle beibehalten, ist es in diesem Fall sinnvoll, der Datenquelle einen bestimmten, vorhersehbaren Namen zuzuweisen, damit Sie später im Code darauf verweisen können.

8. Klicken Sie auf OK.

   Der Assistent Konfigurieren von Datenquellen wird angezeigt.

9. Klicken Sie im Feld Über welche Datenverbindung soll die Anwendung eine Verbindung mit der Datenbank herstellen? auf den Namen der Verbindung, die Sie früher in dieser exemplarischen Vorgehensweise erstellt haben, und klicken Sie dann auf Weiter.

   Der Assistent zum Konfigurieren von Datenquellen zeigt eine Seite an, auf der Sie eine SQL-Anweisung erstellen können.

10. Klicken Sie unter Spalten von Tabelle oder Ansicht angeben im Feld Name auf Produkte.

11. Wählen Sie im Feld Spalten das Feld ProductName aus.

    Im BulletedList-Steuerelement wird nur eine Spalte angezeigt.

12. Klicken Sie auf die Schaltfläche WHERE.

    Das Dialogfeld WHERE-Klausel hinzufügen wird angezeigt.

13. Klicken Sie in der Liste Spalte auf Kategorie-ID.

14. Klicken Sie in der Liste Operator auf =.

15. Klicken Sie in der Liste Quelle auf Keine.

    Dies gibt an, dass der Wert der Spalte CategoryID in einer Variable bereitgestellt wird.

16. Klicken Sie auf Hinzufügen, klicken Sie auf OK, klicken Sie auf Weiter und klicken Sie dann auf Fertig stellen.

    Die Abfrage kann mit der Variable nicht getestet werden.

17. Klicken Sie in der Liste Datenfeld zur Anzeige in BulletedList auswählen auf ProductName. Klicken Sie auf OK.

18. Klicken Sie im DataList-Steuerelement mit der rechten Maustaste auf die Titelleiste, und klicken Sie dann auf Vorlagenbearbeitung beenden.

Schreiben von Code zum Festlegen der Kategorie-ID

Die SQL-Anweisung, die Sie für das bulletedListDataSource-Steuerelement erstellt haben, ähnelt dem folgenden Code:

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

Zur Laufzeit wird im DataList-Steuerelement eine Liste von Kategoriedatensätzen angezeigt, die sowohl den Kategorienamen als auch die Kategorie-ID enthalten. Im vorherigen Abschnitt haben Sie ein BulletedList-Steuerelement hinzugefügt, mit dem alle Produkte für die einzelnen Kategorien angezeigt werden. Da jeder Kategoriedatensatz angezeigt wird, führt das DataList-Steuerelement unter Verwendung der vorhergehenden Abfrage eine Abfrage aus, um die Produkte für diese Kategorie abzurufen.

Sie müssen für jeden angezeigten Datensatz die Kategorie-ID für die Abfrage bereitstellen. Schreiben Sie dazu ein kurzes Stück Code, mit dem Sie die Kategorie-ID aus dem momentan angezeigten Datensatz abrufen, und danach diese Kategorie-ID als Parameter an die Abfrage im bulletedListDataSource-Steuerelement übergeben.

So schreiben Sie Code zum Festlegen der Kategorie-ID

1. Klicken Sie auf das DataList-Steuerelement, und klicken Sie dann in Eigenschaften auf der Symbolleiste auf Ereignisse.

2. Doppelklicken Sie auf ItemDataBound, um einen Ereignishandler für dieses Ereignis zu erstellen.

3. Kopieren Sie folgenden Code in den Handler.

   If e.Item.ItemType = ListItemType.Item Or _
       e.Item.ItemType = ListItemType.AlternatingItem Then
     Dim ds As SqlDataSource
     ds = CType(e.Item.FindControl("bulletedListDataSource"), _
         SqlDataSource)
     Dim categoryID As String
     categoryID = DataBinder.Eval(e.Item.DataItem, _
         "categoryid").ToString()
     ds.SelectParameters("CategoryID").DefaultValue = _
         categoryID
   End If
   

   if (e.Item.ItemType == ListItemType.Item ||
       e.Item.ItemType == ListItemType.AlternatingItem)
   {
     SqlDataSource ds;
     ds = e.Item.FindControl("bulletedListDataSource")
         as SqlDataSource;
     ds.SelectParameters["CategoryID"].DefaultValue =
         DataBinder.Eval(e.Item.DataItem,
         "categoryid").ToString();
   }
   

   Das ItemDataBound-Ereignis wird für jeden angezeigten Datensatz ausgelöst und gibt Ihnen die Möglichkeit, die Daten zu lesen oder zu ändern. Dieser Code führt folgende Schritte aus:

   1. Prüft, um sicherzustellen, dass das Ereignis beim Binden eines ItemTemplate-Objekts oder eines AlternatingItemTemplate-Objekts eintritt (und nicht bei einem SeparatorTemplate-Objekt oder einem anderen Vorlagentyp).

   2. Verwendet die FindControl-Methode, um einen Verweis auf die SqlDataSource-Steuerelementinstanz abzurufen, die innerhalb jeder Elementvorlage erstellt wird.

   3. Ruft den Wert der Datenspalte CategoryID durch Auswertung der aktuellen DataItem-Eigenschaft ab.

   4. Legt die CategoryID-Variable der parametrisierten Abfrage durch das Festlegen ihrer DefaultValue-Eigenschaft in der SelectParameters-Auflistung fest.

Testen des Codes

Sie können den Code jetzt testen.

So testen Sie den Code zum Festlegen der Kategorie-ID

• Drücken Sie STRG+F5, um die Seite auszuführen.

  Im DataList-Steuerelement werden alle Kategoriedatensätze angezeigt, und für jeden Datensatz werden auch die zur jeweiligen Kategorie gehörenden Produkte in einer Aufzählung angezeigt.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurde ein einfaches aber vollständiges Szenario zur Anzeige und Formatierung von Daten mit dem DataList-Webserver-Steuerelement veranschaulicht. Sie können mit den Verfahren und Steuerelementen, die in der exemplarischen Vorgehensweise illustriert wurden, anspruchsvollere datengesteuerte Seiten und Anwendungen erstellen. Auf diese Weise können Sie beispielsweise folgende Vorgänge durchführen:

• Code schreiben, um Benutzern zu ermöglichen, Elemente im DataList-Webserver-Steuerelement auszuwählen. Weitere Informationen finden Sie unter Gewusst wie: Ermöglichen des Auswählens von Elementen in DataList-Webserversteuerelementen.

• Einen Masterdatensatz für eine Master-Detail-Beziehung erstellen. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen von Master-Detail-Webseiten in Visual Studio.

• Mehr über die Verwendung der Ausgabecachefunktion in Ihren Datenanwendungen zur Leistungsverbesserung erfahren. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Verwenden der Ausgabecachefunktion zur Verbesserung der Websiteleistung.

Siehe auch

Aufgaben

Gewusst wie: Ermöglichen des Auswählens von Elementen in DataList-Webserversteuerelementen

Exemplarische Vorgehensweise: Erstellen von Master-Detail-Webseiten in Visual Studio

Referenz

DataList