Exemplarische Vorgehensweise: Anzeigen, Paging und Sortieren von Daten mit dem ListView-Webserversteuerelement

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise verwenden Sie das ListView-Steuerelement, mit dem Sie Daten von einer Datenquelle in einem mit Vorlagen definierten Format anzeigen können. Wenn Sie mit Vorlagen arbeiten, können Sie das Layout und die Darstellung der Daten im Steuerelement vollständig steuern. Das ListView-Steuerelement unterstützt Bearbeitungs-, Einfüge-, und Löschvorgänge sowie das Sortieren und Paging.

In dieser exemplarischen Vorgehensweise werden folgende Aufgaben demonstriert:

• Verwenden des ListView-Steuerelements zur Anzeige von Daten aus einer Datenbank.

• Hinzufügen von Pagingfunktionalität zum ListView-Steuerelement.

• Hinzufügen von Sortierfunktionen zum ListView-Steuerelement.

Vorbereitungsmaßnahmen

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

• Visual Studio 2008 oder Visual Web Developer 2008 Express Edition.

• SQL Server Express Edition. Sie können auch einen installierten SQL Server verwenden, jedoch müssen Sie an einigen der Prozeduren kleine Anpassungen vornehmen.

• Die auf dem Computer installierte AdventureWorks-Datenbank. Informationen über das Herunterladen und Installieren der SQL Server-Beispieldatenbank AdventureWorks finden Sie auf der Microsoft SQL Server-Website unter Installing Sample Databases for Express Editions.

• Einen Benutzernamen und ein Kennwort für ein SQL Server-Konto, das Zugriff auf die AdventureWorks-Datenbank hat.

Erstellen der Website

Wenn Sie bereits eine Website (beispielsweise mithilfe der Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer) erstellt haben, können Sie diese verwenden und zum nächsten Abschnitt übergehen. Erstellen Sie andernfalls eine neue Website, indem Sie folgende Schritte ausführen:

So erstellen Sie eine Dateisystem-Website

1. Öffnen Sie Visual Studio 2008 oder Visual Web Developer 2008 Express Edition.

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

   Das Dialogfeld Neue Website wird angezeigt.

3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

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

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

5. Wählen Sie in der Liste Sprache die Programmiersprache aus, in der Sie arbeiten möchten.

6. Klicken Sie auf OK.

   Visual Studio erstellt den Ordner und eine neue Seite mit dem Namen Default.aspx.

Anzeigen von Daten und Paging durch Daten im ListView-Steuerelement

Wenn Sie Daten auf einer ASP.NET-Webseite anzeigen möchten, benötigen Sie Folgendes:

• Eine Verbindung zu einer Datenquelle, z. B. einer Datenbank. Mit dem folgenden Vorgang wird eine Verbindung mit der SQL Server-Datenbank AdventureWorks erstellt.

• Ein Datenquellensteuerelement auf der Seite, das zum Lesen und Schreiben von Daten mit der Datenquelle (der Datenbank) interagiert. In dieser exemplarischen Vorgehensweise verwenden Sie ein SqlDataSource-Steuerelement, das mit der SQL Server-Datenbank AdventureWorks interagiert.

• Ein Steuerelement auf der Seite zum Anzeigen der Daten. Im folgenden Verfahren werden Daten in einem ListView-Steuerelement angezeigt, das Daten vom SqlDataSource-Steuerelement abruft.

So zeigen Sie Daten an und ermöglichen Paging durch Daten im ListView-Steuerelement

1. Wenn die Website nicht bereits über den Ordner App_Data verfügt, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, klicken Sie auf ASP.NET-Ordner hinzufügen und dann auf App_Data.

2. Klicken Sie mit der rechten Maustaste im Projektmappen-Explorer auf den Ordner App_Data, und klicken Sie dann auf Vorhandenes Element hinzufügen.

   Das Dialogfeld Vorhandenes Element hinzufügen wird angezeigt.

