应该感谢那些指出你错误的人

借我三千虎骑,复我泱泱中华!

博客园 首页 新随笔 联系 订阅 管理
在Visual Studio .NET中,除了标准的 ASP.NET Web 控件(例如 TextBox、DropDownList、DataGrid、DataList 等)之外,Microsoft 还发布了附加的 Web 控件集,以充分发挥 Internet Explorer 的固有功能。这些新 Web 控件称为 Internet Explorer Web 控件,也简称为 IE Web 控件,共包括四种控件,TreeView Web 控件 ,MultiPage Web 控件,TabStrip Web 控件,Toolbar Web 控件。TreeView Web 控件是其中之一。

这些 Web 控件通过提供 Web 访问者熟悉的用户界面,增强了 ASP.NET Web 页面。例如,Toolbar Web 控件可以显示一个与各种 Microsoft Office 产品中的工具栏相类似的可单击工具栏。TabStrip 和 MultiPage Web 控件配合使用后可以显示选项卡式内容。TreeView Web 控件可以用来显示可单击、可展开的树中的数据与在资源管理器中用树来显示文件系统中的驱动器和文件夹很类似。

下面,本文将主要介绍 TreeView IE Web 控件,并讨论如何使用此控件在 ASP.NET Web 页面中显示数据。

安装 IE Web 控件

要在 ASP.NET Web 应用程序中使用 IE Web 控件,首先必须下载控件的源代码,然后运行一个编译批处理文件,对源代码进行编译并将所需的所有文件复制到相应的 Web 应用程序目录中。Internet Explorer Web 控件下载程序包是一个大小为 360 KB 的自解压安装文件。

下载地址:http://asp.net/IEWebControls/Download.aspx?tabindex=0&tabid=1

下载并安装完 IE Web 控件后,将创建一个新目录(默认为 C:\Program Files\IE Web Controls\,您也可以在安装过程中配置此目录)。在安装目录找到build.bat文件,用记事本将其打开。把“csc.exe”换成绝对路径“C:\WINNT\Microsoft.NET\Framework\v1.1.4322\csc.exe”(此处改为您的电脑上的路径)。保存后执行(记得把“只读”属性去掉)。

运行完 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 控件入门

如果使用的是Visual Studio.NET 来开发 ASP.NET Web 应用程序,则将 IE Web 控件添加到 ASP.NET Web 页是件轻松的事。首先,将 IE Web 控件包含在工具箱中。要完成这项操作,请右击“工具箱”,然后选择“添加/移除项”选项。选择“.NET Framework 组件”选项卡,然后单击“浏览”按钮。找到 Microsoft.Web.UI.WebControls.dll 程序集文件,然后单击“确定”。这会将 MultiPage、TabStrip、Toolbar 和 TreeView 等 IE Web 控件添加到 Visual Studio .NET 工具箱中。要将以上控件中的任何一种添加到 ASP.NET Web 页中,只需要将相应的控件从工具箱拖放到设计器中即可。

要在内含代码的类中使用 IE Web 控件,首先需要右击 “引用”,然后选择 “添加引用”,将引用添加到 Microsoft.Web.UI.WebControls.dll 程序集中。然后,在内含代码的类中,添加 using Microsoft.Web.UI.WebControls。

TreeView IE Web 控件入门

当 TreeView IE Web 控件在访问者浏览器中显示时,会显示一棵树,此树与 Windows 资源管理器中的树非常类似。不同的是,TreeView 可以由任意多个 TreeNode 对象组成。每个 TreeNode 对象都可以关联文本和图像。另外,TreeNode 还可以显示为超链接并与某个 URL 相关联。每个 TreeNote 还可以包括任意多个子 TreeNote 对象。包含 TreeNode 及其子节点的层次结构构成了 TreeView 控件所呈现的树结构。

假设要构建一个用于显示省份的 TreeView 控件。由于信息基本上不需要改动,因此您可能希望静态地指定 TreeView 结构。如果使用的是 Visual Studio .NET,则静态指定 TreeView 结构就像填写几份表格一样简单。只需在“属性”窗格中选择 Nodes(节点)属性,然后单击此属性右侧的省略号按钮。这时将显示 TreeNodeEditor(TreeNode 编辑器)对话框。这样就可以完成添加了!

除了文本标签以外,TreeNote 还可以关联图像。尤其值得说明的是,每个 TreeNote 可以关联三幅图像:当 TreeNote 处于标准(折叠)状态时显示一幅图像;当 TreeNote 处于展开状态时显示另一幅图像;当 TreeNote 处于选中状态(当用户单击 TreeNote 时,该节点变为选中状态)时显示第三幅图像。这三种属性都需要一个指向指定图像的 URL。

例如,可以通过以下方法展开树演示:将 TreeView 的 ImageUrl 属性设置为指向某个闭合的文件夹图像的 URL,将 TreeView 的ExpandedImageUrl 属性设置为指向某个打开的文件夹图像的 URL,从而分别将折叠和已展开的 TreeNote 显示为闭合的文件夹和打开的文件夹。(如果要为选定的 TreeNote 换一幅图像,只需要将 TreeView 的 SelectedImageUrl 属性设置为相应的 URL 即可。)

TreeView 的其他高级功能

虽然使用 Visual Studio .NET 将静态 TreeNote 添加到 TreeView 的过程非常简单,但通常需要将内容动态地添加到 TreeView 中。例如,将树信息存储到了数据库中,或是正在设计一个资源管理器风格的 Web 应用程序(在此应用程序中,用户可以浏览 Web 服务器的文件系统),这时就需要根据服务器的文件夹和文件来动态填充 TreeNote。

