Einführung in das TreeView-Websteuerelement

Veröffentlicht: 16. Apr 2003 | Aktualisiert: 22. Jun 2004

Microsoft® Internet Explorer-Websteuerelemente werden derzeit nicht unterstützt.

Dieser Artikel enthält eine Einführung in die Dokumenterstellung mit dem TreeView-Steuerelement, das die Erstellung von Benutzeroberflächen vereinfacht, in denen hierarchische DataSets, Ordneransichten und ähnliche Datenstrukturen dargestellt werden. Dieses Steuerelement implementiert mehrere leistungsstarke Features. Dazu zählen unter anderem Unterstützung für die Datenbindung und umfassende Dynamic HTML (DHTML)-Verhalten in erweiterten Browsern. In den meisten Szenarios kann eine Strukturansicht (TreeView) deklarativ erstellt werden. Dieses Steuerelement kann jedoch auch weitgehend auf dem Client oder Server programmiert werden. (Dieser Artikel enthält auch Links zu englischsprachigen Seiten.)

Auf dieser Seite

 Einführung
 Voraussetzungen
 Terminologie
 "TreeView"-Objekte
 ASP .NET-Serversteuerelemente
 Clientverhalten
 "TreeView"-Elemente
 Erstellen einer einfachen Strukturansicht
 Formatieren
 Definieren eines "TreeNodeType"-Elements
 Anpassen von Strukturknoten anhand ihrer Tiefe
 Anwenden von Stilen
 Datenbindung
 Datenbindung mit XML und XSL-Vorlagen
 Datenbindung an mehrere XML-Dateien
 Datenbindung mit XML und SQL Server
 Namespacevererbung bei der Datenbindung
 Programmieren
 "TreeView"-Ereignisse
 Serverseitige Includes
 Leistungstipps
 Strukturgröße
 Verwandte Themen

Einführung

Das TreeView-Steuerelement ist ein ASP.NET-Serversteuerelement zum Erstellen von Benutzeroberflächen, in denen hierarchische Daten dargestellt werden. Wie alle anderen Microsoft® Internet Explorer-Websteuerelemente stellt das TreeView-Steuerelement den HTML-Inhalt basierend auf dem Browsertyp bereit. In einfachen Browsern handelt es sich bei dem vom TreeView-ASP.NET-Serversteuerelement gesendeten Seiteninhalt um HTML 3.2. In erweiterten Browsern verwenden die HTML-Seiten dagegen auch DHTML-Verhalten, das heißt clientbasierte Komponenten, die benutzerdefinierte Elemente definieren. Im Zusammenhang mit Websteuerelementen ist unter einem erweiterten Browser Internet Explorer 5.5 oder höher und unter einem einfachen Browser Internet Explorer 5.01 oder niedriger bzw. ein anderer Browser als der Internet Explorer zu verstehen.

Dieser Überblick bietet praktische Beispiele, die die Erstellung und Verwendung der TreeView-Steuerelemente veranschaulichen. TreeView ist eines von vier Websteuerelementen. Für das Erstellen von Webseiten mit diesen Steuerelementen gelten daher ähnliche Voraussetzungen. Allgemeine Informationen zu den Websteuerelementen sowie Download- und Installationsanweisungen finden Sie unter Internet Explorer WebControls und Authoring Web Forms with the WebControls.

Die Websteuerelemente sind ASP.NET-Serversteuerelemente mit einer Reihe von DHTML-Verhalten, die in erweiterten Browsern die Benutzerfreundlichkeit verbessern. Für jedes der Websteuerelemente legt ein DHTML-Verhalten ein clientseitiges Objektmodell offen, das dem serverseitigen, vom ASP.NET-Serversteuerelement implementierten Objektmodell weitgehend entspricht. Da die Komponentenarchitektur in Internet Explorer 5.5 und ASP.NET bestimmte Unterschiede aufweist, unterscheiden sich die von den client- und serverseitigen Objekten offen gelegten Objektmodelle geringfügig.

Durch die Verwendung von client- und serverseitigen Komponenten können zwei Modi zur Erstellung von Webseiten mit dem TreeView-Steuerelement verwendet werden. In ASP.NET können Web Forms geschrieben werden, die Inhalt basierend auf den Browserfunktionen übertragen. In erweiterten Browsern werden dabei Verhalten verwendet. Diese Seiten können serverseitiges Skript verwenden, das mit einer der CLR (Common Language Runtime)-Sprachen geschrieben wird. Für Internet Explorer 5.5 oder höher können Webseiten erstellt werden, die DHTML-Verhalten mit clientbasiertem Skript verwenden.

Voraussetzungen

Für die Lektüre dieses Artikels sollten Sie idealerweise bereits mit den grundlegenden ASP.NET-Steuerelementtypen und deren Verwendung zum Erstellen einer einfachen Web Forms-Seite vertraut sein. Grundlegende Kenntnisse im Browserskripting und in DHTML-Verhalten sind ebenfalls erforderlich, da die Websteuerelemente in erweiterten Browsern Verhalten verwenden.

