Sdílet prostřednictvím

Exemplarische Vorgehensweise: Erstellen eines geschachtelten GridView-Steuerelements

  • Článek

Aktualisiert: November 2007

Das GridView-Steuerelement zeigt Datenzeilen in einem Raster (einer HTML-Tabelle) an, und zwar eine Datenzeile pro Rasterzeile. In dieser exemplarischen Vorgehensweise wird beschrieben, wie die Funktionalität des GridView-Steuerelements erweitert wird, sodass einzelne Rasterzeilen Daten aus einer verknüpften Datentabelle anzeigen können. Im weiteren Verlauf zeigen Sie verknüpfte Daten in einem geschachtelten GridView-Steuerelement an – ein GridView-Steuerelement in der Rasterzeile der übergeordneten GridView-Steuerelements.

Ein Beispiel für geschachtelte Daten ist ein GridView-Steuerelement, das eine Liste mit Kunden anzeigt, wobei jede Zeile des GridView-Steuerelements ein weiteres GridView-Steuerelement enthält, das die Bestellungen für den jeweiligen Kunden anzeigt.

In dieser exemplarischen Vorgehensweise verwenden beide GridView-Steuerelemente SqlDataSource-Steuerelemente, um die Daten aus der Datenquelle abzurufen.

Im Rahmen dieser exemplarischen Vorgehensweise erhalten Sie Informationen zu folgenden Themen:

  • Verbinden mit einer SQL Server-Datenbank in Microsoft Visual Web Developer.

  • Verwenden des SqlDataSource-Steuerelements zum Verwalten von Datenzugriff und Bindung.

  • Anzeigen der von der Datenbank im GridView-Steuerelement zurückgegebenen Daten.

  • Erstellen eines TemplateField mit geschachtelten Steuerelementen, die vom GridView-Steuerelement angezeigt werden.

  • Dynamisches Anpassen der Anzeige für jede Zeile auf Basis der Laufzeitbedingungen.

  • Optionales Zwischenspeichern von Daten mit dem SqlDataSource-Steuerelement, um Anforderungen an die Datenbank zu reduzieren.

Vorbereitungsmaßnahmen

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

  • Visual Web Developer (Visual Studio)

  • 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.

  • 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.

    Aa992038.alert_note(de-de,VS.90).gifHinweis:

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

Erstellen der Website

Wenn Sie bereits in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer eine Website in Visual Web Developer erstellt haben, können Sie diese Website verwenden und zum nächsten Abschnitt übergehen. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie die unten aufgeführten 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. 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\NestedGridView ein.

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

  6. Klicken Sie auf OK.

    Visual Web Developer erstellt den Ordner sowie eine neue Seite mit dem Namen Default.aspx.

Hinzufügen einer Datenquelle für das GridView-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) In der folgenden Prozedur erstellen Sie eine Verbindung mit der SQL Server-Datenbank Northwind.

  • Ein Steuerelement auf der Seite zum Anzeigen der Daten.

In der folgenden Prozedur zeigen Sie Daten in einem GridView-Steuerelement an. Das GridView-Steuerelement ruft seine Daten aus dem SqlDataSource-Steuerelement ab.

