Freigeben über


Exemplarische Vorgehensweise: Anzeigen von hierarchischen Daten in einem TreeView-Steuerelement

Aktualisiert: November 2007

Mit dem TreeView-Steuerelement in ASP.NET sollen Benutzern Daten in einer hierarchischen Struktur angezeigt werden. Benutzer können einzelne Knoten öffnen, die wiederum untergeordnete Knoten enthalten können. Das TreeView-Steuerelement ist für die Anzeige von XML-Daten geeignet, kann aber auch für andere Daten verwendet werden, die in einer Hierarchie dargestellt werden können. In dieser exemplarischen Vorgehensweise werden die Grundlagen der Verwendung des TreeView-Steuerelements sowie verschiedene Möglichkeiten zur Anzeige hierarchischer Daten gezeigt.

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

  • Verwenden des TreeView-Steuerelements zur Anzeige von XML-Daten

  • Anpassen der Anzeige des TreeView-Steuerelements

  • Anzeigen von Datensätzen aus verknüpften Datenbanktabellen im TreeView-Steuerelement

Vorbereitungsmaßnahmen

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

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

  • Ein Benutzername und ein Kennwort für ein SQL Server-Konto, das Zugriff auf die Datenbank Northwind hat, wenn sich die SQL Server-Datenbank nicht auf dem gleichen Computer befindet wie der Webserver.

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. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

  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\HierarchicalData ein.

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

  6. Klicken Sie auf OK.

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

Erstellen einer XML-Datei für Daten

Erstellen Sie eine neue XML-Datei, indem Sie die folgenden Schritte ausführen.

So erstellen Sie die XML-Datei

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie dann auf Neues Element hinzufügen.

  2. Klicken Sie im Dialogfeld Neues Element hinzufügen unter Standardvorlagen auf XML-Datei.

  3. Geben Sie Bookstore.xml im Feld Name ein, und klicken Sie dann auf Hinzufügen.

    Visual Web Developer erstellt die neue Datei Bookstore.xml und öffnet den Code-Editor.

  4. Kopieren Sie die folgenden XML-Daten, und fügen Sie sie in die Datei Bookstore.xml ein. Überschreiben Sie dabei den bereits vorhandenen Inhalt der Datei.

    <?xml version="1.0" standalone="yes"?>
    <bookstore>
      <genre name="fiction">
        <book ISBN="10-000000-001">
          <title>The Iliad and The Odyssey</title>
          <price>12.95</price>
          <comments>
            <userComment rating="4">
               Best translation I've read.
            </userComment>
            <userComment rating="2">
               I like other versions better.
            </userComment>
          </comments>
        </book>
        <book ISBN="10-000000-999">
          <title>Anthology of World Literature</title>
          <price>24.95</price>
          <comments>
            <userComment rating="3">
              Needs more modern literature.
            </userComment>
            <userComment rating="4">
              Excellent overview of world literature.
            </userComment>
          </comments>
        </book>
      </genre>
      <genre name="nonfiction">
        <book ISBN="11-000000-002">
          <title>Computer Dictionary</title>
          <price>24.95</price>
          <comments>
            <userComment rating="3">A valuable resource.</userComment>
          </comments>
        </book>
        <book ISBN="11-000000-003">
          <title>Cooking on a Budget</title>
          <price>23.95</price>
          <comments>
            <userComment rating="4">Delicious!</userComment>
          </comments>
        </book>
      </genre>
    </bookstore>
    

    Die XML-Datei enthält Informationen zu Büchern, die möglicherweise über eine Onlinebuchhandlung verfügbar sind.

  5. Speichern Sie die Datei Bookstore.xml, und schließen Sie sie dann.

Anzeigen von XML-Daten im TreeView-Steuerelement

In diesem Abschnitt zeigen Sie mithilfe des TreeView-Steuerelements XML-Daten an. Zunächst können Sie die XML-Informationen ohne besondere Konfiguration anzeigen.

So zeigen Sie die XML-Daten an

  1. Öffnen Sie die Seite Default.aspx, und wechseln Sie dann zur Entwurfsansicht.

  2. Ziehen Sie in der Toolbox aus der Gruppe Navigation ein TreeView-Steuerelement auf die Seite.

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

  4. Wählen Sie im Menü TreeView-Aufgaben in der Dropdownliste Datenquelle auswählen die Option Neue Datenquelle aus. Der Assistent zum Konfigurieren von Datenquellen wird angezeigt.

  5. Im Fenster Wo werden die Daten für die Anwendung abgerufen? wählen Sie XML-Datei aus. Behalten Sie die Standard-ID für die Datenquelle bei. Klicken Sie auf OK.

  6. Geben Sie ~/Bookstore.xml im Dialogfeld Datenquelle konfigurieren im Feld Datendatei ein, und klicken Sie danach auf OK.