Die Codebeispiele in diesem Artikel sind mit Microsoft C# und Microsoft Visual Basic® .NET geschrieben. Für Webentwickler sollten diese Beispiele selbst dann kein Problem darstellen, wenn sie zuvor noch nicht mit ASP.NET und der Common Language Runtime gearbeitet haben.

Weitere Informationen zu den Installationsanforderungen für die Verwendung von Webseiten mit ASP.NET und den Websteuerelementen finden Sie in den Internet Explorer WebControls.

Terminologie

Begriff

Beschreibung

Web Forms

Das ASP.NET Web Forms-Seiten-Framework ist ein skalierbares Common Language Runtime-Programmiermodell, das zur dynamischen Erzeugung von Webseiten verwendet werden kann. Web Forms sind ASPX-Dateien, die von ASP.NET analysiert und verarbeitet werden. Die Websteuerelemente sind benutzerdefinierte ASP.NET-Steuerelemente zur Dokumenterstellung in der Web Forms-Umgebung.

"TreeView"-Objekte

In diesem Abschnitt werden die grundlegenden Gemeinsamkeiten und Unterschiede zwischen den Client- und Serverimplementierungen der Strukturansicht beschrieben. Die TreeView-Referenzseite enthält Links zur Referenzdokumentation für die von den TreeView-Komponenten offen gelegten client- und serverseitigen Objekte.

Das TreeView-Steuerelement kann auch visuell mit Hilfe des TreeView-Editors in Visual Studio .NET erstellt werden. In diesem Artikel werden in erster Linie manuelle Methoden zur Inhaltserstellung mit dem TreeView-Steuerelement behandelt. Weitere Informationen zur visuellen Bearbeitung mit dem TreeView-Steuerelement finden Sie unter Using the TreeView Designer in Visual Studio .NET.

Die Strukturansicht kann deklarativ erstellt und auch mit Skript auf dem Client oder Server programmiert werden. Bei der deklarativen Erstellung sind sich die von den Client- und Serverkomponenten unterstützten Elemente und Attribute sehr ähnlich. Daher funktionieren die in diesem Artikel verwendeten deklarativen Beispiele in Web Forms-Seiten, die ASP.NET-TreeView-Serversteuerelemente verwenden, und in HTML-Seiten, die das TreeView-Verhalten verwenden.

Aufgrund der Unterschiede zwischen den in ASP.NET und Internet Explorer unterstützten Programmiersprachen werden für die Client- und Serverkomponenten separate Referenzdokumentationen bereitgestellt.

ASP .NET-Serversteuerelemente

Das umfassendste Programmiermodell für die Strukturansicht wird von den ASP.NET-Serversteuerelementen offen gelegt. Die Verwendung der ASP.NET-Serversteuerelemente wird für Szenarios empfohlen, in denen Webseiten in vielen unterschiedlichen Browsern funktionieren müssen. Dies ist darauf zurückzuführen, dass Websteuerelemente den Browsertyp erkennen und HTML 3.2-Inhalt an die einfachen Browser übertragen.

Weitere Informationen finden Sie in der ASP .NET Server Controls-Referenz.

Clientverhalten

Entwicklern, die die Clientleistung in Internet Explorer 5.5 und höher optimieren möchten, steht auch ein TreeView-Verhalten zur Verfügung. ASP.NET-Webformulare, die die Websteuerelemente verwenden, downloaden das TreeView-Verhalten automatisch in erweiterte Browser. Daher kann das TreeView-Verhalten beim Erstellen von HTML-Seiten, die nur für den Client bestimmt sind, unabhängig von ASP.NET verwendet werden.

Die in vielen Microsoft Windows®-Anwendungen verwendeten Strukturansichten enthalten meist zahlreiche Features, z.B. können die Knoten in einer TreeView-Strukturansicht über die Maus oder die Tastatur erweitert und minimiert werden. Das TreeView-Verhalten unterstützt alle dieser Features, und die Datenbindung kann in client- oder serverbasierten Webseiten implementiert werden.

"TreeView"-Elemente

Die Strukturansicht kann mit einem oder einer Kombination der folgenden Elemente erstellt werden. Diese Elemente werden von den client- und serverseitigen TreeView-Komponenten unterstützt.

Elementname

Beschreibung

TreeView

Definiert eine Strukturansicht.

TreeNodeType

Definiert einen Knotentyp, der für einen Knoten oder eine Gruppe von Knoten in einer Strukturansicht gilt.

TreeNode

Erstellt einen Knoten in einer Strukturansicht.

Referenzdokumentation steht für die Dokumenterstellung mit den TreeView-ASP.NET-Serversteuerelementen und dem TreeView-Verhalten zur Verfügung. Weitere Informationen finden Sie auf der TreeView-Referenzseite.

Das TreeView-Element ist ein Container für TreeNode- und TreeNodeType-Elemente. Diese Elemente definieren gemeinsam die Struktur, das Layout und die Darstellung einer Strukturansicht. Eine Strukturansicht kann keinen anderen HTML-Inhalt als diese drei Elemente enthalten.

