Übersicht über das TreeView-Webserversteuerelement

Artikel
10/22/2014

Aktualisiert: November 2007

Das TreeView-Webserversteuerelement wird zur Anzeige hierarchischer Daten in einer Baumstruktur verwendet, z. B. bei Inhalts- oder Dateiverzeichnissen.

Dieses Thema enthält folgende Abschnitte:

Features
Hintergrund
Codebeispiele
Klassenreferenz

Features

Das TreeView-Steuerelement unterstützt die folgenden Features:

Automatische Datenbindung, bei der Knoten eines Steuerelements an hierarchische Daten, wie etwa ein XML-Dokument, gebunden werden.
Unterstützung der Sitenavigation durch Integration mit dem SiteMapDataSource-Steuerelement.
Knotentext, der entweder als auswählbarer Text oder als Hyperlink angezeigt werden kann.
Vom Benutzer anpassbare Darstellung durch Designs, benutzerdefinierte Bilder und Formate.
Programmgesteuerter Zugriff auf das TreeView-Objektmodell, sodass Sie dynamisch Baumstrukturen erstellen, Knoten auffüllen, Eigenschaften festlegen können usw.
Knotenauffüllung durch clientseitige Rückrufe an den Server (auf unterstützten Browsern).
Die Möglichkeit, neben jedem Knoten ein Kontrollkästchen anzuzeigen.

Zurück nach oben

Hintergrund

Mit dem TreeView-Webserversteuerelement lassen sich verschiedene Datentypen anzeigen: statische Daten, die deklarativ im Steuerelement angegeben werden, Daten, die an das Steuerelement gebunden sind, und ebenso Daten, die dem TreeView-Steuerelement als Antwort auf Benutzeraktionen programmgesteuert hinzugefügt werden.

Anzeigen von statischen Daten

Sie können statische Daten im TreeView-Steuerelement anzeigen, indem Sie eine Auflistung von TreeNode-Elementen erstellen, die dem TreeView-Steuerelement untergeordnet sind. Diese untergeordneten Elemente werden auch als untergeordnete Knoten bezeichnet.

Das folgende Beispiel zeigt das Markup für ein TreeView-Steuerelement mit drei Knoten, von denen zwei über untergeordnete Knoten verfügen.

<asp:TreeView ID="MyTreeView" Runat="server">
  <Nodes>
    <asp:TreeNode Value="Child1" Expanded="True" Text="1">
      <asp:TreeNode Value="Grandchild1" Text="A" />
      <asp:TreeNode Value="Grandchild2" Text="B" />
    </asp:TreeNode>
    <asp:TreeNode Value="Child2" Text="2" />
    <asp:TreeNode Value="Child3" Expanded="True" Text="3">
      <asp:TreeNode Value="Grandchild1" Text="A" />
    </asp:TreeNode>
  </Nodes>
</asp:TreeView>

Binden von Daten an das TreeView-Steuerelement

Ein TreeView-Steuerelement kann an eine Datenquelle gebunden werden, die die IHierarchicalDataSource-Schnittstelle unterstützt, z. B. das XmlDataSource-Steuerelement und das SiteMapDataSource-Steuerelement. Zusätzlich haben Sie durch die Datenbindung vollständige Kontrolle darüber, welche Felder von der Datenquelle gefüllt werden. Weitere Informationen finden Sie unter Binden von Daten an das TreeView-Webserversteuerelement.

Programmgesteuertes Anzeigen von Daten mit TreeNodeCollection

Durch Zugriff auf die Nodes-Eigenschaft, die eine TreeNodeCollection-Klasse zurückgibt, kann ein TreeView-Steuerelement programmgesteuert mit Daten aufgefüllt werden. TreeNodeCollection ist eine stark typisierte Auflistung von TreeNode-Objekten. Da ein TreeNode-Objekt eine Eigenschaft mit der Bezeichnung ChildNodes hat und diese Eigenschaft TreeNode-Objekte enthalten kann, ist die TreeNodeCollection-Klasse eine hierarchische Datenstruktur, die alle Knoten des TreeView-Steuerelements darstellt.

Ein Beispiel, wie die Knotenauflistung durchlaufen wird, finden Sie unter Nodes.

TreeView-Knotentypen