So fügen Sie eine Datenquelle für das GridView-Steuerelement hinzu

  1. Öffnen Sie die Seite Default.aspx, oder wechseln Sie zu dieser Seite.

  2. Wechseln Sie in die Entwurfsansicht.

  3. Ziehen Sie in der Toolbox aus der Gruppe Daten ein SqlDataSource-Steuerelement auf die Seite.

    Wenn das Smarttag SqlDataSource-Aufgaben nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf das SqlDataSource-Steuerelement und dann auf Smarttag anzeigen.

  4. Klicken Sie im Bereich SqlDataSource-Aufgaben auf Datenquelle konfigurieren.

    Der Assistent Datenquelle konfigurieren wird angezeigt.

  5. Klicken Sie auf Neue Verbindung.

    Das Dialogfeld Verbindung hinzufügen wird angezeigt.

    • Wenn in der Liste Datenquelle der Eintrag Microsoft SQL Server (SqlClient) nicht angezeigt wird, klicken Sie auf Ändern, und wählen Sie im Dialogfeld Datenquelle wechseln den Eintrag Microsoft SQL Server aus.

    • Wenn statt des Dialogfelds Verbindungseigenschaften das Dialogfeld Datenquelle auswählen angezeigt wird, wählen Sie in der Liste Datenquelle den Typ der Datenquelle aus, die Sie verwenden. 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.

  6. Geben Sie auf der Seite Verbindung hinzufügen im Textfeld Servername den Namen des SQL-Servers ein, auf dem die Beispieldatenbank Northwind installiert ist.

  7. Wählen Sie unter Beim Server anmelden die entsprechende Option für den Zugriff auf die SQL Server-Datenbank aus (integrierte Sicherheit oder bestimmter Benutzername und Kennwort). Geben Sie einen Benutzernamen und ein Kennwort ein, falls erforderlich.

  8. Wenn Sie ein Kennwort eingegeben haben, aktivieren Sie das Kontrollkästchen Kennwort speichern.

  9. Klicken Sie auf Wählen Sie einen Datenbanknamen aus, oder geben Sie ihn ein, und geben Sie dann Northwind ein.

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

  11. Klicken Sie im Assistenten Datenquelle konfigurieren auf Weiter.

  12. Stellen Sie sicher, dass das Kontrollkästchen Ja, diese Verbindung speichern als aktiviert ist.

  13. Nennen Sie die Verbindung NorthwindConnectionString, und klicken Sie dann auf Weiter.

  14. Wählen Sie im Schritt Die Select-Anweisung konfigurieren des Assistenten die Option Spalten von einer Tabelle oder Ansicht angeben aus.

  15. Wählen Sie in der Liste Name die Option Customers aus.

  16. Wählen Sie im Bereich Spalten die Spalten CustomerID und CompanyName aus.

  17. Klicken Sie auf Weiter.

  18. Klicken Sie auf Fertig stellen.

Hinzufügen eines GridView-Steuerelements zum Anzeigen von Daten

Nachdem Sie eine Datenquelle zum Abrufen der Daten eingerichtet haben, müssen Sie der Seite ein Steuerelement zum Anzeigen der Daten hinzufügen.

In der folgenden Prozedur zeigen Sie Daten in einem GridView-Steuerelement an. Das GridView-Steuerelement ruft seine Daten aus dem zuvor hinzugefügten SqlDataSource-Steuerelement ab.

So fügen Sie ein GridView-Steuerelement hinzu und konfigurieren es, um Daten anzuzeigen

  1. Stellen Sie sicher, dass Sie sich in der Entwurfsansicht für die Seite Default.aspx befinden.

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

  3. Wählen Sie im Menü GridView-Aufgaben aus dem Listenfeld Datenquelle auswählen das zuvor hinzugefügte SqlDataSource-Steuerelement SqlDataSource1 aus.

  4. Aktivieren Sie das Kontrollkästchen Paging aktivieren.

  5. Erweitern Sie im Eigenschaftenfenster die RowStyle-Eigenschaft für das GridView-Steuerelement, und legen Sie dann die VerticalAlign-Eigenschaft auf Top fest. Dadurch wird der Text in der Rasterzeile am oberen Rand der Zellen ausgerichtet, da im geschachtelten Raster mehrere Zeilen angezeigt werden.

Hinzufügen eines geschachtelten GridView-Steuerelements zum Anzeigen verknüpfter Daten

