使用 TreeView IE Web 控制項

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:TreeView runat="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 編輯器）對話方塊。現在可以將新的 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 的根節點中。

// 建立第一個 TreeNoteTreeNode tvFirst = new TreeNode();tvFirst.Text = "First Tree Node";// 建立第二個 TreeNoteTreeNode 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 控制項也是大有協助的。

盡情享受編程的樂趣吧！

推薦連結：

• Displaying XML Data in the Internet Explorer TreeView Control
• Internet Explorer Web Controls Overview
• Internet Explorer Web Controls Reference
• Using the Internet Explorer Web Controls
• TreeView - Programming an Explorer-Style Site View
• ASP.NET Forums: Internet Explorer Web Controls Discussion Forum

作者簡介

Scott Mitchell，著有五本關於 ASP/ASP.NET 的書，是 4GuysFromRolla.com 網站的創始人，過去五年來一直從事 Microsoft Web 技術方面的研究。Scott 是 ASP 和 ASP.NET 社區非常活躍的一名成員，十分熱愛 ASP 和 ASP.NET 技術，並非常願意協助其他人瞭解這些令人振奮的技術。有關 DataGrid、DataList 和 重複器控制項的詳細資料，請參閱 Scott 新出的一本書《ASP.NET Data Web Controls Kick Start》（ISBN 為 0672325012）。