關於 TreeView WebControl

目前尚不支持 Microsoft® Internet Explorer WebControl。（本文包含一些指向英文站點的鏈接。）

本文介紹了 TreeView 控件的使用，此控件可用於幫助生成用戶界面，以顯示分層的數據集、文件夾視圖以及其他類似的數據結構。此控件具有多種強大功能，包括支持數據綁定和高級瀏覽器中豐富的動態 HTML (DHTML) 行爲。多數情況下，可以通過聲明的方式創建 TreeView；但也可以在客戶端或服務器上通過編程以多種方式來實現此控件。

本文包括以下內容：

簡介

TreeView 是一個 ASP.NET 服務器控件，可以生成用於顯示分層數據的用戶界面。與其他 Microsoft® Internet Explorer WebControl 一樣，TreeView 控件也會根據瀏覽器的類型來發送 HTML。在低級瀏覽器中，TreeView ASP.NET 服務器控件發送的頁面內容是 HTML 3.2 格式的，而在高級瀏覽器中，HTML 頁面還使用了 DHTML 行爲，DHTML 行爲是定義了自定義元素的客戶端組件。對於 WebControl，高級瀏覽器指 Internet Explorer 5.5 或更高版本，低級瀏覽器指 Internet Explorer 5.01 或更低版本，或者是 Internet Explorer 以外的其他瀏覽器。

本文通過實際的示例說明了如何創建和使用 TreeView 控件。TreeView 是四個 WebControl 之一；因此，要創建包含這些控件的 Web 頁面，它們所要求的前提條件都彼此類似。有關 WebControl 的一般信息（包括下載和安裝），請參閱 Internet Explorer WebControls 和 Authoring Web Forms with the WebControls。

WebControl 是包含一組 DHTML 行爲的 ASP.NET 服務器控件，這些行爲在高級瀏覽器中提供了豐富的用戶體驗。對於每個 WebControl，一個 DHTML 行爲對應一個客戶端對象模型，該模型與 ASP.NET 服務器控件實現的服務器端對象模型密切對應。Internet Explorer 5.5 與 ASP.NET 中的組件體系結構有着明顯差別，因此客戶端對象和服務器端對象所對應的對象模型也略有差別。

同時使用客戶端組件和服務器端組件意味着可以使用 TreeView 以兩種模式來創建 Web 頁面。在 ASP.NET 中，可以使用高級瀏覽器中的行爲編寫 Web 窗體，以便基於瀏覽器的性能來發送內容。這些頁面可以利用以某種公共語言運行庫語言編寫的服務器端腳本。對於 Internet Explorer 5.5 或更高版本，可以使用客戶端腳本編寫包含 DHTML 行爲的 Web 頁面。

前提條件

要深入理解本文，您需要熟悉 ASP.NET 控件的基本類型，並瞭解如何使用它們創建簡單的 Web 窗體頁面。此外，還要具備一些有關瀏覽器腳本的編寫以及 DHTML 行爲的知識，因爲 WebControl 在高級瀏覽器中要使用這些行爲。

本文中的代碼示例是用 Microsoft C# 和 Microsoft Visual Basic® .NET 編寫的。即使 Web 開發人員對 ASP.NET 和公共語言運行庫瞭解不多，也很容易理解這些示例。

有關用 ASP.NET 和 WebControl 創建 Web 頁面的詳細設置要求信息，請參閱 Internet Explorer WebControl。

術語

術語	說明
Web 窗體	ASP.NET Web 窗體頁面框架是一種可擴展的公共語言運行庫編程模型，可用於動態生成 Web 頁面。Web 窗體是 .aspx 文件，由 ASP.NET 分析和處理。WebControl 是自定義的 ASP.NET 控件，用於在 Web 窗體環境中創建頁面。

TreeView 對象

本節概要介紹了客戶端和服務器端 TreeView 實現的基本異同點。您可以通過 TreeView Reference 頁面提供的鏈接訪問 TreeView 組件涉及的客戶端和服務器端對象的參考文檔。