Das TreeView-Steuerelement besteht aus einem oder mehreren Knoten. Jeder Eintrag in einer Baumstruktur wird als Knoten bezeichnet und durch ein TreeNode-Objekt dargestellt. Die folgende Tabelle beschreibt die drei verschiedenen Knotentypen.

Knotentyp	Beschreibung
Root	Ein Knoten, der keinen übergeordneten Knoten, aber einen oder mehrere untergeordnete Knoten hat.
Parent	Ein Knoten, der einen übergeordneten Knoten und einen oder mehrere untergeordnete Knoten hat.
Blatt	Ein Knoten, der keine untergeordneten Knoten hat.

Obwohl eine typische Baumstruktur nur einen Stammknoten besitzt, lässt das TreeView-Steuerelement das Hinzufügen von mehreren Stammknoten in die Baumstruktur zu. Dies ist hilfreich für das Anzeigen von Elementauflistungen ohne einzelnen Hauptstammknoten, z. B. bei einer Liste von Produktkategorien.

Jeder Knoten verfügt über eine Text-Eigenschaft und eine Value-Eigenschaft. Der Wert der Text-Eigenschaft wird im TreeView-Steuerelement angezeigt. Mit der Value-Eigenschaft können zusätzliche Daten über den Knoten gespeichert werden, beispielsweise die an das Postbackereignis des Knotens übergebenen Daten.

Per Mausklick auf einen Knoten des TreeView-Steuerelements wird entweder ein Auswahlereignis ausgelöst (über Postback) oder ein Wechsel zu einer anderen Seite. Wenn die href-Eigenschaft nicht festgelegt ist, wird durch Klicken auf einen Knoten das SelectedNodeChanged-Ereignis ausgelöst. Dieses kann dazu verwendet werden, benutzerdefinierte Funktionen zur Verfügung zu stellen. Mit der SelectAction-Eigenschaft des Knotens können zudem Aktionen angegeben werden, die bei einem Mausklick auf den Knoten ausgeführt werden (z. B. Erweitern/Reduzieren des Knotens). Um beim Mausklick auf einen Knoten zu einer anderen Seite zu wechseln anstatt ein Auswahlereignis auszulösen, legen Sie die href-Eigenschaft des Knotens auf einen anderen Wert als eine leere Zeichenfolge ("") fest.

Auffüllen von TreeNode-Daten bei Bedarf

Statische Datenstrukturen sind nicht immer praktisch. Oft sind Daten von Informationen abhängig, die erst zur Laufzeit ermittelt werden. Um Daten dynamisch anzuzeigen, unterstützt das TreeView-Steuerelement dynamische Knotenauffüllung. Ist das TreeView-Steuerelement für das Auffüllen auf Anforderung konfiguriert, löst das Steuerelement ein Ereignis aus, sobald ein Benutzer den Knoten erweitert. Der Ereignishandler erhält die entsprechenden Daten und füllt den Knoten, den der Benutzer angeklickt hat. Um das TreeNode-Objekt auf Anforderung mit Daten zu füllen, muss die PopulateOnDemand-Eigenschaft eines Knotens auf true festgelegt und ein TreeNodePopulate-Ereignishandler erstellt werden, der wiederum das TreeNode-Objekt mit Daten füllt.

Clientseitige TreeView-Knotenauffüllung

Jeder Browser, dessen SupportsCallback-Eigenschaft in der Konfigurationsdatei für die Browsereigenschaften auf true festgelegt ist, unterstützt die clientseitige Knotenauffüllung.

Mithilfe der clientseitigen Knotenauffüllung kann das TreeView-Steuerelement einen Knoten durch Aufruf des TreeNodePopulate-Ereignisses im Clientskript auffüllen, anstatt ein vollständiges Postback zum Server auszuführen. Weitere Informationen über clientseitige Knotenauffüllung finden Sie unter PopulateNodesFromClient.

Aktivieren von Clientskript

Standardmäßig wird in Browsern höherer Ebene die Erweitern/Reduzieren-Funktionalität eines Knotens auf dem TreeView-Steuerelement mit Clientskript ausgeführt. Die Verwendung von Clientskript erhöht die Ausgabeeffizienz, da das Steuerelement kein Postback an den Server senden muss, um die neue Konfiguration auszugeben.

Hinweis:
Wenn Clientskript im Browser deaktiviert ist oder der Browser Clientskript nicht unterstützt, geht das TreeView-Steuerelement in den Downlevelmodus und sendet bei jedem Mausklick auf den Knoten ein Postback an den Server.