Sie können die Seite jetzt testen.

So testen Sie die Seite

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

  2. Reduzieren Sie die Knoten im Steuerelement, und erweitern Sie sie dann wieder.

    Standardmäßig werden in den Knoten nur die Tagnamen der Elemente in der Datei Bookstore.xml angezeigt.

Sie können die im TreeView-Steuerelement angezeigten Informationen anpassen, indem Sie benutzerdefinierte Bindungen erstellen, mit denen Sie angeben können, welche Informationen aus der XML-Datei für die einzelnen Knoten angezeigt werden sollen.

So erstellen Sie benutzerdefinierte Bindungen

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

  2. Klicken Sie im Menü TreeView-Aufgaben auf TreeNode-Datenbindungen bearbeiten.

    Das Dialogfeld TreeView-Datenbindungen-Editor wird angezeigt.

  3. Deaktivieren Sie das Kontrollkästchen Datenbindungen automatisch generieren, da Sie die Datenbindungen selbst definieren.

  4. Klicken Sie auf Hinzufügen, um eine neue Bindung zu erstellen, legen Sie danach DataMember unter Datenbindungseigenschaften auf bookstore fest, und legen Sie Text auf Book Information fest.

    Sie konfigurieren die Bindung so, dass ein statischer Wert angezeigt wird, da der Knoten Bookstore der oberste Knoten in der XML-Datei ist und nur einmal im TreeView-Steuerelement angezeigt wird.

  5. Klicken Sie auf Hinzufügen, um eine zweite Bindung zu erstellen, und legen Sie danach DataMember unter Datenbindungseigenschaften auf genre und TextField auf name fest.

    Dadurch wird angegeben, dass der Knoten das <genre>-Element in der XML-Datei liest und dass sein name-Attribut der TextField-Eigenschaft zugewiesen wird.

  6. Klicken Sie auf Hinzufügen, um eine dritte Bindung für Bücher zu erstellen, und legen Sie danach DataMember unter Datenbindungseigenschaften auf book und TextField auf ISBN fest.

  7. Klicken Sie auf OK.

Sie können die Seite jetzt testen.

So testen Sie die Seite

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

    Dieses Mal werden im TreeView-Steuerelement die drei Ebenen angezeigt, die den von Ihnen definierten Bindungen entsprechen. Die drei Ebenen sind der Stammknoten mit der Beschriftung Book Information, die Genregruppen und die ISBN-Details.

Sie können eine Datenbindung für ein beliebiges Element in einer XML-Datei erstellen, aber Sie können nur an die Attribute des Elements, den inneren Text, den Namen des Elements oder den Wert des Elements binden. Sie können an keines der geschachtelten Elemente binden. Wenn Sie Werte in den geschachtelten Elementen anzeigen möchten, erstellen Sie separate Bindungen an diese Elemente. Eine alternative Methode besteht darin, die XML-Datei mit XSLT umzuwandeln, sodass die inneren Elemente in Attribute konvertiert werden. Weitere Informationen und ein Beispiel finden Sie unter der XmlDataSource.TransformFile-Eigenschaft.

Anzeigen von relationalen Daten im TreeView-Steuerelement

Im TreeView-Steuerelement kann jede Art hierarchischer Daten angezeigt werden, selbst wenn die Datenhierarchie logisch (wie in einer Datenbank) und nicht physikalisch (wie in einer XML-Datei) ist. In diesem Abschnitt verwenden Sie das TreeView-Steuerelement zum Anzeigen von Daten aus verknüpften Tabellen in der Datenbank Northwind.

Zu Beginn stellen Sie eine Verbindung mit dem Computer her, auf dem SQL Server ausgeführt wird und auf dem sich die Datenbank Northwind befindet.