也可以使用 Visual Studio .NET 中的 TreeView Editor（TreeView 編輯器）直觀地創建 TreeView 控件。本文主要介紹使用 TreeView 手動創建內容的方法。有關直觀編輯 TreeView 的詳細信息，請參閱 Using the TreeView Designer in Visual Studio .NET。

您可以通過聲明的方式創建 TreeView，也可以在客戶端或服務器上編寫腳本來創建此控件。本文中的示例採用了聲明方式，並在 Web 窗體頁面中使用了 ASP.NET TreeView 服務器控件，在 HTML 頁面中使用了 TreeView 行爲。

由於 ASP.NET 和 Internet Explorer 支持的編程語言不同，因而這裏分別提供了客戶端組件和服務器端組件的參考文檔。

ASP .NET 服務器控件

ASP.NET 服務器控件提供了最完備的 TreeView 編程模型。如果 Web 頁面需要在各種不同的瀏覽器中運行，則建議使用 ASP.NET 服務器控件。因爲 WebControl 會檢測瀏覽器的類型並向低級瀏覽器發送 HTML 3.2 內容。

有關詳細信息，請參閱 ASP .NET Server Controls Reference。

客戶端行爲

如果希望優化 Internet Explorer 5.5 或更高版本中的客戶端性能，也有一個 TreeView behavior 可供使用。使用 WebControl 的 ASP.NET Web 窗體會自動將該 TreeView behavior 下載到高級瀏覽器中。這樣，在編寫僅用於客戶端的 HTML 頁面時，可以獨立於 ASP.NET 來使用 TreeView 行爲。

許多 Microsoft Windows® 應用程序中的 TreeView 通常具有豐富的特性，例如，可以使用鼠標或鍵盤輸入來展開或摺疊 TreeView 中的節點。TreeView 行爲支持所有這些特性，並且可以在基於客戶端或服務器的 Web 頁面中實現數據綁定。

TreeView 元素

您可以結合使用一個或多個由客戶端和服務器端的 TreeView 組件支持的以下元素來創建 TreeView。

元素名稱	說明
TreeView	定義一個 TreeView。
TreeNodeType	定義一個節點類型，適用於 TreeView 中的一個或一組節點。
TreeNode	在 TreeView 中創建一個節點。

我們提供了有關使用 TreeView ASP.NET 服務器控件和 TreeView 行爲來創建 TreeView 的參考文檔。有關詳細信息，請參閱 TreeView Reference 頁面。

TreeView 元素是 TreeNode 和 TreeNodeType 元素的容器。這些元素共同定義了樹視圖的結構、佈局和外觀。TreeView 不能包含這三個元素以外的任何其他 HTML 內容。

TreeView 元素可以包含任意數量的 TreeNodeType 元素，只要客戶端和主機上有足夠的資源。TreeNodeType 元素用於定義 TreeNode 元素的樣式、圖像和其他行爲。可以通過元素的 Type 來分組 TreeNode 元素，以便使用 TreeNodeType 元素設置和修改它們的格式。TreeNodeType 元素必須是 TreeView 元素的子元素，並且必須出現在第一個 TreeNode 元素之前。

TreeNode 元素只能包含其他 TreeNode 元素。但是，通過將 HTML 內容指定給 TreeNode 元素的 Text 屬性，可以將內容嵌入到 TreeView 中。TreeNode 元素的 Text 內容將顯示爲 HTML 而不是純文本。

編寫簡單的 TreeView

本節介紹創建一個簡單 TreeView 的步驟。您可以使用任何文本編輯器來執行所有步驟。

要完成以下過程，需要安裝 WebControl。有關詳細信息，請參閱 Internet Explorer WebControls 概述。