TreeView-Postback

Standardmäßig wird die Erweitern/Reduzieren-Funktionalität durch das TreeView-Steuerelement auf dem Client behandelt, auch wenn der Browser Clientskript nicht unterstützt oder die EnableClientScript-Eigenschaft auf false festgelegt ist. Wenn die PopulateNodesFromClient-Eigenschaft auf true festgelegt ist und der Browser Clientskript unterstützt, erhält das TreeView-Steuerelement die Daten vom Server ohne Postback der gesamten Seite.

Wenn das TreeView-Steuerelement im Auswahlmodus ist, geschieht jedes Mal ein Postback, wenn ein Benutzer auf einen Knoten klickt, und das SelectedNodeChanged-Ereignis wird ausgelöst.

Postbackereignisse sollten normalerweise behandelt werden, wenn das TreeView-Steuerelement im Auswahlmodus ist oder die Knoten dynamisch gefüllt werden. Das ist deshalb so, weil entweder die PopulateOnDemand-Eigenschaft oder die PopulateNodesFromClient-Eigenschaft auf true festgelegt ist.

Verwenden des TreeView-Steuerelements mit UpdatePanel-Steuerelementen

UpdatePanel-Steuerelemente werden verwendet, um ausgewählte Teile der Seite zu aktualisieren, statt die gesamte Seite mit einem Postback zu aktualisieren. Das TreeView-Steuerelement kann mit den folgenden Einschränkungen in einem UpdatePanel-Steuerelement verwendet werden:

TreeView-Rückrufe müssen asynchronen Postbacks zugeordnet sein, da andernfalls die Validierung von Rückrufereignissen fehlschlägt. Wenn Sie die PopulateOnDemand-Eigenschaft der TreeNode-Steuerelemente auf true festlegen, werden Rückrufe aktiviert. Mit einem der folgenden Ansätze können Sie sicherstellen, dass TreeView-Rückrufe in Verbindung mit dem UpdatePanel-Steuerelement funktionieren:
- Wenn das TreeView-Steuerelement sich nicht innerhalb eines UpdatePanel-Steuerelements befindet, deaktivieren Sie Rückrufe der TreeNode-Steuerelemente, die nicht zu einem asynchronen Postback gehören. Legen Sie zu diesem Zweck die PopulateOnDemand-Eigenschaft auf false fest.
- Aktualisieren Sie programmgesteuert alle Steuerelemente, die während des asynchronen Postbacks Rückrufe registrieren. Beispielsweise können Sie das TreeView-Steuerelement innerhalb eines UpdatePanel-Steuerelements platzieren. Das TreeView-Steuerelement muss sich nicht in dem UpdatePanel-Steuerelement befinden, aus dem der asynchrone Postback stammt, solange das UpdatePanel-Steuerelement, in dem das TreeView-Steuerelement enthalten ist, aktualisiert wird.
Sie müssen Stile zuweisen, indem Sie einen Verweis auf eine CSS (Cascading Style Sheet)-Klasse verwenden. Anstatt beispielsweise die NodeStyle-Eigenschaft mithilfe eines Eigenschaft-Untereigenschaft-Attributs festzulegen, legen Sie den Stil mithilfe des Eigenschaft-CssClass-Attributs fest. Wenn Sie die NodeStyle-Vorlage zum Festlegen des Stils verwenden, verwenden Sie entsprechend das CssClass-Attribut der Vorlage.
Die EnableClientScript-Eigenschaft muss auf den Standardwert true festgelegt sein. Außerdem können Sie die EnableClientScript-Eigenschaft zwischen asynchronen Postbacks nicht ändern, wenn für das TreeView-Steuerelement Rückrufe aktiviert sind.

Weitere Informationen zur Verwendung von UpdatePanel-Steuerelementen finden Sie unter Übersicht über das UpdatePanel-Steuerelement und Übersicht über das Teilrendering von Seiten.

TreeNode-Rendering

Jedes TreeNode-Objekt enthält vier Benutzeroberflächenelemente, die in der folgenden Abbildung dagestellt und in der darunterstehenden Tabelle beschrieben werden.

TreeNode-Benutzeroberflächenelemente