So stellen Sie eine Verbindung zu SQL Server her

  1. Klicken Sie im Server-Explorer mit der rechten Maustaste auf Datenverbindungen, und klicken Sie dann auf Verbindung hinzufügen. Wenn Sie Visual Web Developer Express verwenden, verwenden Sie den Datenbank-Explorer.

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

    Hinweis:

    Wenn die Registerkarte Server-Explorer in Visual Web Developer nicht sichtbar ist, klicken Sie im Menü Ansicht auf Server-Explorer. Wenn die Registerkarte Datenbank-Explorer nicht sichtbar ist, klicken Sie im Menü Ansicht auf Datenbank-Explorer.

  2. Geben Sie im Dialogfeld Verbindung hinzufügen im Feld Servername den Servernamen ein.

  3. Wählen Sie im Abschnitt Beim Server anmelden die Option aus, die für den Zugriff auf die SQL Server-Datenbank geeignet ist (integrierte Sicherheit oder bestimmte ID und Kennwort), und geben Sie ggf. einen Benutzernamen und ein Kennwort ein.

  4. Aktivieren Sie das Kontrollkästchen Kennwort speichern.

    Hinweis:

    Verwenden Sie Kennwort speichern nicht in Produktionsanwendungen, da dabei der Benutzername und das Kennwort in die Anwendungsdateien eingebettet werden.

  5. Unter Datenbanknamen auswählen oder eingeben geben Sie Northwind ein.

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

    Die neue Verbindung wurde im Server-Explorer (oder im Datenbank-Explorer) unter Datenverbindungen erstellt.

Konfigurieren eines TreeView-Steuerelements zur Anzeige von Datenbankdaten

In diesem Abschnitt füllen Sie Knoten dynamisch mit Daten auf. Die Knoten der obersten Ebene stellen Masterdaten dar. In diesem Fall handelt es sich um Kategorien. Wenn Benutzer auf einen Knoten klicken, werden die untergeordneten Knoten für die Kategorie über eine Abfrage an die Datenbank erstellt, mit der die Produkte für diese Kategorie abgerufen werden. Zum Abrufen von Daten können Sie ein Datenquellen-Steuerelement verwenden. In dieser exemplarischen Vorgehensweise erstellen Sie jedoch programmgesteuert eine Abfrage und führen diese ebenso aus.

Zu Beginn erstellen Sie eine neue Seite und ein neues TreeView-Steuerelement.

So erstellen Sie die neue Seite und das TreeView-Steuerelement

  1. Fügen Sie der Website TreeViewDynamic.aspx eine ASP.NET-Webseite (Web Form-Seite) hinzu.

  2. Öffnen Sie die Seite TreeViewDynamic.aspx, wechseln Sie zur Entwurfsansicht, und ziehen Sie dann aus der Gruppe Standard in der Toolbox ein Label-Steuerelement auf die Seite. Geben Sie ihm den Namen labelStatus.

    Das labelStatus-Steuerelement wird nur für Problemberichte verwendet.

  3. Ziehen Sie in der Toolbox aus der Gruppe Navigation ein TreeView-Steuerelement auf die Seite.

  4. Klicken Sie mit der rechten Maustaste auf das TreeView-Steuerelement, klicken Sie auf Eigenschaften, und legen Sie danach MaxDataBindDepth auf 2 fest.

  5. Klicken Sie mit der rechten Maustaste auf das TreeView-Steuerelement, klicken Sie auf Smarttasks anzeigen, und klicken Sie dann im Menü TreeView-Aufgaben auf Knoten bearbeiten.

  6. Klicken Sie im Dialogfeld TreeView-Knoten-Editor auf das Symbol Stammknoten hinzufügen, und legen Sie dann, unter Eigenschaften, Text auf Product List und PopulateOnDemand auf true fest.

  7. Klicken Sie auf OK.

    Sie erstellen den obersten Knoten der Struktur. Dieser enthält nur statischen Text.

So konfigurieren Sie die Web.config-Datei

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

  2. Wählen Sie das SqlDataSource-Steuerelement aus, und klicken Sie dann auf Smarttag anzeigen.

  3. Klicken Sie im Menü SqlDataSource-Aufgaben auf Datenquelle konfigurieren.

    Der Assistent Datenquelle konfigurieren - SqlDataSource1 zeigt eine Seite an, auf der Sie eine Verbindung auswählen können.

  4. Geben Sie im Dialogfeld Über welche Datenverbindung soll die Anwendung eine Verbindung mit der Datenbank herstellen? die Verbindung ein, die Sie in "So stellen Sie eine Verbindung zu SQL Server her" erstellt haben, und klicken Sie dann auf Weiter.

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

    • Es ist sicherer als das Speichern in der Seite.

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

  5. Aktivieren Sie das Kontrollkästchen Ja, Verbindung speichern unter, und klicken Sie dann auf Weiter.

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

  6. Klicken Sie unter Spalten von Tabelle oder Ansicht angeben im Feld Name auf Kategorien.

  7. Wählen Sie unter Spalten die Felder CategoryID und CategoryName aus.

  8. Klicken Sie auf Weiter.

  9. Klicken Sie auf Fertig stellen.

    Sie verwenden die in der Datei Web.config erstellte Verbindungszeichenfolge zu einem späteren Zeitpunkt, und zwar in der RunQuery-Methode, die weiter unten in dieser exemplarischen Vorgehensweise definiert wird. Das SqlDataSource-Steuerelement wird nicht verwendet.