3. Geben Sie den Speicherort der AdventureWorks-Datenbankdatei (AdventureWorks_Data.mdf) ein.

   Standardmäßig ist die MDF-Datei im Pfad C:\Programme\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf installiert.

   Hinweis:
   Dieser Vorgang erstellt eine Kopie der Datenbankdatei im Projekt. Allerdings ist die Datenbankdatei groß. Wenn es nicht möglich ist, die Datenbank zu kopieren, gibt es alternative Methoden zum Verbinden, wie das direkte Anfügen der Datenbankdatei. Dieses Verfahren wird jedoch nicht in dieser exemplarischen Vorgehensweise behandelt.

4. Wechseln Sie zur Datei Default.aspx, oder öffnen Sie sie.

5. Wechseln Sie zur Ansicht Entwurf.

6. Ziehen Sie aus der Registerkarte Daten der Toolbox ein ListView-Steuerelement auf die Seite.

   

7. Klicken Sie im Menü Allgemeine ListView-Aufgaben in der Dropdownliste Datenquelleauswählen auf <Neue Datenquelle...>.

   Der Assistent zum Konfigurieren von Datenquellen wird angezeigt.

8. Klicken Sie auf Datenbank.

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

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

   

10. Klicken Sie auf OK.

    Der Assistent zum Konfigurieren der Datenquelle wird angezeigt.

11. Wählen Sie in der Liste unter Über welche Datenverbindung soll die Anwendung eine Verbindung mit der Datenbank herstellen den Eintrag AdventureWorks_Data.mdf aus.

12. Klicken Sie auf Weiter.

    Der Assistent zeigt eine Seite an, auf der Sie die in der Konfigurationsdatei zu speichernde Verbindungszeichenfolge angeben können. Das Speichern der Verbindungszeichenfolge in der Konfigurationsdatei hat zwei Vorteile:

    • Es kann sicherer sein als das Speichern auf der Seite.

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

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

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

14. Aktivieren Sie die Option Benutzerdefinierte SQL-Anweisung oder gespeicherte Prozedur angeben.

    

    Hinweis:
    In der Regel ist die Option Spalten von einer Tabelle oder Ansicht angeben zu verwenden. Da die Datenbank AdventureWorks Schemanamen hat, werden Sie in dieser exemplarischen Vorgehensweise eine benutzerdefinierte SQL-Anweisung erstellen.

15. Klicken Sie auf Weiter.

16. Geben Sie auf der Seite Benutzerdefinierte Anweisungen oder gespeicherte Prozeduren definieren die folgende SQL-Abfrage ein, die Kontaktdaten von der AdventureWorks-Datenbank abruft.

    SELECT  ContactID, FirstName, LastName, EmailAddress
    FROM    Person.Contact
    

    Sie können auch auf Abfrage-Generator klicken und das Fenster Abfrage-Generator verwenden, um eine Abfrage zu erstellen und anschließend mit der Schaltfläche Abfrage ausführen zu überprüfen.

    Hinweis:
    Geben Sie im Assistenten die Auswahlkriterien (Where-Klausel) und andere SQL-Abfrageoptionen an. Für diese exemplarische Vorgehensweise erstellen Sie eine einfache Anweisung ohne Auswahloptionen oder Sortieroptionen.

17. Klicken Sie auf Weiter.

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

19. Klicken Sie auf Fertig stellen.

    Der Assistent erstellt ein SqlDataSource-Steuerelement und fügt es der Seite hinzu. Das zuvor hinzugefügte ListView-Steuerelement wird an das SqlDataSource-Steuerelement gebunden.

    Wenn Sie die Eigenschaften für das SqlDataSource-Steuerelement betrachten, sehen Sie, dass der Assistent Werte für die ConnectionString-Eigenschaft und die SelectCommand-Eigenschaft erstellt hat.

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

21. Klicken Sie im Menü Allgemeine ListView-Aufgaben auf ListView konfigurieren.

    Das Dialogfeld ListView konfigurieren wird angezeigt.

22. Wählen Sie Paging aktivieren aus.

    Hinweis:
    Eventuell möchten Sie zudem einen anderen Stil auswählen, der die Anzeige der Daten verbessert. Wählen Sie dazu unter Stil auswählen ein Format z. B. Farbig aus.

    Der Assistent erstellt auf Grundlage der Spalten in der Abfrage die Vorlagen für das ListView-Steuerelement. Sie können das Layout anpassen, indem Sie die Vorlagen bearbeiten, die die Layoutelemente, Steuerelemente und Bindungsausdrücke enthalten.

    