Das TreeView-Element kann eine unbeschränkte Anzahl von TreeNodeType-Elementen enthalten, sofern ausreichende Ressourcen auf den Client- und Hostcomputern verfügbar sind. TreeNodeType-Elemente dienen zum Definieren von Stilen, Bildern und anderen Verhalten für TreeNode-Elemente. TreeNode-Elemente können anhand ihres Typs (Type) gruppiert werden, so dass sie mit Hilfe des TreeNodeType-Elements formatiert und geändert werden können. TreeNodeType-Elemente müssen dem TreeView-Element untergeordnet sein und vor dem ersten TreeNode-Element auftreten.

Das TreeNode-Element kann nur andere TreeNode-Elemente enthalten. HTML-Inhalt kann jedoch in eine Strukturansicht eingebettet werden, indem er der Text-Eigenschaft eines TreeNode-Elements zugewiesen wird. Der Text-Inhalt eines TreeNode-Elements wird als HTML dargestellt und nicht als unformatierter Text.

Erstellen einer einfachen Strukturansicht

In diesem Abschnitt werden die Schritte zum Erstellen einer einfachen Strukturansicht erläutert. Alle Schritte können mit einem beliebigen Text-Editor ausgeführt werden.

Für das folgende Verfahren müssen die Websteuerelemente installiert werden. Weitere Informationen finden Sie im Überblick Internet Explorer WebControls.

  • Erstellen Sie eine Webanwendung.
    Dem Web sollte der Name webcontrols zugewiesen werden. Dieser Name wird in allen Beispielen in diesem Artikel verwendet. Das neue Web muss als Webanwendung konfiguriert werden, damit die Websteuerelemente einwandfrei funktionieren.

  • Erstellen Sie eine leere Web Forms-Seite.
    Fügen Sie dem Web eine neue Datei hinzu, und speichern Sie diese unter tree1.aspx.

  • Fügen Sie die Import-Direktive hinzu.
    Codieren Sie die Import-Direktive für die Websteuerelemente in der ersten Zeile des Web Form. Sie sollte wie folgt aussehen:

    <%@ import namespace="Microsoft.Web.UI.WebControls" %>
    

  • Fügen Sie die @ Register-Direktive hinzu.
    Codieren Sie die @ Register-Direktive für die Websteuerelemente in der zweiten Zeile des Web Form.

    <%@ Register TagPrefix="mytree"  
    Namespace="Microsoft.Web.UI.WebControls"  
    Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    

  • Fügen Sie die Dokumentstruktur hinzu.
    Fügen Sie den folgenden Inhalt unter der @ Register-Direktive hinzu, um eine grundlegende Dokumentstruktur bereitzustellen.

    <HTML> 
    <HEAD></HEAD> 
    <BODY></BODY> 
    </HTML>
    

  • Fügen Sie ein Form-Element hinzu.
    Alle Websteuerelemente müssen innerhalb eines FORM-Elements erstellt werden. Daher müssen Sie im BODY-Element des Dokuments das folgende Markup hinzufügen.

    <BODY> 
    <FORM runat="server"></FORM> 
    </BODY>
    

    Beachten Sie, dass das runat-Attribut für das FORM-Element definiert wird, um anzuzeigen, dass die Ergebnisse einer Benutzereingabe von ASP.NET verarbeitet werden.

    Jetzt enthält das Web Form alle Verarbeitungsdirektiven, Elemente und Inhalte, die zum Erstellen der Websteuerelemente erforderlich sind. Der Inhalt der Datei tree1.aspx sollte nun in etwa wie folgt aussehen:

    <%@ import namespace="Microsoft.Web.UI.WebControls" %> 
    <%@ Register TagPrefix="mytree"  
    Namespace="Microsoft.Web.UI.WebControls"  
    Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 
    <HEAD></HEAD> 
    <BODY> 
      <FORM runat="server"></FORM> 
    </BODY>
    

    Speichern Sie die Seite, und zeigen Sie sie im Browser an. Wenn die vorhergehenden Schritte korrekt ausgeführt wurden, wird nur eine leere Seite angezeigt. Die Seite wird vor dem Anzeigen kompiliert, und alle Fehler in der Syntax werden hervorgehoben. Beheben Sie die angezeigten Fehler. Wenn der obige Beispielcode nicht funktioniert, wurden die Websteuerelemente unter Umständen nicht korrekt installiert.

    Tipp:
    Für den abenteuerlustigen Leser: Bauen Sie Schreibfehler in den Wert des Namespace oder die Assemblyattribute in den Deklarationen ein. Speichern Sie die Seite, und zeigen Sie sie erneut an. Dies ist eine sinnvolle Übung, da Sie auf diese Weise sehen können, wie die Common Language Runtime Fehler für Web Forms meldet.

  • Fügen Sie ein TreeView-Element hinzu.
    Fügen Sie ein TreeView-Element als untergeordnetes Element von FORM hinzu, und setzen Sie das runat-Attribut auf server.

    <BODY> 
      <FORM runat="server"> 
       <mytree:treeview runat="server"></mytree:treeview> 
      </FORM> 
    </BODY>
    

    Da das TreeView-Element zu diesem Zeitpunkt keine Knoten enthält, wird auf der Webseite nichts dargestellt.

    Anmerkung:
    Beachten Sie das Tagpräfix für das TreeView-Element. Der Wert mytree wird für alle Websteuerelemente in der Seite verwendet, da es in der @ Register-Direktive vordefiniert wurde.

  • Fügen Sie dem TreeView-Element ein TreeNode-Element hinzu.
    Fügen Sie anschließend ein TreeNode-Element als untergeordnetes Element des TreeView-Elements hinzu.

    <mytree:treeview runat="server"> 
      <mytree:treenode text="Mein erster Strukturknoten"> 
      </mytree:treenode> 
    </mytree:treeview>
    

    Die folgende Abbildung zeigt die anfängliche Darstellung der Strukturansicht.

    treenode1a.gif


    Da nur ein Knoten vorhanden ist, dient dieser als Stammknoten, und er erhält den Fokus. Die Farbe des Hintergrunds ist der Standardstil. Diese Einstellung kann mit Hilfe der entsprechenden Eigenschaften überschrieben werden. Der Knoten kann durch Klicken ausgewählt werden.

  • Fügen Sie ein zweites TreeNode-Element hinzu.
    Fügen Sie ein weiteres TreeNode-Element als untergeordnetes Element des ersten TreeNode-Elements hinzu.

    <mytree:treeview runat="server"> 
      <mytree:treenode text="Mein erster Strukturknoten"> 
     <mytree:treenode text="Mein zweiter Strukturknoten"> 
     </mytree:treenode> 
      </mytree:treenode> 
    </mytree:treeview>
    

  • Speichern Sie die Seite, und zeigen Sie sie an.
    Die folgende Abbildung zeigt eine Darstellung des Anfangsstatus der Strukturansicht.

    treenode1b.gif


    In der Strukturansicht wird nun der Stammknoten dargestellt, und durch eine Grafik wird angezeigt, dass der Knoten erweitert werden kann. Der Knoten kann durch Klicken erweitert bzw. minimiert werden.

    Anmerkung:
    Dieses Beispiel zeigt, dass ein Knoten in einer
    Strukturansicht standardmäßig minimiert ist. Der Anfangsstatus eines Knotens kann durch Einstellen der zugehörigen Expanded-Eigenschaft festgelegt werden.