創建一個 Web 應用程序。
該 Web 應當命名爲 webcontrols，因爲本文中的所有示例都要使用它。要使 WebControl 正常運行，必須將新的 Web 配置爲一個 Web 應用程序。
創建一個空白 Web 窗體頁面。
向 Web 中添加一個新文件並將其保存爲 tree1.aspx。
添加導入指令。
在 Web 窗體的第一行編寫 WebControl 的導入指令代碼，如下所示：
```
<%@ import namespace="Microsoft.Web.UI.WebControls" %>
```

添加 @ Register 指令。

在 Web 窗體的第二行編寫 WebControl 的 @ Register 指令代碼。

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

添加文檔結構。
在 @ Register 指令下方添加以下內容，用於提供基本的文檔結構。
```
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
```
添加一個 Form 元素。
所有 WebControl 元素必須在一個 FORM 元素中建立；因此，在文檔 BODY 中添加以下標記。
```
<BODY>
<FORM runat="server"></FORM>
</BODY>
```
請注意，爲 FORM 指定了 runat 屬性，表明 ASP.NET 將處理任何用戶輸入的結果。

現在，該 Web 窗體已包含使用 WebControl 元素進行創作所需的所有處理指令、元素和內容。tree1.aspx 文件的內容現在應類似如下：
```
<%@ 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>
```
保存頁面並在瀏覽器中查看它。如果一切正常，應該僅顯示一個空白頁面。該頁面在查看之前已經被編譯，並且會報告任何語法錯誤。如果有錯誤出現，請更正報告的錯誤。如果上面給出的示例代碼無法運行，可能是由於未正確安裝 WebControl。

提示：喜歡探索的讀者可以嘗試在聲明中給出錯誤的命名空間或程序集屬性的值，然後保存並再次查看該頁面。這是一種有益的嘗試，因爲您可以看到公共語言運行庫如何報告 Web 窗體錯誤。
添加一個 TreeView 元素。
添加一個 TreeView 元素作爲 FORM 的子元素，並將其 runat 屬性也設置爲 server。
```
<BODY>
  <FORM runat="server">
  	<mytree:treeview runat="server"></mytree:treeview>
  </FORM>
</BODY>
```
現在，該 TreeView 元素不包含任何節點，因此 Web 頁面中沒有顯示任何內容。

注意：請留心 TreeView 元素的標記前綴，頁面中的所有 WebControl 元素都使用了值 mytree，因爲該值已在 @ Register 指令中預定義。
向 TreeView 添加一個 TreeNode。
接下來，添加一個 TreeNode 作爲 TreeView 元素的子元素。
```
<mytree:treeview runat="server">
  <mytree:treenode text="我的第一個樹節點">
  </mytree:treenode>
</mytree:treeview>
```
下圖顯示了 TreeView 的最初外觀。

因爲只有一個節點，所以它就是根節點並擁有焦點。背景色採用了默認樣式，可以通過設置相應屬性來改變它。單擊節點可以選中該節點。

添加第二個 TreeNode。

添加另一個 TreeNode 作爲第一個 TreeNode 元素的子元素。

<mytree:treeview runat="server">
  <mytree:treenode text="我的第一個樹節點">
    <mytree:treenode text="我的第二個樹節點">
    </mytree:treenode>
  </mytree:treenode>
</mytree:treeview>

保存並顯示頁面。
下圖顯示了 TreeView 的最初狀態。

現在，TreeView 顯示了根節點。根節點帶有一個圖形，表明可以將它展開。單擊該節點可以將它展開或摺疊。

注意：這個示例顯示了 TreeView 中節點的默認狀態是摺疊的。您可以通過設置它的 Expanded 屬性來控制節點的最初狀態。

至此，基本 TreeView 示例已創建完畢。下面的示例將進一步揭示 TreeView 的其他屬性和功能。

格式設置

本節討論用於自定義 TreeView 用戶界面 (UI) 的一些有用技術。您可以逐個設置 TreeNode 元素的格式，也可以按組修改具有相同 Type 的節點。