23. Klicken Sie auf OK.

    

Bevor Sie fortfahren, können Sie das ListView-Steuerelement testen.

So testen Sie das ListView-Steuerelement

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

   Das ListView-Steuerelement wird mit Spalten für ContactID, FirstName, LastName und EmailAddress angezeigt.

2. Klicken Sie auf die Schaltflächen Erste, Zurück, Weiter und Letzte am Seitenende, um durch die Daten zu blättern.

3. Wenn Sie damit fertig sind, schließen Sie den Browser.

Hinzufügen von Sortierfähigkeit zum ListView-Steuerelement

Jetzt wird dem ListView-Steuerelement die Möglichkeit zum Sortieren hinzugefügt. Diese Funktionalität kann bereitgestellt werden, indem dem ListView-Steuerelement eine Schaltfläche hinzugefügt wird, die konfiguriert wird.

So fügen Sie dem ListView-Steuerelement Funktionen zum Sortieren hinzu

1. Klicken Sie mit der rechten Maustaste in der Datei Default.aspx auf das ListView-Steuerelement, und klicken Sie dann auf Smarttag anzeigen.

2. Wählen Sie im Menü Allgemeine ListView-Aufgaben in der Liste Aktuelle Ansicht eine Ansicht, um eine LayoutTemplate-Vorlage zu bearbeiten, wie z. B. ItemTemplate.

   Hinweis:
   Es gibt keine bestimmte Ansicht zum Bearbeiten der LayoutTemplate-Vorlage. Diese Vorlage kann in jeder Ansicht, die in der Liste Aktuelle Ansichten aufgeführt ist, mit Ausnahme der Laufzeitansicht und EmptyDataTemplate, bearbeitet werden.

3. Ziehen Sie aus der Registerkarte Standard der Toolbox zwei Button-Steuerelemente auf den unteren Rand des Steuerelements, wo sich die Pagingsteuerelemente befinden.

4. Ändern Sie im Fenster Eigenschaften die Eigenschaften der Schaltflächen, wie folgt:

   • Für die erste Schaltfläche wird die Text-Eigenschaft auf "Nach Vornamen sortieren", die CommandName-Eigenschaft auf "Sortieren" und die CommandArgument-Eigenschaft auf "FirstName" festgelegt.

   • Für die zweite Schaltfläche wird die Text-Eigenschaft auf "Nach Nachnamen sortieren", die CommandName-Eigenschaft auf "Sortieren" und die CommandArgument-Eigenschaft auf "LastName" festgelegt.

   Die CommandArgument-Eigenschaften der Schaltfläche werden auf einen Sortierausdruck festgelegt. Für Datenbankdaten ist dies in der Regel der Name einer Spalte.

5. Speichern Sie die Seite.

Sie können die Seite jetzt noch einmal testen.

So testen Sie Sortierung

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

2. Klicken Sie auf die Schaltflächen Nach Vornamen sortieren und Nach Nachnamen sortieren, um die Daten auf unterschiedliche Art zu sortieren.

3. Klicken Sie wiederholt auf eine Schaltfläche, um zwischen aufsteigender und absteigender Sortierreihenfolge zu wechseln.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurden die grundlegenden Schritte zur Verwendung eines ListView-Steuerelements zum Anzeigen, Blättern, Sortieren von Datensätzen unter Verwendung eines vom Steuerelement bereitgestellten Layouts veranschaulicht. Sie können mit weiteren Features des ListView-Steuerelements experimentieren und andere Szenarios ausprobieren. Zum Beispiel können Sie Datensätze bearbeiten, löschen oder einfügen. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Ändern von Daten mit dem ListView-Webserversteuerelement.

Siehe auch

Aufgaben

Gewusst wie: Sichern von Verbindungszeichenfolgen bei der Verwendung von Datenquellensteuerelementen

Exemplarische Vorgehensweise: Grundlegender Datenzugriff auf Webseiten

Konzepte

Übersicht über das ListView-Webserversteuerelement