Damit ist das grundlegende TreeView-Beispiel abgeschlossen. In den folgenden Beispielen werden weitere Eigenschaften und Features der Strukturansicht vorgestellt.

Formatieren

In diesem Abschnitt werden einige hilfreiche Techniken zum Anpassen der Darstellung einer TreeView-Benutzeroberfläche beschrieben. TreeNode-Elemente können individuell formatiert werden, und Gruppen von Knoten mit demselben Type-Attribut können ebenfalls geändert werden.

Häufig ist es wünschenswert, für jede Ebene einer Strukturansicht eine unterschiedliche Grafik darzustellen. In einigen Fällen muss die Darstellung für einzelne Knoten unabhängig von deren Tiefe in der Struktur und dem Stil der übergeordneten Elemente angepasst werden. Die Strukturansicht bietet für all diese Möglichkeiten entsprechende Eigenschaften.

Definieren eines "TreeNodeType"-Elements

Im folgenden Beispiel wird eine Strukturansicht für eine kleine Auflistung von US-Bundesstaaten und -Städten dargestellt. Zum Anpassen der Knotendarstellung wurde als Erstes mit einem TreeNodeType-Element ein Knoten mit dem Type-Attribut Folder definiert.

<%@ import 
 namespace="Microsoft.Web.UI.WebControls" %>  
 <%@ Register TagPrefix="mytree"  
Namespace="Microsoft.Web.UI.WebControls"  
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 
<html> 
<head> 
</head> 
<body> 
<form id="myform" runat="server"> 
<mytree:treeview runat="server" ChildType="Folder"> 
<mytree:treenodetype Type="Folder" 
   ExpandedImageUrl="./images/folderopen.gif" 
   ImageUrl="./images/folder.gif" /> 
   <mytree:treenode Text="Michigan"> 
   <mytree:treenode Text="Detroit" /> 
   <mytree:treenode Text="Farmington" /> 
   <mytree:treenode Text="Southfield" /> 
   </mytree:treenode> 
   <mytree:treenode Text="Washington" > 
   <mytree:treenode Text="Bellevue" /> 
   <mytree:treenode Text="Redmond" /> 
   <mytree:treenode Text="Woodinville" /> 
   </mytree:treenode> 
</mytree:treeview> 
</form>  
</body> 
</html>

Dieses Feature erfordert Microsoft® Internet Explorer 3.0 oder höher. Klicken Sie auf das folgende Symbol, um die neueste Version zu installieren. Laden Sie diese Seite anschließend neu, um das Beispiel anzuzeigen.

ieget_animated.gif