通常，我們希望 TreeView 的每一層都顯示一個獨特的圖形。有時又需要自定義單個節點的外觀，而不考慮它們在樹中所處的深度及其父元素的樣式。TreeView 提供的屬性滿足了所有這些可能的要求。

定義 TreeNodeType

下面的示例顯示了 TreeView，其中包含一個小型的城市和州的集合。要自定義節點的外觀，首先使用 TreeNodeType 元素定義一個 Folder 節點 Type。

<%@ 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>

此功能要求安裝 Microsoft® Internet Explorer 3.0 或更高版本。請單擊下面的圖標以安裝最新版本。然後重新加載本頁面並查看示例。

此示例顯示了 TreeNodeType 元素的使用，該元素可用於設置 TreeView 的佈局和外觀的格式和結構。TreeView 元素的 ChildType 屬性被指定爲 Folder。由於 ChildType 是在 TreeView 上指定的，而 TreeView 是整個樹的容器元素，因此所有 TreeNode 元素的 Type 屬性都將成爲 Folder。顯然，這種方法要比爲每個節點添加 Type 屬性效率更高。

在 TreeView 上將 ChildType 聲明爲 Folder 後，需要使用 TreeNodeType 元素定義此類型。因此，示例中 TreeNodeType 元素的 Type 屬性也將具有相同的值 Folder。

ExpandedImageUrl 和 ImageUrl 屬性可以分別替代用於顯示展開節點和正常節點的默認 TreeView 圖像。

根據深度自定義樹節點

下面的示例將在以前的代碼中添加少量內容，爲 TreeView 的每一層生成自定義的文件夾圖標。以下示例使用了兩層 TreeNode 元素。其中，代表城市的節點嵌套在代表州的節點中。

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

此功能要求安裝 Microsoft® Internet Explorer 3.0 或更高版本。請單擊下面的圖標以安裝最新版本。然後重新加載本頁面並查看示例。

注意，這裏在 TreeView 和第一個 TreeNodeType 元素上使用了 ChildType 屬性。TreeView 定義了其子項具有 Folder 類型，第一個 TreeNodeType 元素定義了其子項具有 City 類型。在此代碼中，第二個 TreeNodeType 元素不具有 ChildType，因爲該元素定義的是 TreeView 中最深的 TreeNodeType。

應用樣式

WebControl 控件具有豐富的功能，在高級瀏覽器中它們可以支持鼠標和鍵盤操作。這意味着，根據用戶的交互方式，TreeView UI 的元素可以具有不同狀態。WebControl 提供了以下特殊屬性，以簡化基於元素的當前狀態來自定義元素外觀的過程。

使用上述每個屬性都可以定義一個或多個級聯樣式表 (CSS) 屬性/值對。使用的格式與標準 CSS style 屬性的用法相同。WebControl 支持字體、顏色和尺寸的最常用樣式，但並不支持所有的 CSS 樣式。

<mytree:treenode Text="我的漂亮的節點" 
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"
/>

另一種可用於設置文本格式的方法是直接將 HTML 應用到 Text 屬性。

<mytree:treenode Text="<i>斜體文字</i> 和 <b>粗體文字</b>" />

數據綁定

TreeView 也支持數據綁定，因此可以生成動態的內容。下面的示例顯示的 TreeView 與前一個示例類似，但沒有使用靜態內容，而是使用了可擴展標記語言 (XML) 文件來提供 UI 的數據源。

該示例使用 TreeNodeSrc 屬性綁定到 state_city.xml 文件，並由該文件填充 TreeView。

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

通過此代碼段可以看出，.aspx 文件中的標記非常簡潔。

state_city.xml 文件包含以下內容：

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

此功能要求安裝 Microsoft® Internet Explorer 3.0 或更高版本。請單擊下面的圖標以安裝最新版本。然後重新加載本頁面並查看示例。