Jetzt fügen Sie Code hinzu, mit dem die untergeordneten Knoten des Steuerelements aufgefüllt werden, wenn Benutzer auf den Knoten klicken. Wenn Sie Knoten dynamisch hinzufügen möchten, erstellen Sie einen Ereignishandler für das TreeNodePopulate-Ereignis.

So erstellen Sie den Ereignishandler

  1. Klicken Sie mit der rechten Maustaste auf das TreeView-Steuerelement, und klicken Sie dann in Eigenschaften auf das Symbol Ereignisse.

  2. Doppelklicken Sie auf das Feld für das TreeNodePopulate-Ereignis.

    Visual Web Developer wechselt zur Quellansicht.

  3. Fügen Sie dem Handler den folgenden hervorgehobenen Code hinzu.

    Protected Sub TreeView1_TreeNodePopulate(ByVal sender As Object, _
    ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) _
    Handles TreeView1.TreeNodePopulate
        If e.Node.ChildNodes.Count = 0 Then
            Select Case e.Node.Depth
                Case 0
                    PopulateCategories(e.Node)
                Case 1
                    PopulateProducts(e.Node)
            End Select
        End If
    End Sub
    
    protected void TreeView1_TreeNodePopulate(
        object sender, TreeNodeEventArgs e)
    {
        if (e.Node.ChildNodes.Count == 0)
        {
            switch (e.Node.Depth)
            {
                case 0:
                    PopulateCategories(e.Node);
                    break;
                case 1:
                    PopulateProducts(e.Node);
                    break;
            }
        }
    }
    

    Dieser Code wird aufgerufen, wenn ein Benutzer auf einen Knoten klickt, um ihn zu öffnen. Da Sie auf unterschiedlichen Ebenen der Baumstruktur verschiedene Daten anzeigen möchten, müssen Sie die Tiefe des Knotens bestimmen, auf den der Benutzer geklickt hat, und danach die Knoten auf dieser Ebene entsprechend auffüllen. In dieser exemplarischen Vorgehensweise wird die PopulateCategories-Methode aufgerufen, wenn der Benutzer auf den Stammknoten (Tiefe 0) klickt. Die PopulateProducts-Methode wird aufgerufen, wenn der Benutzer auf einen Kategorienamen (Tiefe 1) klickt. Die Methoden werden im nächsten Abschnitt veranschaulicht.

    Das TreeNodeEventArgs-Objekt stellt programmgesteuerten Zugriff auf den aktuellen Knoten bereit. Fügen Sie dem Knoten Elemente hinzu, um ihn aufzufüllen. Im Beispielcode wird der Knoten an die Methode übergeben, mit der die untergeordneten Knoten hinzugefügt werden.

Lesen von Knotendaten aus der Datenbank

Die in den einzelnen Knoten anzuzeigenden Informationen stammen aus der Datenbank. Sie müssen Code schreiben, der die Datenbankabfrage ausführt, die Datensätze liest und einen Knoten für die einzelnen Datensätze erstellt. In dieser exemplarischen Vorgehensweise wird davon ausgegangen, dass Sie mit der Beispieldatenbank Northwind in SQL Server arbeiten. Sie müssen also ADO.NET-Objekte aus dem System.Data.SqlClient-Namespace verwenden.

In der ersten Knotenebene (Ebene 0) wird Ihnen eine Liste aller verfügbaren Kategorien angezeigt. Durch den von Ihnen erstellten Code wird eine RunQuery-Methode aufgerufen, die Sie später in der exemplarischen Vorgehensweise erstellen.

