Scott Mitchell
2003 年 7 月
適用于：Microsoft? ASP.NET
摘要：了解 TreeView Web 控件，并學習如何在 ASP.NET Web 應用程序中使用 TreeView Web 控件。除了標準的 ASP.NET Web 控件（例如 TextBox、DropDownList、DataGrid、DataList 等）之外，Microsoft 還發布了附加的 Web 控件集，以充分發揮 Internet Explorer 的固有功能。這些新 Web 控件稱為 Internet Explorer Web 控件，也簡稱為 IE Web 控件，共包括四種控件，TreeView Web 控件是其中之一。（本文包含一些指向英文站點的鏈接。）
下載 TreeViewControl.msi
目錄
簡介
安裝 IE Web 控件
IE Web 控件入門
TreeView IE Web 控件入門
TreeView 的其他高級功能
小結
簡介
在 2002 年，Microsoft? 發布了四種 ASP.NET Web 控件，用于為使用 Microsoft Internet Explorer 的 Web 訪問者提供更好的體驗。這些 Web 控件稱為 Internet Explorer Web 控件，也簡稱為 IE Web 控件，包括以下四種控件：
- MultiPage Web 控件
- TabStrip Web 控件
- Toolbar Web 控件
- TreeView Web 控件
這些 Web 控件通過提供 Web 訪問者熟悉的用戶界面，增強了 ASP.NET Web 頁面。例如，Toolbar Web 控件可以顯示一個與各種 Microsoft Office 產品中的工具欄相類似的可單擊工具欄。TabStrip 和 MultiPage Web 控件配合使用后可以顯示選項卡式內容。TreeView Web 控件可以用來顯示可單擊、可展開的樹中的數據 - 與在 Microsoft Windows? 資源管理器中用樹來顯示 PC 文件系統中的驅動器和文件夾很類似。（您可以在 GotDotNet 站點找到這些 Web 控件的生動演示：WebControl Toolbar 演示、TabStrip/MultiPage WebControl 演示和 TreeView Sample WebControl 演示。）
IE Web 控件可以在安裝了 .NET Framework 版本 1.0 或 1.1 的 Web 服務器上使用。盡管 IE Web 控件是設計用來與 Internet Explorer 配合使用的，但這些 Web 控件也可以顯示在其他瀏覽器中。不過，在 Internet Explorer 以外的瀏覽器中，當用戶與 IE Web 控件交互時（例如展開 TreeView Web 控件中的某個節點），會發生回傳。在 Internet Explorer 5.5 或更高版本中，IE Web 控件會發送 DHTML 代碼，從而避免了回傳的發生。也就是說，在訪問您的 Web 站點時，使用 Internet Explorer 5.5 或更高版本的訪問者將會比使用其他瀏覽器的用戶獲得更好的用戶體驗；當然，沒有使用 IE 5.5 或更高版本的用戶仍可以看到 IE Web 控件，并可以與之進行交互。
下面，本文將主要介紹 TreeView IE Web 控件，并討論如何使用此控件在 ASP.NET Web 頁面中顯示數據。有關其他 IE Web 控件的詳細信息，請參閱 Internet Explorer Web Controls Overview 和 Internet Explorer Web Controls Reference。
安裝 IE Web 控件
要在 ASP.NET Web 應用程序中使用 IE Web 控件，首先必須下載控件的源代碼，然后運行一個編譯批處理文件，對源代碼進行編譯并將所需的所有文件復制到相應的 Web 應用程序目錄中。Internet Explorer Web 控件下載程序包是一個大小為 360 KB 的自解壓安裝文件。
下載并安裝完 IE Web 控件后，將創建一個新目錄（默認為 C:\Program Files\IE Web Controls\，您也可以在安裝過程中配置此目錄）。找到這個新目錄，然后雙擊 build.bat 文件。這將創建一個新的子目錄 build，編譯 src 子目錄中的類，并將生成的程序集和支持文件復制到 build 子目錄中。
運行完 build.bat 文件后，build 子目錄將包含程序集文件 Microsoft.Web.UI.WebControls.dll 和子目錄 Runtime。要在 ASP.NET Web 應用程序中使用 IE Web 控件，必須將 build\Runtime 子目錄中的內容復制到 Web 應用程序的 /webctrl_client/1_0 子目錄中，并將程序集文件 (Microsoft.Web.UI.WebControls.dll) 復制到 Web 應用程序的 /bin 子目錄中。（在 IE Web 控件的 README.txt 文件中，提供了示例以及執行這些任務的命令行指令。）
IE Web 控件入門
如果使用的是 Microsoft Visual Studio? .NET 來開發 ASP.NET Web 應用程序，則將 IE Web 控件添加到 ASP.NET Web 頁是件輕松的事。首先，將 IE Web 控件包含在工具箱中。要完成這項操作，請右擊 Toolbox（工具箱），然后選擇 Customize Toolbox（自定義工具箱）選項。選擇 .NET Framework Components（.NET Framework 組件）選項卡，然后單擊 Browse（瀏覽）按鈕。找到 Microsoft.Web.UI.WebControls.dll 程序集文件，然后單擊 OK（確定）。這會將 MultiPage、TabStrip、Toolbar 和 TreeView 等 IE Web 控件添加到 Visual Studio .NET 工具箱中。要將以上控件中的任何一種添加到 ASP.NET Web 頁中，只需要將相應的控件從工具箱拖放到設計器中即可。
要在內含代碼的類中使用 IE Web 控件，首先需要右擊 Reference（引用），然后選擇 Add Reference（添加引用），將引用添加到 Microsoft.Web.UI.WebControls.dll 程序集中。然后，在內含代碼的類中，如果使用的是 C# ，則添加 using Microsoft.Web.UI.WebControls；如果使用的是 Microsoft Visual Basic? .NET，則添加 Imports Microsoft.Web.UI.WebControls。
如果不是使用 Visual Studio .NET 作為 ASP.NET Web 應用程序編輯器，則需要在 ASP.NET Web 頁的頂端手動添加以下 @Register 指令：
<%@ Register TagPrefix="whatever"
Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls" %>
然后，將 IE Web 控件添加到 Web 頁中，可以使用以下語法：
<whatever:WebControlName runat="server" ...>
...
</whatever:WebControlName>
例如，要添加 TreeView 控件，可以在頁面頂端添加以下 @Register 指令：
<%@ Register TagPrefix="iewc"
Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls" %>
接著，在 ASP.NET Web 頁中希望顯示 TreeView 的位置添加以下 Web 控件語法：
<iewc:TreeViewrunat="server" ...>
...
</iewc:TreeView>
TreeView IE Web 控件入門
當 TreeView IE Web 控件在訪問者瀏覽器中顯示時，會顯示一棵樹，此樹與 Windows 資源管理器中的樹非常類似。不同的是，TreeView 可以由任意多個 TreeNode 對象組成。每個 TreeNode 對象都可以關聯文本和圖像。另外，TreeNode 還可以顯示為超鏈接并與某個 URL 相關聯。每個 TreeNote 還可以包括任意多個子 TreeNote 對象。包含 TreeNode 及其子節點的層次結構構成了 TreeView 控件所呈現的樹結構。
假設您要構建一個用于顯示家譜的 TreeView 控件。由于信息基本上不需要改動，因此您可能希望靜態地指定 TreeView 結構。如果使用的是 Visual Studio .NET，則靜態指定 TreeView 結構就像填寫幾份表格一樣簡單。首先，通過將 TreeView 控件從工具箱拖放到設計器中，將新的 TreeView 控件添加到 ASP.NET Web 頁中。然后，將 TreeView 控件的 ID 屬性設置為 tvFamilyTree。完成這兩個步驟后，您的屏幕應該與圖 1 類似。
圖 1：簡單的 TreeView
現在，要靜態指定組成 TreeView 的 TreeNode。請從 Properties（屬性）窗格中選擇 Nodes（節點）屬性，然后單擊此屬性右側的省略號按鈕。這時將顯示 TreeNodeEditor（TreeNode 編輯器）對話框?，F在可以將新的 TreeNode 添加到 TreeView 中。圖 2 顯示了輸入家族樹信息后的 TreeNodeEditor（TreeNote 編輯器）對話框。
圖 2：TreeNodeEditor（TreeNote 編輯器）對話框
填充 TreeNodeEditor（TreeNote 編輯器）對話框后，以下標記將被添加到 ASP.NET Web 頁的 .aspx 部分：
<ie:TreeView id="tvFamilyTree" runat="server">
<ie:TreeNode Text="John Smith">
<ie:TreeNode Text="Born: Jan. 3rd, 1885"></ie:TreeNode>
<ie:TreeNode Text="Died: Feb. 13, 1919"></ie:TreeNode>
<ie:TreeNode Text="Spouse">
<ie:TreeNode Text="Marie Ellsworth">
<ie:TreeNode Text="Born: Aug. 1, 1889"></ie:TreeNode>
<ie:TreeNode Text="Died: Unknown"></ie:TreeNode>
</ie:TreeNode>
<ie:TreeNode Text="Children">
<ie:TreeNode Text="John Smith, Jr.">
<ie:TreeNode Text="Born: July 4, 1891"></ie:TreeNode>
<ie:TreeNode Text="Died: Sept. 22, 1893"></ie:TreeNode>
</ie:TreeNode>
<ie:TreeNode Text="Mary Smith">
<ie:TreeNode Text="Born: June 7, 1893"></ie:TreeNode>
<ie:TreeNode Text="Died: Aug. 13, 1949"></ie:TreeNode>
<ie:TreeNode Text="Spouse">
<ie:TreeNode Text="Edward Joy">
<ie:TreeNode Text="Born: Unknown"></ie:TreeNode>
<ie:TreeNode Text="Died: Aug. 13,
1949"></ie:TreeNode>
</ie:TreeNode>
<ie:TreeNode Text="Children">
<ie:TreeNode Text="Michael Joy">
<ie:TreeNode Text="Born: Oct. 8,
1918"></ie:TreeNode>
</ie:TreeNode>
<ie:TreeNode Text="Michele Joy">
<ie:TreeNode Text="Born: May 21,
1920"></ie:TreeNode>
</ie:TreeNode>
</ie:TreeNode>
</ie:TreeNode>
</ie:TreeNode>
</ie:TreeNode>
</ie:TreeNode>
</ie:TreeNode>
</ie:TreeView>
如果不是使用 Visual Studio .NET 作為編輯器，則需要將此內容手動添加到 ASP.NET Web 頁。當通過瀏覽器查看 ASP.NET Web 頁時，將顯示一棵可展開的樹，如圖 3 所示。（圖 3 顯示了展開各個節點后的樹。默認情況下，將僅顯示根節點。您可以設置 TreeNote 的 Expanded 屬性，以指示首次查看此頁面時該 TreeNote 應為展開狀態。）
圖 3：展開的 TreeNote
除了文本標簽以外，TreeNote 還可以關聯圖像。尤其值得說明的是，每個 TreeNote 可以關聯三幅圖像：當 TreeNote 處于標準（折疊）狀態時顯示一幅圖像；當 TreeNote 處于展開狀態時顯示另一幅圖像；當 TreeNote 處于選中狀態（當用戶單擊 TreeNote 時，該節點變為選中狀態）時顯示第三幅圖像。這三種屬性都需要一個指向指定圖像的 URL。
例如，可以通過以下方法展開家族樹演示：將 TreeView 的 ImageUrl 屬性設置為指向某個閉合的文件夾圖像的 URL，將 TreeView 的 ExpandedImageUrl 屬性設置為指向某個打開的文件夾圖像的 URL，從而分別將折疊和已展開的 TreeNote 顯示為閉合的文件夾和打開的文件夾。（如果要為選定的 TreeNote 換一幅圖像，只需要將 TreeView 的 SelectedImageUrl 屬性設置為相應的 URL 即可。）
請注意，TreeView 和 TreeNote 都具有 ImageUrl、ExpandedImageUrl 和 SelectedImageUrl 屬性。不同的是，當設置 TreeView 的屬性時，默認情況下，TreeView 中所有 TreeNote 都將顯示指定的圖像； 如果設置 TreeNote 的屬性，則這些屬性僅適用于當前特定的 TreeNote。由于我們希望所有 TreeNote 處于折疊狀態時顯示為閉合的文件夾，處于展開狀態時顯示為打開的文件夾，因此我們對 TreeView 控件的 ImageUrl 和 ExpandedImageUrl 屬性進行了設置。
設置完這些新屬性后，圖 3 的外觀增色很多。在新的 TreeView 外觀中，TreeNote 旁邊都顯示有圖像，如圖 4 所示。
圖 4：帶圖像的 TreeNote
TreeNote 也可以關聯 URL。當單擊關聯有 URL 的 TreeNote 時，會自動將用戶快速鏈接到指定的 URL。TreeNote 的 NavigateUrl 屬性用于指示當單擊 TreeNote 時將用戶鏈接到的 URL。該功能對于包含兩個窗框的 ASP.NET Web 頁非常有用。左側窗框中包含一個 TreeView 控件。當用戶單擊某個 TreeNote 時，該節點的詳細信息將顯示在右側窗框中，這與在 Windows 資源管理器中單擊左側窗格中的某個系統文件夾，該文件夾的文件將顯示在右側窗格中的情形類似。
要關聯 URL，只需要將每個 TreeNote 的 NavigateUrl 設置為相應的 URL。要將 TreeNote 的關聯 URL 加載到其他瀏覽器窗框中，請將 TreeNote 的 Target 屬性設置為相應的窗框名稱。這些步驟都可以通過 TreeNodeEditor（TreeNote 編輯器）來完成。要查看此類應用程序的示例，請參閱 Steve Sharrock 關于使用 TreeView 創建資源管理器風格的 ASP.NET Web 應用程序的文章：TreeView - Programming an Explorer-style Site View。
TreeView 的其他高級功能
雖然使用 Visual Studio .NET 將靜態 TreeNote 添加到 TreeView 的過程非常簡單，但通常需要將內容動態地添加到 TreeView 中。例如，您將家族樹信息存儲到了數據庫中，或是正在設計一個資源管理器風格的 Web 應用程序（在此應用程序中，用戶可以瀏覽 Web 服務器的文件系統），這時您可能需要根據服務器的文件夾和文件來動態填充 TreeNote。
在內含代碼的類中，可以通過編程方式將 TreeNote 添加到 TreeView 中。要將新的 TreeNote 添加到現有的 TreeNote 中，只需要使用 Nodes 屬性的 Add() 方法。例如，以下 C# 代碼將創建兩個 TreeNote，并將第二個 TreeNote 添加為第一個 TreeNote 的子節點。然后，將第一個子節點添加到 TreeView 的根節點中。
// 創建第一個 TreeNote
TreeNode tvFirst = new TreeNode();
tvFirst.Text = "First Tree Node";
// 創建第二個 TreeNote
TreeNode tvSecond = new TreeNode();
tvSecond.Text = "Second Tree Node";
// 將第二個 TreeNote 添加為第一個 TreeNote 的子節點
tvFirst.Nodes.Add(tvSecond);
// 將第一個 TreeNote 添加到 TreeView 的根節點中。
tvFamilyTree.Nodes.Add(tvFirst);
遺憾的是，將數據庫數據綁定到 TreeView 可不像將數據綁定到某個標準 ASP.NET Web 控件那么簡單。因為 TreeView 本身用于顯示分層數據，所以不太適合顯示簡單 SQL 查詢的結果。因此，TreeView 不是用來顯示簡單 SQL 查詢的內容的，而是用來顯示 XML 文件的內容。所以，為了便于在 TreeView 中顯示數據庫信息，必須首先將其轉換為 XML。
而且，雖然可以在 TreeView 控件中顯示靜態或動態 XML 文件，但是，TreeView 要求 XML 數據具有特定的格式。因此，要在 TreeView 中顯示 XML 文件，必須提供 XSLT 樣式表，以將 XML 從當前格式轉換到 TreeView 要求的格式。有關如何完成此任務的詳細信息，請參閱我的文章：Displaying XML Data in the Internet Explorer TreeView Control。
此外，TreeView 的 TreeNote 除了支持圖像和超鏈接之外，其旁邊還可以包含復選框。而且，當用戶展開或折疊 TreeNote，選擇 TreeNote，或者選中或取消選中帶有復選框的 TreeNote 時，都會引發相應的事件?？梢詾檫@些事件創建事件處理程序，以自定義這些事件引發的相應操作。
小結
在本文中，我們簡要地介紹了 IE Web 控件以及如何獲得和安裝這些控件，并詳細討論了如何使用 TreeView IE Web 控件。TreeView 控件的顯示方式類似于標準的 Windows TreeView（可通過在 Windows 資源管理器中進行操作來體驗）。TreeView 用來顯示分層數據，可以由任意多個 TreeNote 組成，每個 TreeNote 又可以包含任何多個子 TreeNote。
可以用多種不同的方式自定義 TreeNote 的外觀。例如，可以為處于折疊、展開和選中狀態的 TreeNote 分別指定不同的圖像。當單擊 TreeNote 時，TreeNote 可以作為超鏈接將訪問者重定向到其他 URL。TreeNote 還可以包含復選框。
使用 Visual Studio .NET 并借助 TreeNote 編輯器可以很容易地實現在 TreeView 中顯示靜態數據。通過 XML 文件或通過以編程方式添加 TreeNote，可以動態指定 TreeView 控件的內容。雖然本文介紹的僅是 TreeView 控件的皮毛，但對于您初步了解在 ASP.NET Web 應用程序中使用 TreeView 控件也是大有幫助的。
盡情享受編程的樂趣吧！
推薦鏈接：