Element	Beschreibung
Abbildung Erweitern/Reduzieren	Ein optionales Bild, das angibt, ob der Knoten erweitert werden kann, um untergeordnete Knoten anzuzeigen. Dies ist standardmäßig ein Pluszeichen [+], wenn der Knoten erweitert, oder ein Minuszeichen [-], wenn der Knoten reduziert werden kann.
Kontrollkästchen	Kontrollkästchen können optional aktiviert werden. Dadurch können Benutzer einen bestimmten Knoten auswählen.
Knotenbild	Sie können ein Knotenbild angeben, das neben dem Knotentext angezeigt wird.
Knotentext	Knotentext ist der eigentliche Text, der auf dem TreeNode-Objekt angezeigt wird. Knotentext verhält sich im Navigationsmodus wie ein Hyperlink und im Auswahlmodus wie eine Schaltfläche.

Zusätzlich zu den eigenen Eigenschaften unterstützt das TreeView-Steuerelement auch die Eigenschaften der TreeNodeStyle-Steuerelemente für jeden Knotentyp. Diese Formateigenschaften überschreiben die NodeStyle-Eigenschaft, die für alle Knotentypen gilt.

Das TreeView-Steuerelement verfügt außerdem über eine NodeIndent-Eigenschaft, welche die Einzugsebene für alle Knoten angibt. Knoten werden von der Seite eingezogen, auf der das TreeView-Steuerelement dargestellt wird. Für Gebietsschemas mit Darstellung von links nach rechts bedeutet dies auf der linken Seite, auf der rechten Seite wiederum für Gebietsschemas, welche von rechts nach links darstellen.

Ein Knoten kann bei einer Auswahl oder bei einer Mausbewegung darüber ein anderes Format erhalten. Sobald die Selected-Eigenschaft eines Knotens auf true festgelegt wird, gilt die SelectedNodeStyle-Eigenschaft. Die Formateigenschaften des unselektierten Knotens werden dadurch überschrieben. Wird der Mauszeiger über einen Knoten bewegt, gilt die HoverNodeStyle-Eigenschaft. Das folgende Bild und die Tabelle beschreiben die TreeNodeStyle-Eigenschaften.

TreeNodeStyle-Eigenschaften

Knoteneigenschaft	Beschreibung
NodeSpacing	Legt den vertikalen Abstand zwischen aktuellem Knoten und dem jeweils direkt darüber- und darunterliegenden Knoten fest.
VerticalPadding	Legt den dargestellten Abstand über und unter dem im TreeNode enthaltenen Text fest.
HorizontalPadding	Legt den dargestellten Abstand links und rechts des im TreeNode enthaltenen Textes fest.
ChildNodesPadding	Legt den dargestellten Abstand über und unter den untergeordneten Knoten des TreeNode fest.
ImageUrl	Gibt den Pfad zu dem Bild an, welches neben dem TreeNode angezeigt wird.

Weitere Informationen finden Sie unter Anpassen von Aussehen und Verhalten des TreeView-Webserversteuerelements.

Anzeigen eines Kontrollkästchens neben einem TreeView-Knoten

Ein weiteres anpassbares Ausgabefeature des TreeView-Steuerelements ist seine Fähigkeit, mit der ShowCheckBoxes-Eigenschaft Kontrollkästchen zwischen dem Knotentext und dem Knotenbild auszugeben. Durch Kontrollkästchen können mehrere Knoten gleichzeitig ausgewählt werden. Dies ist insbesondere für Schnittstellen wie eine Newsgroup-Baumstruktur nützlich, bei der Benutzer gleichzeitig mehrere Newsgroups auswählen können. Weitere Informationen zur Verwendung von Kontrollkästchen finden Sie unter Auswahl, Navigation und Kontrollkästchen im TreeView-Webserversteuerelement.

Verwenden der ExpandDepth-Eigenschaft

Standardmäßig zeigt das TreeView-Steuerelement alle Knoten der Struktur erweitert an. Sie können die anfängliche Anzeigetiefe im TreeView-Steuerelement konfigurieren. Legen Sie hierzu die ExpandDepth-Eigenschaft auf eine Zahl fest, die der Knotenebene entspricht, die Sie anzeigen möchten. Wenn Sie beispielsweise die ExpandDepth-Eigenschaft auf 2 festlegen, werden zwei Knotenebenen oder zwei Unterknoten bei der ersten Ausgabe der Website angezeigt.