在内含代码的类中,可以通过编程方式将 TreeNote 添加到 TreeView 中。要将新的 TreeNote 添加到现有的 TreeNote 中,只需要使用 Nodes 属性的 Add() 方法。例如,以下 C# 代码将创建两个 TreeNote,并将第二个 TreeNote 添加为第一个 TreeNote 的子节点。然后,将第一个子节点添加到 TreeView 的根节点中。

// 创建第一个 TreeNote
TreeNode tvFirst = new TreeNode();
tvFirst.Text = "First Tree Node";

// 创建第二个 TreeNote
TreeNode tvSecond = new TreeNode();
tvSecond.Text = "Second Tree Node";

// 将第二个 TreeNote 添加为第一个 TreeNote 的子节点
tvFirst.Nodes.Add(tvSecond);

// 将第一个 TreeNote 添加到 TreeView 的根节点中。
tvTree.Nodes.Add(tvFirst);

但是,将数据库数据绑定到 TreeView 可不像将数据绑定到某个标准 ASP.NET Web 控件那么简单。因为 TreeView 本身用于显示分层数据。在这里,提供一个示例,讲解如何将数据库中的数据绑定到TreeView。

数据库设计

首先,我们在SQL SERVER 2000里建立一个表tbTree,表的结构设计如下:
列名         数据类型                 描述                      长度            主键
ID                Int                    节点编号                    4                 是
ParentID       Int                 父节点编号                   4 
ConText     Nvarchar        要显示的节点内容           50 

在SQL SERVER 2000中建表的脚本:

CREATE TABLE [dbo].[tbTree] (
 [ID] [int] IDENTITY (1, 1) NOT NULL ,
 [Context] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
 [ParentID] [int] NULL
) ON [PRIMARY]

在表中添加如下记录:

SET IDENTITY_INSERT tbtree ON
insert tbtree (ID,Context,ParentID)  values ( 1,'中国',0)
insert tbtree (ID,Context,ParentID)  values ( 2,'北京',11)
insert tbtree (ID,Context,ParentID)  values ( 3,'天津',11)
insert tbtree (ID,Context,ParentID)  values ( 4,'河北省',1)
insert tbtree (ID,Context,ParentID)  values ( 5,'广东省',1)
insert tbtree (ID,Context,ParentID)  values ( 6,'广州',5)
insert tbtree (ID,Context,ParentID)  values ( 7,'四川省',1)
insert tbtree (ID,Context,ParentID)  values ( 8,'成都',7)
insert tbtree (ID,Context,ParentID)  values ( 9,'深圳',5)
insert tbtree (ID,Context,ParentID)  values ( 10,'石家庄',4)
insert tbtree (ID,Context,ParentID)  values ( 11,'辽宁省',1)
insert tbtree (ID,Context,ParentID)  values ( 12,'大连',11)
insert tbtree (ID,Context,ParentID)  values ( 13,'上海',1)
insert tbtree (ID,Context,ParentID)  values ( 14,'天河软件园',6)
insert tbtree (ID,Context,ParentID)  values ( 15,'汕头',5)
SET IDENTITY_INSERT tbtree off

代码:

//需要添加的命名空间
using System.Data.SqlClient;
using Microsoft.Web.UI.WebControls;

 public class WebForm1 : System.Web.UI.Page
 {
  protected Microsoft.Web.UI.WebControls.TreeView TreeView1;
  DataSet ds=new DataSet();  //定义一个DataSet

  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面

   SqlConnection CN = new SqlConnection();

   //初始化连接字符串
   CN.ConnectionString="此处为数据库连接字符串";
   CN.Open();

   //添加命令,从数据库中得到数据
   SqlCommand sqlCmd= new SqlCommand();
   sqlCmd.Connection = CN;
   sqlCmd.CommandText = "select * from tbTree";
   sqlCmd.CommandType = CommandType.Text ;
   SqlDataAdapter adp = new SqlDataAdapter(sqlCmd);
   adp.Fill(ds);

   //调用递归函数,完成树形结构的生成
   AddTree(0, (TreeNode)null);
  }

  public void AddTree(int ParentID,TreeNode pNode)
  {
   TreeNode tn1=new TreeNode();
   DataView dvTree = new DataView(ds.Tables[0]);

   //过滤ParentID,得到当前的所有子节点
   dvTree.RowFilter =  "[PARENTID] = " + ParentID;
   foreach(DataRowView Row in dvTree)
   {
    if(pNode == null)
    {    //添加根节点
    
     tn1.Text=Row["ConText"].ToString();
     TreeView1.Nodes.Add(tn1);
     tn1.Expanded=true;
     AddTree(Int32.Parse(Row["ID"].ToString()),tn1);    //再次递归
    }
    else
    {   //添加当前节点的子节点
     TreeNode tn2=new TreeNode();
     tn2.Text=Row["ConText"].ToString();
     pNode.Nodes.Add(tn2);
     tn1.Expanded=true;
     AddTree(Int32.Parse(Row["ID"].ToString()),tn2);    //再次递归
    }
   }
  } 

  Web 窗体设计器生成的代码  //没有改动,代码略。
 }

我们也可以XML数据绑定到TreeView控件上。只需将TreeNodeSrc属性指定到相关XML文件即可。也可以在代码中指定。

代码:

   TreeView1.TreeNodeSrc="tree.xml";
   TreeView1.DataBind();

注意:此时XML文件的格式是有限制的,其中TREENODES,treenode,text等为特定使用的元素及属性,大小写不能更改。如果格式不同,则需要用其它技术进行转换。下面是一个此种格式的XML示例。

<?xml version="1.0" encoding="UTF-8"?>
<TREENODES>

  <treenode text="Teach Yourself Active Server Pages 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>

小结

在本文中,简要地介绍了 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 控件也许会有一些帮助。

posted on 2006-05-21 00:25  落拓孤鸿  阅读(828)  评论(0编辑  收藏  举报