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