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