Sie müssen eine geschachtelte Datenquelle und ein geschachteltes GridView-Steuerelement erstellen, um verknüpfte Daten in den einzelnen Zeilen anzuzeigen. Dazu führen Sie die folgenden Schritte aus:

  • Erstellen Sie ein TemplateField für die vom GridView-Steuerelement angezeigten Zeilen.

  • Fügen Sie ein geschachteltes GridView-Steuerelement und ein SqlDataSource-Steuerelement zum TemplateField hinzu, um verknüpfte Daten für einzelne Zeilen anzuzeigen.

  • Fügen Sie eine Prozedur zum Behandeln des RowDataBound-Ereignisses des übergeordneten GridView-Steuerelements hinzu, um den select-Parameterwert für das geschachtelte SqlDataSource-Steuerelement festzulegen.

So fügen Sie ein geschachteltes GridView-Steuerelement hinzu und konfigurieren es zum Anzeigen von Daten

  1. Stellen Sie sicher, dass Sie sich in der Entwurfsansicht für die Seite Default.aspx befinden.

  2. Klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement, und wählen Sie Smarttag anzeigen aus.

  3. Klicken Sie auf Spalten bearbeiten.

    Das Dialogfeld Felder wird angezeigt.

  4. Wählen Sie im Bereich Verfügbare Felder ein TemplateField aus, und klicken Sie dann auf Hinzufügen.

  5. Legen Sie im Bereich TemplateField-Eigenschaften die Eigenschaft HeaderText auf Orders fest.

  6. Klicken Sie auf OK.

  7. Klicken Sie im Bereich GridView-Aufgaben auf Vorlagen bearbeiten.

  8. Wählen Sie im Bereich Vorlagenbearbeitungsmodus aus dem Listenfeld Anzeige die Option ItemTemplate aus.

  9. Ziehen Sie in der Toolbox aus der Gruppe Daten ein SqlDataSource-Steuerelement auf die Seite in den bearbeitbaren Bereich der ItemTemplate.

    Wenn das Smarttag SqlDataSource-Aufgaben nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf das SqlDataSource-Steuerelement und dann auf Smarttag anzeigen.

  10. Klicken Sie im Smarttag SqlDataSource-Aufgaben auf Datenquelle konfigurieren.

    Der Assistent Datenquelle konfigurieren wird angezeigt.

  11. Wählen Sie im Schritt Wählen Sie Ihre Datenverbindung aus die zuvor erstellte NorthwindConnectionString aus, und klicken Sie anschließend auf Weiter.

  12. Wählen Sie im Schritt Die Select-Anweisung konfigurieren des Assistenten die Option Spalten von einer Tabelle oder Ansicht angeben aus.

  13. Wählen Sie in der Liste Name die Option Orders aus.

  14. Wählen Sie im Bereich Spalten die Spalten OrderID und OrderDate aus.

  15. Klicken Sie auf WHERE, um einen Parameter für die SELECT-Anweisung hinzuzufügen.

  16. Wählen Sie im Fenster WHERE-Klausel hinzufügen die Option CustomerID im Listenfeld Spalte aus.

  17. Wählen Sie im Listenfeld Quelle die Option None aus.

  18. Klicken Sie auf Hinzufügen.

    Daraufhin wird ein select-Parameter erstellt, den Sie für jede Zeile, die an das übergeordnete GridView-Steuerelement gebunden ist, auf den Wert CustomerID festlegen.

  19. Klicken Sie auf OK.

  20. Klicken Sie auf Weiter.

  21. Klicken Sie auf Fertig stellen.

  22. Ziehen Sie in der Toolbox aus der Gruppe Daten ein GridView-Steuerelement in den bearbeitbaren Bereich der ItemTemplate.

    Wenn das Smarttag GridView-Aufgaben nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement und dann auf Smarttag anzeigen.

  23. Wählen Sie im Smarttag GridView-Aufgaben im Listenfeld Datenquelle auswählen den Namen des geschachtelten SqlDataSource-Steuerelements SqlDataSource2 aus.

  24. Klicken Sie mit der rechten Maustaste auf das übergeordnete GridView-Steuerelement GridView1, und wählen Sie Smarttag anzeigen aus.

  25. Klicken Sie im Bereich GridView-Aufgaben auf Vorlagenbearbeitung beenden.

    Aa992038.alert_note(de-de,VS.90).gifHinweis:

    Das geschachtelte GridView-Steuerelement wird nicht in der Entwurfsansicht angezeigt.

  26. Klicken Sie im Bereich Eigenschaften für GridView1 auf die Schaltfläche EreignisseSchaltfläche "Ereignisse" im Eigenschaftenfenster.

  27. Geben Sie im Feld RowDataBound die Zeichenfolge GridView1_RowDataBound ein, und drücken Sie dann die EINGABETASTE.

    Visual Web Developer erstellt einen Ereignishandler für das RowDataBound-Ereignis des GridView-Steuerelements. Der Code sieht wie im folgenden Codebeispiel aus.

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

  28. Fügen Sie der Prozedur folgenden Code hinzu:

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    Der Code ruft den CustomerID-Wert für die aktuelle Zeile ab und legt ihn als select-Parameterwert für das geschachtelte SqlDataSource-Steuerelement SqlDataSource2 fest.

  29. Speichern Sie die Änderungen an den Dateien.