So fügen Sie Knoten für alle Kategorien hinzu

  1. Wechseln Sie in die Quellansicht.

  2. Wenn Sie mit einer Seite arbeiten, die aus einer einzelnen Datei besteht, fügen Sie am Beginn der Codepage die folgenden Direktiven hinzu.

    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    

    Durch das Importieren von Namespaces wird das Schreiben von erforderlichem Code einfacher.

  3. Wenn Sie mit einer zugrunde liegenden Codepage arbeiten, wechseln Sie zur zugrunde liegenden Codepage (TreeViewDynamic.aspx.vb oder TreeViewDynamic.aspx.cs), und fügen Sie die folgenden Zeilen am Beginn der Codedatei außerhalb der Klassendeklaration hinzu.

    Imports System.Data
    Imports System.Data.SqlClient
    
    using System.Data;
    using System.Data.SqlClient;
    
  4. Stellen Sie sicher, dass sich die Seite immer noch in der Quellansicht befindet.

  5. Fügen Sie dem Seitencode die folgende Methode hinzu.

    Sub PopulateCategories(ByVal node As TreeNode)
        Dim sqlQuery As New SqlCommand( _
            "Select CategoryName, CategoryID From Categories")
        Dim ResultSet As DataSet
        ResultSet = RunQuery(sqlQuery)
        If ResultSet.Tables.Count > 0 Then
            Dim row As DataRow
            For Each row In ResultSet.Tables(0).Rows
                Dim NewNode As TreeNode = New _
                    TreeNode(row("CategoryName").ToString(), _
                    row("CategoryID").ToString())
                NewNode.PopulateOnDemand = True
                NewNode.SelectAction = TreeNodeSelectAction.Expand
                node.ChildNodes.Add(NewNode)
            Next
        End If
    End Sub
    
    void PopulateCategories(TreeNode node)
    {
        SqlCommand sqlQuery = new SqlCommand(
            "Select CategoryName, CategoryID From Categories");
        DataSet resultSet;
        resultSet = RunQuery(sqlQuery);
        if (resultSet.Tables.Count > 0)
        {
            foreach (DataRow row in resultSet.Tables[0].Rows)
            {
                TreeNode NewNode = new
                    TreeNode(row["CategoryName"].ToString(),
                    row["CategoryID"].ToString());
                NewNode.PopulateOnDemand = true;
                NewNode.SelectAction = TreeNodeSelectAction.Expand;
                node.ChildNodes.Add(NewNode);
            }
        }
    }
    

    Mit dem Code wird ein SqlCommand-Objekt erstellt, das den Text der Abfrage kapselt. Er übergibt ein Objekt an eine (von Ihnen zu schreibende) Methode, die eine Datenbankabfrage ausführt und einDataSet-Objekt zurückgibt. Der Code durchläuft dann eine Schleife durch die Datensätze im DataSet-Objekt und erstellt für jeden Datensatz einen neuen Knoten. Dabei werden der Text und der Wert des Knotens auf Informationen aus der Datenbank festgelegt. Danach wird durch den Code die PopulateOnDemand-Eigenschaft für die einzelnen Knoten auf true festgelegt, sodass beim Klicken auf den jeweiligen Knoten dessen TreeNodePopulate-Ereignis ausgelöst wird. Die SelectAction-Eigenschaft wird so festgelegt, dass in der Standardeinstellung die Knoten erweitert werden.

Auf der zweiten Knotenebene werden die Produkte für die einzelnen Kategorien angezeigt. Aus diesem Grund ist beim Füllen der Produktknoten eine parametrisierte Abfrage notwendig, damit Sie die Produkte für die aktuelle Kategorie abrufen und die untergeordneten Knoten entsprechend füllen können.