Dieses Beispiel veranschaulicht die Verwendung des TreeNodeType-Elements. Dieses Element eignet sich zur Formatierung und Strukturierung des Layouts und der Darstellung einer Strukturansicht. Das ChildType-Attribut wird als Folder für das TreeView-Element angegeben. Da ChildType für die Strukturansicht, das heißt das Containerelement für die gesamte Struktur, definiert wird, werden alle TreeNode-Elemente mit dem Type-Attribut Folder eingerichtet. Dieser Ansatz ist weitaus effizienter als das Hinzufügen des Type-Attributs zu jedem einzelnen Knoten.

Nachdem das ChildType-Attribut Folder für die Strukturansicht deklariert wurde, muss dieser Typ mit dem TreeNodeType-Element definiert werden. Das Type-Attribut des TreeNodeType-Elements im Beispiel ist daher auf den gleichen Wert gesetzt, das heißt Folder.

Die ExpandedImageUrl- und ImageUrl-Eigenschaften setzen die Verwendung der standardmäßigen TreeView-Bilder für die erweiterte bzw. normale Knotendarstellung außer Kraft.

Anpassen von Strukturknoten anhand ihrer Tiefe

Im nächsten Beispiel werden einige geringfügige Erweiterungen an dem vorhergehenden Code vorgenommen, so dass für jede Ebene der Strukturansicht benutzerdefinierte Ordnersymbole angezeigt werden. Zwei Ebenen von TreeNode-Elementen werden im folgenden Beispiel verwendet. In diesem Fall sind die Knoten zur Darstellung von Städten in Knoten geschachtelt, die Bundesstaaten darstellen.

<mytree:treeview runat="server" ChildType="Folder"> 
<mytree:treenodetype Type="Folder" ChildType="City"  
  ExpandedImageUrl="folderopen.gif" ImageUrl="folder.gif" /> 
<mytree:treenodetype Type="City" ImageUrl="html.gif" /> 
  <mytree:treenode Text="Michigan"> 
  <mytree:treenode Text="Detroit" /> 
  <mytree:treenode Text="Farmington" /> 
  <mytree:treenode Text="Southfield" /> 
  </mytree:treenode> 
  <mytree:treenode Text="Washington" > 
  <mytree:treenode Text="Bellevue" /> 
  <mytree:treenode Text="Redmond" /> 
  <mytree:treenode Text="Woodinville" /> 
  </mytree:treenode> 
</mytree:treeview>


Dieses Feature erfordert Microsoft® Internet Explorer 3.0 oder höher. Klicken Sie auf das folgende Symbol, um die neueste Version zu installieren. Laden Sie diese Seite anschließend neu, um das Beispiel anzuzeigen.

ieget_animated.gif

Beachten Sie, dass das ChildType-Attribut für das TreeView-Element und die ersten TreeNodeType-Elemente verwendet wird. Das TreeView-Element definiert seine untergeordneten Elemente mit dem Typ Folder, und das erste TreeNodeType-Element definiert seine untergeordneten Elemente mit dem Typ City. In diesem Fall besitzt das zweite TreeNodeType-Element kein ChildType-Attribut, da dieses Element das tiefste TreeNodeType-Element in der Strukturansicht definiert.

Anwenden von Stilen

Die Websteuerelemente sind umfassende Steuerelemente und unterstützen bei der Darstellung in erweiterten Browsern sowohl Maus- als auch Tastaturoperationen. Dies bedeutet, dass die Elemente einer TreeView-Benutzeroberfläche basierend auf der Benutzerinteraktion unterschiedliche Status aufweisen können. Die Websteuerelemente bieten spezielle Eigenschaften, die die Anpassung der Elementdarstellung basierend auf dem aktuellen Status vereinfachen.


Mit jeder dieser Eigenschaften können ein oder mehrere CSS-Attribut/Wert-Paare (Cascading Style Sheets) definiert werden. Das verwendete Format ist mit der Verwendung des standardmäßigen CSS-Style-Attributs identisch. Die am häufigsten verwendeten Stile zur Anwendung von Schriftarten, Farben und Dimensionen werden unterstützt, die Websteuerelemente unterstützen jedoch nicht alle CSS-Stile.

<mytree:treenode Text="Mein schöner Rahmen"  
DefaultStyle="background:#CCCCCC;border:solid 1px;color:black;font-size:8pt" 
HoverStyle="color:blue;font-name:Arial" 
SelectedStyle="color:red;font-name:Arial;font-weight:bold-italic" 
/>

Eine weitere Möglichkeit zur Formatierung von Text ist die direkte Verwendung von HTML-Code im Text-Attribut.

<mytree:treenode Text="<i>Kursiv formatierter Text</i> und <b>Fett formatierter Text</b>" />

Datenbindung

Die Strukturansicht unterstützt auch die Datenbindung und ermöglicht so die Generierung von dynamischem Inhalt. Die folgenden Beispiele stellen Strukturansichten ähnlich wie die vorhergehenden Beispiele dar, die Datenquelle für die Benutzeroberfläche wird jedoch nicht durch statischen Inhalt bereitgestellt, sondern durch XML-Dateien (Extensible Markup Language).

In diesem Beispiel wird das TreeNodeSrc-Attribut verwendet, um die Bindung an die Datei state_city.xml herzustellen, die die Strukturansicht auffüllt.