Testen der Seite

Sie können die Seite jetzt ausführen.

So testen Sie die Seite

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

    Das GridView-Steuerelement zeigt die Datenzeilen aus der Northwind-Tabelle Customers mit Daten aus der Northwind-Tabelle Orders für alle Kunden an, die in den einzelnen Zeilen geschachtelt sind.

  2. Schließen Sie den Browser.

Verwenden der Zwischenspeicherung mit einem geschachtelten GridView-Steuerelement

Bislang haben Sie eine Seite mit geschachtelten GridView-Steuerelementen erstellt. Im derzeitigen Zustand fragt die Seite einmal das übergeordnete GridView-Steuerelement und danach jedes geschachtelte GridView-Steuerelement aus der Datenbank ab.

Um die Zugriffe auf die Datenbank zu reduzieren, können Sie die geschachtelte Abfrage dahingehend ändern, dass alle Zeilen zurückgegeben, die Ergebnisse zwischengespeichert und anschließend für jedes geschachtelte GridView-Steuerelement gefiltert werden.

Aa992038.alert_note(de-de,VS.90).gifHinweis:

Für große Datenbanken empfiehlt sich diese Lösung jedoch nicht. Wenn Sie Daten aus einer großen Datenbank abrufen, erstellen Sie ein Datenobjekt, das nur die erforderlichen Zeilen abruft, und binden Sie es an das ObjectDataSource-Steuerelement. Weitere Informationen finden Sie unter Übersicht über das ObjectDataSource-Webserversteuerelement.

