ASP.NET中使用TreeView控制項系列

來源:互聯網
上載者:User

  要在內含代碼的類中使用 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=\whateverNamespace=\Microsoft.Web.UI.WebControlsAssembly=\Microsoft.Web.UI.WebControls\ %>
  
  然後,將IE Web控制項添加到Web頁中,可以使用以下文法:
  
  <whatever:WebControlName runat=\server\ ...>
  ...
  
  </whatever:WebControlName>
  
  例如,要添加 TreeView 控制項,可以在頁面頂端添加以下 @Register 指令:
  
  <%@ Register TagPrefix=\iewcNamespace=\Microsoft.Web.UI.WebControlsAssembly=\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。
  
  現在,要靜態指定組成 TreeView 的 TreeNode。請從 Properties(屬性)窗格中選擇 Nodes(節點)屬性,然後單擊此屬性右側的省略符號按鈕
。這時將顯示 TreeNodeEditor(TreeNode 編輯器)對話方塊。現在可以將新的 TreeNode 添加到 TreeView 中。
  
  填充 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>
 
 -----------------------------------------------------------------------------------------
ASP.NET中使用Treeview和XML 
以前,在WEB頁面中如果想使用樹形控制項的話,往往會有些麻煩,有時甚至要自己寫代碼來達到用樹形列表顯示資料的目的。在asp.net中,我們可以很
方便地使用由微軟提供的Internet Exploer Web Controls控制項來實現樹形列表。在微軟提供的這套Internet Exploere Web Controls控制項集合中,
包括有MultiPage,TabStrip,TOOLbar,Treeview控制項。在這篇文章中,我們來看在ASP.net中如何使用Treeview控制項和XML來實現樹形列表。
  微軟的這套控制項可以在http://asp.net/IEWebControls/Download.aspx?tabindex=0&tabid=1中下載,下載後運行setup安裝就可以了。現在我
們來試下用Treeview控制項做個簡單的例子。
  在vs.net中建立一個WEB工程,之後在工具箱中,滑鼠右鍵彈出的菜單中,選擇“添加新項”,在自訂工具箱中,選擇TREEVIEW控制項(注意選擇
的是命名空間為Microsoft Internet Exploere web control的命名空間),按確定後,就可以在工具箱中出現Treeview控制項了。
  接著,將treeview控制項拖拉到表單中,切換到HTML視圖,這時會發現有如下代碼:
<%@ Register TagPrefix="ie"
Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls" %>
  當然,你可以改變TagPrefix的標記值,比如,改為FooBar,那麼以後在引用Treeview控制項時,就用如下方式引用:
<FooBar:TreeView runat="server" ... />
  現在,我們可以通過點選Treeview控制項的屬性框中的nodes屬性,來為該樹添加各類結點了,由於比較簡單,這裡不詳細講述。下面是添加完各類
結點後的代碼:
<form runat="server">
 <ie:TreeView runat="server">
  <ie:TreeNode Text="Isaac Gibson" Expanded="True">
   <ie:TreeNode Text="Birth - 1766" />
   <ie:TreeNode Text="Death - 1827" />
   <ie:TreeNode Text="Spouse">
   <ie:TreeNode Text="Ritty Gibson" />
   <ie:TreeNode Text="Married 1789" />
   <ie:TreeNode Text="Children">
   <ie:TreeNode Text="Phoebe Gibson">
   <ie:TreeNode Text="Birth - 1790" />
   <ie:TreeNode Text="Death - 1884" />
   <ie:TreeNode Text="Spouse">
    <ie:TreeNode Text="James K. Mason" />
    <ie:TreeNode Text="Married 1819" />
   </ie:TreeNode>
  </ie:TreeNode>
  <ie:TreeNode Text="John Gibson">
   <ie:TreeNode Text="Birth - 1793" />
   <ie:TreeNode Text="Death - 1802" />
   ......
  </ie:TreeNode>
 </ie:TreeView>
</form>
  其中我們特別注意一下Expanded="True"中的Expanded屬性,該屬性當被設定為true時,則當頁面被裝載時,樹形控制項被全部展開。
  以上是在設計時,靜態添加資料到樹形控制項的方法。而由於XML實質上也是以樹形結構來表示資料的結構,因此,就可以通過使用XML檔案綁定到樹
形控制項的方法,來動態載入資料到控制項中去,其中有兩種方法可以實現:
  1)另外寫一個符合TREEVIEW格式的XML檔案
  2)通過XSL將XML進行轉換。
 
  先來看下第一種方法,建一個XML檔案作為例子,命名為aspnetbooks.xml:
<?xml version="1.0" encoding="UTF-8"?>
<books>
 <book price="34.95">
  <title>Teach Yourself Active Server Pages 3.0 in 21 Days</title>
  <authors>
   <author>Mitchell</author>
   <author>Atkinson</author>
  </authors>
  <year>1999</year>
</book>
<book price="29.95">
<title>Designing Active Server Pages</title>
<authors>
 <author>Mitchell</author>
</authors>
 <year>2000</year>
</book>
<book price="34.95">
<title>ASP.NET: Tips, Tutorials, and Code</title>
<authors>
 <author>Mitchell</author>
 <author>Mack</author>
 <author>Walther</author>
 <author>Seven</author>
 <author>Anders</author>
 <author>Nathan</author>
 <author>Wahlin</author>
</authors>
<year>2001</year>
</book>
<book price="24.95">
<title>ASP Unleashed</title>
<authors>
 <author>Walther</author>
</authors>
<year>1998</year>
</book>
</books>

  如果我們使用第一種方法,必須對XML進行重寫,用以下的形式表示,才能綁定到樹形控制項中去:
<TREENODES>
<treenode text="...">
<treenode text="...">
</treenode>
<treenode text="..." />
...
</TREENODES>
  就是說,根結點必須是treenodes(大小寫都無所謂),每個子結點必須以<treenode>的形式排列。於是,我們對原來的XML檔案改寫為如下的形
式:
<?xml version="1.0" encoding="UTF-8"?>
<TREENODES>
 <treenode text="Teach Yourself Active Server_u80 ?ages 3.0 in 21 Days">
  <treenode text="Price - $34.95" />
  <treenode text="Authors">
   <treenode text="Mitchell" />
   <treenode text="Atkinson" />
  </treenode>
  <treenode text="Year Published - 2000" />
 </treenode>
 <treenode text="Designing Active Server Pages">
  <treenode text="Price - $29.95" />
  <treenode text="Authors">
   <treenode text="Mitchell" />
  </treenode>
  <treenode text="Year Published - 2000" />
 </treenode>
〈/TREENODES>
  增加以下代碼:
<form runat="server">
 <ie:TreeView runat="server">
 <ie:TreeNode runat="server" Text="ASP.NET Books" Expanded="True" TreeNodeSrc="aspnetbooks.xml" />
 </ie:TreeView>
</form>
  這樣就將該xml檔案綁定到樹形控制項中去了,運行後可以看到結果:
ASP.NET Books
Teach Yourself Active Server Pages 3.0 in 21 Days
Designing Active Server Pages
ASP.NET: Tips, Tutorials, and Code
Programming ASP.NET
  可以看到,使用第一種方法的確比較麻煩,不能對XML的結點進行篩選或者其他動作。而如果使用第二種方法的XSL,則可以根據需要隨時對原來的
XML進行格式的控制,十分方便。
  在使用XSL時,可以用如下的方法對樹形控制項進行綁定:
<form runat="server">
<ie:TreeView runat="server">
<ie:TreeNode runat="server" Text="ASP.NET Books" Expanded="True"
TreeNodeSrc="aspnetbooks.xml"
TreeNodeXsltSrc="aspbooks.xsl" />
</ie:TreeView>
</form>
  其中,treenodexsltsrc的屬性中指定要轉換的XSL檔案,我們設計的XSL檔案如下:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version='1.0'>
<xsl:template match="/books">
 <TREENODES>
  <xsl:for-each select="book">
  <treenode>
   <xsl:attribute name="text">
    <xsl:value-of select="title" />
   </xsl:attribute>
  <treenode>
   <xsl:attribute name="text">
    Price - $<xsl:value-of select="@price" />
   </xsl:attribute>
  </treenode>
  <treenode text="Authors">
   <xsl:for-each select="authors/author">
    <treenode>
     <xsl:attribute name="text">
      <xsl:value-of select="text()" />
     </xsl:attribute>
    </treenode>
   </xsl:for-each>
  </treenode>
  <treenode>
   <xsl:attribute name="text">
    Year Published - <xsl:value-of select="year" />
   </xsl:attribute>
  </treenode>
 </treenode>
</xsl:for-each>
</TREENODES>
</xsl:template>
</xsl:stylesheet>
  在上面的XSL中,我們通過形如:
<xsl:attribute name="text">
<xsl:value-of select="title" />
</xsl:attribute>
  的屬性設定,提取XML檔案中每個結點的值,將其賦值給予treenode的text屬性中。當然,也可以在XSL中使用XPATH等設定要顯示的結點。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.