<mydbtree:treeview runat="server" SystemImagesPath="../images/" AutoPostBack="true"> 
  <mydbtree:treenode Text="North America" AutoPostBack=true imageurl="./images/root.gif"  
  Expanded="true" TreeNodeSrc="<A href="http://localhost/webcontrols/treeview/state_city.xml">http://localhost/webcontrols/treeview/state_city.xml</A>"> 
  </mydbtree:treenode> 
</mydbtree:treeview>

Der Codeausschnitt zeigt, wie präzise das Markup in der ASPX-Datei sein kann.

Die Datei state_city.xml enthält Folgendes:

<TREENODES> 
   <treenode Text="Michigan"> 
   <treenode Text="Detroit" /> 
   <treenode Text="Farmington" /> 
   <treenode Text="Southfield" /> 
   </treenode> 
   <treenode Text="Washington" > 
   <treenode Text="Bellevue" /> 
   <treenode Text="Redmond" /> 
   <treenode Text="Woodinville" /> 
   </treenode> 
</TREENODES>

Dieses Feature erfordert Microsoft® Internet Explorer 3.0 oder höher. Klicken Sie auf das folgende Symbol, um die neueste Version zu installieren. Laden Sie diese Seite anschließend neu, um das Beispiel anzuzeigen.

Das nächste Beispiel zeigt, wie das TreeNodeTypeSrc-Attribut zusammen mit XML verwendet wird. Dieses Beispiel enthält zwei XML-Dateien: eine für die Strukturknoten und eine für die Knotentypen. Das Beispiel stützt sich auf das erste Datenbindungsbeispiel und nimmt weitere Anpassungen an der Benutzeroberfläche vor.

Im Markup für die Webseite wird wie im Folgenden dargestellt nur ein TreeView-Element verwendet:

<mytree:treeview runat="server" SystemImagesPath="/webcontrols/images" AutoPostBack="true" 
  TreeNodeTypeSrc="<A href="http://localhost/webcontrols/TreeView/TreeNodeTypes.xml">http://localhost/webcontrols/TreeView/TreeNodeTypes.xml</A>" 
  TreeNodeSrc="<A href="http://localhost/webcontrols/TreeView/country_state_city.xml">http://localhost/webcontrols/TreeView/country_state_city.xml</A>"> 
</mytree:treeview>

Der Inhalt der Datei TreeNodeTypes.xml sieht wie folgt aus.

<TREENODETYPES> 
 <TreeNodeType type="file" imageUrl="./images/html.gif" /> 
 <TreeNodeType type="folder" imageUrl="./images/folder.gif" /> 
 <TreeNodeType type="root" imageUrl="./images/root.gif" /> 
</TREENODETYPES>


Dieses Feature erfordert Microsoft® Internet Explorer 3.0 oder höher. Klicken Sie auf das folgende Symbol, um die neueste Version zu installieren. Laden Sie diese Seite anschließend neu, um das Beispiel anzuzeigen.

ieget_animated.gif

Datenbindung mit XML und XSL-Vorlagen

In bestimmten Szenarios müssen unter Umständen schreibgeschützte XML-Daten verwendet werden, deren Format möglicherweise nicht direkt für die Datenbindung an die Strukturansicht verwendet werden kann. Die Strukturansicht unterstützt auch XSL-Vorlagen (Extensible Stylesheet Language), mit denen eine XML-Datei in das korrekte Format und die entsprechende Struktur umgewandelt werden kann. Mit Hilfe von XSL können XML-Dateien für die Datenbindung mit den TreeNode- und TreeNodeType-Elementen umgewandelt werden.

Das folgende Beispiel zeigt, wie XML und XSL zum Auffüllen einer Strukturansicht verwendet werden können.

Das Markup für das TreeView-Element, das an eine XML-Datei (nodes.xml) und eine XSL-Datei (template.xsl) gebunden wird, sieht wie folgt aus.

<myxmltree:treeview 
  id="tree1" 
  runat="server" 
  TreeNodeSrc = "nodes.xml" 
  TreeNodeXsltSrc = "template.xsl" 
/>

Die Datei nodes.xml enthält Folgendes:

<?xml version="1.0" ?> 
<HelpTOC> 
   <HelpTOCNode Title="Websites"> 
   <HelpTOCNode Title = "Microsoft" Url = "<A href="http://www.microsoft.com">http://www.microsoft.com</A>"> 
   </HelpTOCNode> 
   <HelpTOCNode Title = "MSDN" Url = "<A href="http://msdn.microsoft.com">http://msdn.microsoft.com</A>"> 
   </HelpTOCNode> 
   </HelpTOCNode> 
</HelpTOC>

Die Datei template.xsl enthält Folgendes:

<xsl:stylesheet xmlns:xsl="<A href="http://www.w3.org/1999/XSL/Transform">http://www.w3.org/1999/XSL/Transform</A>" version='1.0'> 
  <xsl:template match="/"> 
 <TREENODES> 
 <xsl:for-each select="HelpTOC/HelpTOCNode"> 
 <xsl:element name="TreeNode"> 
 <xsl:attribute name="Text" ><xsl:value-of select="@Title"/></xsl:attribute> 
 <xsl:attribute name="NavigateURL" ><xsl:value-of select="@Url"/></xsl:attribute> 
 <xsl:attribute name="TARGET" >main</xsl:attribute></LI> 
   <xsl:for-each select="HelpTOCNode"> 
   <xsl:element name="TreeNode"> 
   <xsl:attribute name="Text" ><xsl:value-of select="@Title"/></xsl:attribute> 
   <xsl:attribute name="NavigateURL" ><xsl:value-of select="@Url"/></xsl:attribute> 
   <xsl:attribute name="Target" >main</xsl:attribute> 
   </xsl:element> 
   </xsl:for-each> 
  </xsl:element> 
  </xsl:for-each> 
  </TREENODES> 
  </xsl:template> 
</xsl:stylesheet>

Die XSL-Datei wandelt die XML-Quelldatei in das korrekte Format für die Strukturansicht um.

Warnung:
Die Elemente TREENODES und TREENODETYPES in einem Datenbindungsquelldokument müssen in Großbuchstaben angegeben werden, damit die TreeView-Datenbindung funktioniert.

Datenbindung an mehrere XML-Dateien

Auch wenn die XML-Daten für Ihre Strukturansicht in mehrere Dateien unterteilt sind, ist eine Datenbindung an mehrere Quellen möglich. Einzelne TreeNode-Elemente können z.B. an separate XML- und XSL-Dateien gebunden werden.

Die Attribute TreeNodeTypeSrc, TreeNodeSrc und TreeNodeXsltSrc können auch in einer XML-Datei mit Datenbindung angegeben werden. Wenn XML-Daten Attribute enthalten, die auf andere XML-Dateien verweisen, können diese mit XSL in das entsprechende TreeView-Markup umgewandelt werden.

Beim Erstellen einer Strukturansicht mit mehreren XML-Dateien werden nicht alle datengebundenen Knoten der Struktur gleichzeitig geladen. Wenn die TreeNodeSrc-Eigenschaft für ein TreeNode-Element eingestellt ist, werden die Inhalte des Knotens erst beim Erweitern des Knotens an die XML-Quelle gebunden.

Wenn das TreeView-Element an eine Datenquelle gebunden wird, ruft dieses die XML-Quelldaten für alle zugehörigen Stammknoten ab. Besitzen diese Stammknoten ebenfalls TreeNodeSrc-Attribute, werden diese Attribute ignoriert, bis der Benutzer einen Stammknoten erweitert. Beim Erweitern wird der Knoten an seine Datenquelle gebunden, und die zugehörigen untergeordneten Elemente werden gedownloadet und dargestellt. Daher können die untergeordneten Elemente eines Knotens dynamisch an eine XML-Quelle gebunden werden, wenn das übergeordnete Element die XML-Datei für die untergeordneten Elemente generiert und die XML-Datei das vom untergeordneten Element für die Datenbindung verwendete TreeNodeSrc-Element enthält.

Die TreeNodeSrc-Eigenschaft eines Knotens wird ignoriert, bis dieser erstmals erweitert wird. Das TreeNodeSrc-Attribut kann vor dem Erweitern eines Knotens dynamisch geändert werden. Wenn der Knoten zum ersten Mal erweitert wird, wird er an die XML-Daten gebunden, auf die sein aktuelles TreeNodeSrc-Element verweist.

Datenbindung mit XML und SQL Server

Andere Anbieter von XML-Daten können wie im Folgenden dargestellt ebenfalls mit den Websteuerelementen verwendet werden:

<ie:treenode Text="root" type="tree" Expanded="true" 
 TreeNodeSrc="<A href="http://localhost/mySQLXML?sql=execute+sp_GenMyXML+@pid=1">http://localhost/mySQLXML?sql=execute+sp_GenMyXML+@pid=1</A>" />

Dieses Beispiel basiert auf einer erweiterten Technik. Das TreeNodeSrc-Attribut ist auf einen URL gesetzt, der eine gespeicherte Prozedur in einer Microsoft SQL Server(tm)-Datenbank ausführt, die die XML-Dateninsel dynamisch generiert.

Die Beispiele zeigen, wie einfach es sein kann, die Vorteile der Datenbindung in der Strukturansicht zu nutzen.

Namespacevererbung bei der Datenbindung

Wenn Websteuerelemente an XML-Dateninseln gebunden werden, darf der zum Auffüllen der Steuerelemente verwendete XML-Inhalt kein Namespacepräfix besitzen. Dies ist darauf zurückzuführen, dass der Namespace von dem Element impliziert wird, das als Datenconsumer agiert. Eine ausführlichere Erläuterung finden Sie in der Dokumentation zu TreeNodeTypeSrc und TreeNodeSrc.

Programmieren

Die bisherigen Beispiele zeigen, dass in den meisten Fällen keine Programmierung erforderlich ist, um ein voll funktionsfähiges Benutzeroberflächenelement zu erstellen. Dieser Abschnitt enthält eine kurze Einführung in einige einfache Skripttechniken, die für die Strukturansicht verwendet werden können.