So konfigurieren Sie ein geschachteltes SqlDataSource-Steuerelement zum Zwischenspeichern von Abfrageergebnissen

  1. Stellen Sie sicher, dass Sie sich im Entwurfsmodus für die Seite Default.aspx befinden.

  2. Klicken Sie mit der rechten Maustaste auf das übergeordnete GridView-Steuerelement GridView1, und klicken Sie dann auf Vorlage bearbeiten.

  3. Wählen Sie in der ItemTemplate für die Spalte Orders das geschachtelte SqlDataSource-Steuerelement SqlDataSource2 aus.

  4. Legen Sie im Eigenschaftenfenster für die EnableCaching-Eigenschaft true fest.

  5. Legen Sie die FilterExpression-Eigenschaft auf CustomerID='{0}' fest.

  6. Klicken Sie in der FilterParameters-Eigenschaft auf die Schaltfläche mit den Auslassungszeichen (Auslassungszeichen im ASP.NET Mobile-Designer), um den Parameterauflistungs-Editor zu öffnen.

  7. Klicken Sie im Fenster Parameterauflistungs-Editor auf Parameter hinzufügen.

  8. Geben Sie im Feld Name den Namen CustomerID ein.

  9. Klicken Sie auf OK.

  10. Klicken Sie mit der rechten Maustaste auf das geschachtelte SqlDataSource-Steuerelement SqlDataSource2, und wählen Sie Smarttag anzeigen aus.

  11. Klicken Sie auf Datenquelle konfigurieren.

  12. Lassen Sie die Verbindungsinformationen unverändert, und klicken Sie auf Weiter.

  13. Wählen Sie im Schritt Die Select-Anweisung konfigurieren die Option Spalten von einer Tabelle oder Ansicht angeben aus.

  14. Wählen Sie im Listenfeld Name die Option Orders aus.

  15. Überprüfen Sie im Abschnitt Spalten die Spalten OrderID, CustomerID und OrderDate, und klicken Sie dann auf Weiter.

  16. Klicken Sie auf Fertig stellen.

  17. Wenn Sie aufgefordert werden, die Felder und Schlüssel für das geschachtelte GridView-Steuerelement GridView2 zu aktualisieren, klicken Sie auf Nein.

    Die vom geschachtelten GridView-Steuerelement angezeigten Spalten bleiben unverändert.

    Sie haben das geschachtelte SqlDataSource-Steuerelement SqlDataSource2 so konfiguriert, dass alle Bestelldaten aus der Datenbank abgerufen und lokal zwischengespeichert werden. Wenn das geschachtelte GridView-Steuerelement an die Daten gebunden ist, wird ein Filter angewendet, damit nur Bestellungen angezeigt werden, die mit dem Wert CustomerID für die aktuelle Zeile verknüpft sind.

  18. Wenn Sie eine Code-Behind-Seite verwenden, klicken Sie mit der rechten Maustaste auf einen leeren Bereich auf der Seite, und klicken Sie anschließend auf Code anzeigen.

  19. Ändern Sie den Code für den RowDataBound-Ereignishandler wie folgt:

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    In dieser Version des Codes legen Sie keinen Wert in der SelectParameters-Auflistung des SqlDataSource-Steuerelements fest, sondern in seiner FilterParameters-Auflistung.

  20. Speichern Sie die Datei.

Testen der Seite

Sie können die Seite jetzt ausführen.

So testen Sie die Seite

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

    Das GridView-Steuerelement zeigt die Datenzeilen aus der Northwind-Tabelle Customers mit Daten aus der Northwind-Tabelle Orders für alle Kunden an, die in den einzelnen Zeilen geschachtelt sind. Wenn die erste Zeile datengebunden ist, werden jedoch alle Daten, die an das GridView-Steuerelement gebunden sind, einmal angefordert. Die Daten werden zur Verwendung mit den übrigen Zeilen des GridView-Steuerelements zwischengespeichert.

  2. Schließen Sie den Browser.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurde veranschaulicht, wie Sie die Funktionalität des GridView-Steuerelements erweitern können, um mithilfe von geschachtelten GridView-Steuerelementen auf einer ASP.NET-Webseite verknüpfte Daten anzuzeigen. Sie können die Anwendung auch erweitern, um Daten aktualisieren und löschen zu können oder um es Benutzern zu ermöglichen, mit einem DetailsView-Steuerelement oder einem FormView-Steuerelement neue Datensätze einzufügen. Außerdem können Sie zum Ändern eines Werts auch ein anderes als das TextBox-Steuerelement verwenden, z. B. ein DropDownList-Steuerelement. Weitere Informationen finden Sie unter den folgenden Themen:

Siehe auch

Aufgaben

Gewusst wie: Sichern von Verbindungszeichenfolgen bei der Verwendung von Datenquellensteuerelementen

Exemplarische Vorgehensweise: Anzeigen einer Dropdownliste während das Bearbeitens im GridView-Webserver-Steuerelement

Exemplarische Vorgehensweise: Grundlegender Datenzugriff auf Webseiten