下面的示例顯示瞭如何配合使用 TreeNodeTypeSrc 屬性和 XML。該示例使用了兩個 XML 文件，一個對應樹節點，一個對應節點類型。通過向 UI 添加額外的自定義內容，我們建立了第一個數據綁定示例。

Web 頁面的標記中僅使用了一個 TreeView 元素，如下所示：

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

TreeNodeTypes.xml 文件的內容如下所示。

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

此功能要求安裝 Microsoft® Internet Explorer 3.0 或更高版本。請單擊下面的圖標以安裝最新版本。然後重新加載本頁面並查看示例。

用 XML 和 XSL 模板進行數據綁定

在某些情況下，可能需要使用只讀的 XML 數據，也可能無法將 XML 數據直接綁定到 TreeView。TreeView 也支持可擴展樣式表語言 (XSL) 模板，後者可以將 XML 文件轉換爲正確的格式和結構。XSL 可用於將 XML 文件轉換爲包含 TreeNode 和 TreeNodeType 元素的數據綁定。

下面的示例顯示瞭如何使用 XML 和 XSL 來填充一個 TreeView。

下面是 TreeView 元素的標記，該元素綁定到一個 XML 文件 nodes.xml 和一個 XSL 文件 template.xsl。

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

nodes.xml 文件包含以下內容：

<?xml version="1.0" ?>
<HelpTOC>
   <HelpTOCNode Title="Web 站點">
      <HelpTOCNode Title = "Microsoft" Url = "http://www.microsoft.com">
      </HelpTOCNode>
      <HelpTOCNode Title = "MSDN" Url = "http://msdn.microsoft.com">
      </HelpTOCNode>
   </HelpTOCNode>
</HelpTOC>

template.xsl 文件包含以下內容：

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 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>

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

XSL 將源文件 XML 轉換爲正確格式的 TreeView。

警告：要使 TreeView 數據綁定能夠正常運行，數據綁定源文檔中的 TREENODES 和 TREENODETYPES 元素必須大寫。

對多個 XML 文件的數據綁定

如果 TreeView 的 XML 數據來自多個文件，也可以實現對多個源文件的數據綁定。例如，可以將 TreeNode 元素綁定到各個 XML 和 XSL 文件。

還可以在某個數據綁定 XML 文件中指定 TreeNodeTypeSrc、TreeNodeSrc 和 TreeNodeXsltSrc 屬性。如果 XML 數據包含指向其他 XML 文件的屬性，可以用 XSL 將其轉換爲相應的 TreeView 標記。

用多個 XML 文件創建 TreeView 時，並不會一次加載該樹的所有數據綁定節點。如果爲某個 TreeNode 元素設置了 TreeNodeSrc 屬性，則只有該節點展開後其內容纔會真正綁定到 XML 源文件。

將 TreeView 元素綁定到某個數據源時，它會爲自己的所有根節點提取 XML 源數據。如果這些根節點也具有 TreeNodeSrc 屬性，這些屬性將被忽略，直到用戶展開某個根節點。展開的根節點將綁定到其數據源，同時下載並顯示其子節點。因此，如果由父節點爲其子元素生成 XML，並且該 XML 包含子元素用來進行數據綁定的 TreeNodeSrc，則可以將一個節點的子元素動態綁定到某個 XML 源文件。

節點的 TreeNodeSrc 屬性被忽略，直到第一次展開該節點。在展開節點之前，可以動態修改 TreeNodeSrc 屬性。第一次展開節點時，該節點將綁定到當前 TreeNodeSrc 指向的 XML 數據。

用 XML 和 SQL Server 進行數據綁定

WebControls 元素也可以使用其他 XML 數據提供程序，如下所示：

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

該示例使用了一種更高級的技術。TreeNodeSrc 屬性被設置爲一個 URL，後者執行 Microsoft SQL Server(tm) 數據庫上的一個存儲過程來動態生成 XML 數據島。