So fügen Sie Knoten für Produkte hinzu

  • Fügen Sie dem Seitencode die folgende Methode hinzu.

    Sub PopulateProducts(ByVal node As TreeNode)
        Dim sqlQuery As New SqlCommand
        sqlQuery.CommandText = "Select ProductName From Products " & _
            " Where CategoryID = @categoryid"
        sqlQuery.Parameters.Add("@categoryid", SqlDbType.Int).Value = _
            node.Value
        Dim ResultSet As DataSet = RunQuery(sqlQuery)
        If ResultSet.Tables.Count > 0 Then
            Dim row As DataRow
            For Each row In ResultSet.Tables(0).Rows
                Dim NewNode As TreeNode = New _
                    TreeNode(row("ProductName").ToString())
                NewNode.PopulateOnDemand = False
                NewNode.SelectAction = TreeNodeSelectAction.None
                node.ChildNodes.Add(NewNode)
            Next
        End If
    End Sub
    
    void PopulateProducts(TreeNode node)
    {
        SqlCommand sqlQuery = new SqlCommand();
        sqlQuery.CommandText = "Select ProductName From Products " +
            " Where CategoryID = @categoryid";
        sqlQuery.Parameters.Add("@categoryid", SqlDbType.Int).Value =
            node.Value;
        DataSet ResultSet = RunQuery(sqlQuery);
        if (ResultSet.Tables.Count > 0)
        {
            foreach (DataRow row in ResultSet.Tables[0].Rows)
            {
                TreeNode NewNode = new
                    TreeNode(row["ProductName"].ToString());
                NewNode.PopulateOnDemand = false;
                NewNode.SelectAction = TreeNodeSelectAction.None;
                node.ChildNodes.Add(NewNode);
            }
        }
    }
    

    Dieser Code ähnelt dem Code, der zum Füllen der Kategorienknoten verwendet wird. Ein Unterschied besteht darin, dass das SqlCommand-Objekt mit einem Parameter konfiguriert wird, der bei Laufzeit auf den Wert des Knotens (d. h. der ausgewählten Kategorie) festgelegt wird, auf den der Benutzer geklickt hat. Ein anderer Unterschied ist, dass die PopulateOnDemand-Eigenschaft auf false festgelegt wird. Das führt dazu, dass die Produktknoten ohne Erweiterungsschaltfläche angezeigt werden. Dies ist erforderlich, da es unterhalb von Produkten keine weiteren Knoten gibt.

Der abschließende Schritt besteht im Erstellen der Methode, die die Abfrage ausführt und das Dataset zurückgibt.

So führen Sie die Abfrage durch

  • Fügen Sie der Seite die folgende Unterroutine hinzu.

    Function RunQuery(ByVal sqlQuery As SqlCommand) As DataSet
        Dim connectionString As String
        connectionString = _
            ConfigurationManager.ConnectionStrings _
            ("NorthwindConnectionString").ConnectionString
        Dim dbConnection As New SqlConnection
        dbConnection.ConnectionString = connectionString
        Dim dbAdapter As New SqlDataAdapter
        dbAdapter.SelectCommand = sqlQuery
        sqlQuery.Connection = dbConnection
        Dim resultsDataSet As DataSet = New DataSet
        Try
            dbAdapter.Fill(resultsDataSet)
        Catch ex As Exception
            labelStatus.Text = "Unable to connect to SQL Server."
        End Try
        Return resultsDataSet
    End Function
    
    private DataSet RunQuery(SqlCommand sqlQuery)
    {
        string connectionString =
            ConfigurationManager.ConnectionStrings
            ["NorthwindConnectionString"].ConnectionString;
        SqlConnection DBConnection =
            new SqlConnection(connectionString);
        SqlDataAdapter dbAdapter = new SqlDataAdapter();
        dbAdapter.SelectCommand = sqlQuery;
        sqlQuery.Connection = DBConnection;
        DataSet resultsDataSet = new DataSet();
        try
        {
            dbAdapter.Fill(resultsDataSet);
        }
        catch
        {
            labelStatus.Text = "Unable to connect to SQL Server.";
        }
        return resultsDataSet;
    }
    

    In diesem Code wird ein Datenadapter auf der Basis des an ihn übergebenen SqlCommand-Objekts erstellt. Danach wird ein Dataset mit dem Adapter erstellt und gefüllt.

Sie können die Seite jetzt testen.

So testen Sie die Seite

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

    Das TreeView-Steuerelement wird mit einer Liste von Kategorien und Produkten angezeigt.

  2. Klicken Sie auf eine Kategorie, um zu bestätigen, dass diese reduziert und anschließend wieder erweitert werden soll, um für jede Kategorie eine Liste mit Produkten anzuzeigen.

Nächste Schritte

In dieser exemplarischen Vorgehensweise werden sowohl hierarchische XML-Daten als auch eine relationale Datenbank verwendet, um ein TreeView-Steuerelement zu füllen. Sie können das TreeView-Steuerelement verwenden, um mit Informationen zu Websitenavigation und XML-Daten als Daten in Tabellenform (Listen) zu arbeiten.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen einer Webseite zum Anzeigen von XML-Daten

Weitere Ressourcen

Gewusst wie: Sichern von Verbindungszeichenfolgen bei der Verwendung von Datenquellensteuerelementen