ASP.NET中使用TreeView控件系列

  要在内含代码的类中使用 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等设置要显示的结点。