通過這些示例可以看出，對 TreeView 進行數據綁定是非常簡單的。

數據綁定中的命名空間繼承

將 WebControls 元素數據綁定到 XML 數據島時，用於填充控件的 XML 內容不能使用命名空間前綴。因爲命名空間是由作爲數據使用者的元素指示的。有關詳細說明，請參閱 TreeNodeTypeSrc 和 TreeNodeSrc。

編程

前面給出的示例表明，多數情況下編寫一個功能完備的 UI 元素不需要任何編程工作。本節簡要介紹一些可用於 TreeView 的簡單的腳本編寫技術。

TreeView 事件

通過將 AutoPostBack 屬性設置爲 true 可以將用戶交互產生的事件導向服務器。同時處理高級瀏覽器和低級瀏覽器事件時應該使用服務器端腳本，因爲低級頁面內容中沒有使用 Internet Explorer 5.5 或更高版本中所使用的豐富的 DHTML 行爲。

對於包含 TreeView 的 Web 頁面，用戶的主要交互是展開和摺疊樹中的節點來瀏覽內容。下面的示例代碼顯示瞭如何使用 C# 在 Web 窗體中處理 onexpand、oncollapse 和 onselectedindexchange 事件。

<script language="C#" runat="server">
void myExpandFn(object sender, TreeViewClickEventArgs e)
{
  mylabel.InnerText += "已展開 (節點索引= " + e.Node.ToString() + ")";
}

void myCollapseFn(object sender, TreeViewClickEventArgs e)
{
  mylabel.InnerText += "已摺疊 (節點索引= " + e.Node.ToString() + ")";
}

void mySelectChangeFn(Object sender, TreeViewSelectEventArgs e)
{
  mylabel.InnerText += "已選中 " + e.NewNode.ToString() + " (舊節點
  索引=" + e.OldNode.ToString()+")" ;
}
</script>

在此腳本中，需要具有一個 id 爲 mylabel 的元素。

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

注意：此標記必須放在 TreeView 使用的 FORM 元素內。

可以通過編程或使用 TreeView 的屬性將 C# 腳本中的函數加入到事件中，如下所示：

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

進行 TreeView 編程時經常要使用 onexpand 和 oncollapse 事件。在本示例中，每次節點展開或摺疊時，腳本都將添加到 div 元素的 innerText 中。

服務器端包含

由於 WebControls 是用 ASP.NET 建立的，所以也支持服務器端“包含”。下面的示例顯示了其實現方法。

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

前面的示例使用了 nodes.txt 文件來填充一個 TreeView，下面我們使用包含文件來填充 TreeView 的兩個單獨的 TreeNode 分支。

<mytree:treeview runat="server">
    <mytree:treenode Text="書籍" >
        <!-- #Include file="Books.txt" -->
    </mytree:treenode>
    <mytree:treenode Text="雜誌" >
        <!-- #Include file="magazines.txt" -->
    </mytree:treenode>
</mytree:treeview>

與 XML 數據綁定的命名空間前綴規則不同，包含文件的內容中的元素必須使用與其父元素相同的標記前綴。因此，books.txt 和 magazines.txt 文件的內容應使用 mytree 標記前綴。

性能提示

本節提供了一些 TreeView 應用建議。

樹的大小

建議不要在單個 TreeView 數據島中顯示大型分層數據集。作爲一般規則，應儘量將一棵樹中的節點數控制在 1000 以下。

每次更新一個 TreeView 控件的 UI（例如展開或摺疊節點）時，都會向視圖狀態中追加數據，從而使數據狀態保存了 Web 頁面的狀態變化歷史記錄。這意味着每次進行包含大量數據的視圖更新時，追加到視圖狀態歷史記錄中的數據量也會增加。在 ASP.NET 中，視圖狀態的大小是有限制的，因此多次更新大型樹層次結構可能導致性能問題，並且可能丟失部分歷史記錄。