"TreeView"-Ereignisse

Durch eine Benutzerinteraktion hervorgerufene Ereignisse können an den Server geleitet werden, indem die AutoPostBack-Eigenschaft auf TRUE gesetzt wird. Beim Verarbeiten von Ereignissen sollte sowohl für einfache als auch erweiterte Browser serverseitiges Skript verwendet werden, da die in Internet Explorer 5.5 oder höher verfügbaren umfassenden DHTML-Verhalten nicht im einfachen Seiteninhalt eingesetzt werden.

Für eine Webseite mit einer Strukturansicht besteht die Hauptinteraktion mit dem Benutzer im Erweitern und Minimieren der Knoten in der Struktur, um den Inhalt anzuzeigen. Der folgende Beispielcode zeigt, wie die Ereignisse onexpand, oncollapse und onselectedindexchange in einem Web Form mit C# behandelt werden können.

<script language="C#" runat="server"> 
void myExpandFn(object sender, TreeViewClickEventArgs e) 
{ 
  mylabel.InnerText += "Erweitert (Knotenindex= " + e.Node.ToString() + ")"; 
} 
void myCollapseFn(object sender, TreeViewClickEventArgs e) 
{ 
  mylabel.InnerText += "Minimiert (Knotenindex = " + e.Node.ToString() + ")"; 
} 
void mySelectChangeFn(Object sender, TreeViewSelectEventArgs e) 
{ 
  mylabel.InnerText += "Ausgewählt " + e.NewNode.ToString() + " (alter Knoten- 
  index=" + e.OldNode.ToString()+")" ; 
} 
</script>

Dieses Skript muss ein Element mit einem id-Attribut mit dem Wert mylabel enthalten.

<div id=mylabel runat="server">Event Log: </div>


Anmerkung:
Dieses Tag muss ebenfalls in dem von der Strukturansicht verwendeten FORM-Element platziert werden.

Die Funktionen im C#-Skript können wie unten dargestellt programmtechnisch oder mit Hilfe von TreeView-Attributen an Ereignisse angehängt werden:

<mytree:treeview  
onexpand="myExpandFn"  
oncollapse="myCollapseFn"  
onselectedindexchanged="mySelectChangeFn"  
autopostback="true"  
runat="server"> 
</mytree:treeview>

Die Ereignisse onexpand und oncollapse werden häufig bei der Programmierung mit der Strukturansicht verwendet. In diesem Beispiel wird das Skript jedes Mal an die innerText-Eigenschaft des div-Elements angehängt, wenn ein Knoten erweitert oder minimiert wird.

Serverseitige Includes

Da die Websteuerelemente mit ASP.NET erstellt werden, werden auch serverseitige Includes unterstützt. Die folgenden Beispiele zeigen, wie dies realisiert werden kann.

<mytree:treeview runat="server"> 
 <!-- #Include file="nodes.txt" --> 
</mytree:treeview>

Die Datei nodes.txt dient zum Auffüllen einer Strukturansicht, und im folgenden Beispiel werden eingeschlossene Dateien zum Auffüllen von zwei separaten TreeNode-Zweigen einer Strukturansicht verwendet.

<mytree:treeview runat="server"> 
 <mytree:treenode Text="Bücher" > 
  <!-- #Include file="Books.txt" --> 
 </mytree:treenode> 
 <mytree:treenode Text="Magazine" > 
  <!-- #Include file="magazines.txt" --> 
 </mytree:treenode> 
</mytree:treeview>

Anders als bei den Namespacepräfixregeln für die Datenbindung mit XML muss der Inhalt einer eingeschlossenen Datei Elemente enthalten, die dasselbe Tagpräfix verwenden wie die übergeordneten Elemente. Daher würde der Inhalt der Dateien books.txt und magazines.txt das Tagpräfix mytree verwenden.

Leistungstipps

In diesem Abschnitt finden Sie praktische Empfehlungen für die Verwendung der Strukturansicht.

Strukturgröße

Die Darstellung extrem großer hierarchischer Datensätze in einer einzigen TreeView-Dateninsel ist nicht zu empfehlen. Die Anzahl von Knoten in einer Struktur sollte generell unter 1000 liegen.

Bei jeder Aktualisierung der Benutzeroberfläche eines TreeView-Steuerelements, z.B. beim Erweitern oder Minimieren eines Knotens, werden zusätzliche Daten an den Anzeigestatus angehängt, um einen Verlauf der Statusänderungen in der Webseite zu erfassen. Dies bedeutet, dass die an den Anzeigestatusverlauf angehängte Datenmenge bei jeder Aktualisierung einer Ansicht mit einer großen Dateninsel vergrößert wird. In ASP.NET ist die Größe des Anzeigestatus beschränkt. Daher kann es zu Leistungsproblemen kommen, wenn in sehr großen Strukturhierarchien mehrere Aktualisierungen vorgenommen werden. In bestimmten Fällen können auch Teile des Verlaufs verloren gehen.

Verwandte Themen


Anzeigen: