简介
在年Microsoft发布了四种ASPNET Web控件用于为使用 Microsoft Internet Explorer 的 Web 访问者提供更好的体验这些 Web 控件称为 Internet Explorer Web 控件也简称为 IE Web 控件包括以下四种控件
◆ MultiPage Web 控件
◆ TabStrip Web 控件
◆ Toolbar Web 控件
◆ TreeView Web 控件
这些 Web 控件通过提供 Web 访问者熟悉的用户界面增强了 ASPNET 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 版本 或 的 Web 服务器上使用尽管 IE Web 控件是设计用来与 Internet Explorer 配合使用的但这些 Web 控件也可以显示在其他浏览器中不过在 Internet Explorer 以外的浏览器中当用户与 IE Web 控件交互时（例如展开 TreeView Web 控件中的某个节点）会发生回传在 Internet Explorer 或更高版本中IE Web 控件会发送 DHTML 代码从而避免了回传的发生也就是说在访问您的 Web 站点时使用 Internet Explorer 或更高版本的访问者将会比使用其他浏览器的用户获得更好的用户体验当然没有使用 IE 或更高版本的用户仍可以看到 IE Web 控件并可以与之进行交互
下面本文将主要介绍 TreeView IE Web 控件并讨论如何使用此控件在 ASPNET Web 页面中显示数据有关其他 IE Web 控件的详细信息请参阅 Internet Explorer Web Controls Overview 和 Internet Explorer Web Controls Reference
安装IE Web控件
要在 ASPNET Web 应用程序中使用 IE Web 控件首先必须下载控件的源代码然后运行一个编译批处理文件对源代码进行编译并将所需的所有文件复制到相应的 Web 应用程序目录中Internet Explorer Web 控件下载程序包是一个大小为 KB 的自解压安装文件
下载并安装完 IE Web 控件后将创建一个新目录（默认为 C:\Program Files\IE Web Controls\您也可以在安装过程中配置此目录）找到这个新目录然后双击 buildbat 文件这将创建一个新的子目录 build编译 src 子目录中的类并将生成的程序集和支持文件复制到 build 子目录中
运行完 buildbat 文件后build 子目录将包含程序集文件 MicrosoftWebUIWebControlsdll 和子目录 Runtime要在 ASPNET Web 应用程序中使用 IE Web 控件必须将 build\Runtime 子目录中的内容复制到 Web 应用程序的 /webctrl_client/_ 子目录中并将程序集文件 (MicrosoftWebUIWebControlsdll) 复制到 Web 应用程序的 /bin 子目录中（在 IE Web 控件的 READMEtxt 文件中提供了示例以及执行这些任务的命令行指令）
IE Web控件入门
如果使用的是 Microsoft Visual Studio? NET 来开发 ASPNET Web 应用程序则将 IE Web 控件添加到 ASPNET Web 页是件轻松的事首先将 IE Web 控件包含在工具箱中要完成这项操作请右击 Toolbox（工具箱）然后选择 Customize Toolbox（自定义工具箱）选项选择 NET Framework Components（NET Framework 组件）选项卡然后单击 Browse（浏览）按钮找到 MicrosoftWebUIWebControlsdll 程序集文件然后单击 OK（确定）这会将 MultiPageTabStripToolbar 和 TreeView 等 IE Web 控件添加到 Visual Studio NET 工具箱中要将以上控件中的任何一种添加到 ASPNET Web 页中只需要将相应的控件从工具箱拖放到设计器中即可
要在内含代码的类中使用 IE Web 控件首先需要右击 Reference（引用）然后选择 Add Reference（添加引用）将引用添加到 MicrosoftWebUIWebControlsdll 程序集中然后在内含代码的类中如果使用的是 C# 则添加 using MicrosoftWebUIWebControls如果使用的是 Microsoft Visual Basic NET则添加 Imports MicrosoftWebUIWebControls
如果不是使用 Visual Studio NET 作为 ASPNET Web 应用程序编辑器则需要在 ASPNET Web 页的顶端手动添加以下 @Register 指令
＜%@ Register TagPrefix=whatever
Namespace=MicrosoftWebUIWebControls
Assembly=MicrosoftWebUIWebControls %＞
然后将IE Web控件添加到Web页中可以使用以下语法
＜whatever:WebControlName runat=server ＞
＜/whatever:WebControlName＞
例如要添加 TreeView 控件可以在页面顶端添加以下 @Register 指令
＜%@ Register TagPrefix=iewc
Namespace=MicrosoftWebUIWebControls
Assembly=MicrosoftWebUIWebControls %＞
接着在ASPNET 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 控件添加到 ASPNET Web 页中然后将 TreeView 控件的 ID 属性设置为 tvFamilyTree完成这两个步骤后您的屏幕应该与图 类似
图 简单的 TreeView
现在要静态指定组成 TreeView 的 TreeNode请从 Properties（属性）窗格中选择 Nodes（节点）属性然后单击此属性右侧的省略号按钮这时将显示 TreeNodeEditor（TreeNode 编辑器）对话框现在可以将新的 TreeNode 添加到 TreeView 中图 显示了输入家族树信息后的 TreeNodeEditor（TreeNote 编辑器）对话框
图 TreeNodeEditor（TreeNote 编辑器）对话框
填充 TreeNodeEditor（TreeNote 编辑器）对话框后以下标记将被添加到 ASPNET Web 页的 aspx 部分
＜ie:TreeView id=tvFamilyTree runat=server＞
＜ie:TreeNode Text=John Smith＞
＜ie:TreeNode Text=Born: Jan rd ＞＜/ie:TreeNode＞
＜ie:TreeNode Text=Died: Feb ＞＜/ie:TreeNode＞
＜ie:TreeNode Text=Spouse＞
＜ie:TreeNode Text=Marie Ellsworth＞
＜ie:TreeNode Text=Born: Aug ＞＜/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 ＞＜/ie:TreeNode＞
＜ie:TreeNode Text=Died: Sept ＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜ie:TreeNode Text=Mary Smith＞
＜ie:TreeNode Text=Born: June ＞＜/ie:TreeNode＞
＜ie:TreeNode Text=Died: Aug ＞＜/ie:TreeNode＞
＜ie:TreeNode Text=Spouse＞
＜ie:TreeNode Text=Edward Joy＞
＜ie:TreeNode Text=Born: Unknown＞＜/ie:TreeNode＞
＜ie:TreeNode Text=Died: Aug
＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜ie:TreeNode Text=Children＞
＜ie:TreeNode Text=Michael Joy＞
＜ie:TreeNode Text=Born: Oct
＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜ie:TreeNode Text=Michele Joy＞
＜ie:TreeNode Text=Born: May
＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeView＞
如果不是使用 Visual Studio NET 作为编辑器则需要将此内容手动添加到 ASPNET Web 页当通过浏览器查看 ASPNET Web 页时将显示一棵可展开的树如图 所示（图 显示了展开各个节点后的树默认情况下将仅显示根节点您可以设置 TreeNote 的 Expanded 属性以指示首次查看此页面时该 TreeNote 应为展开状态）
图 展开的 TreeNote
除了文本标签以外TreeNote 还可以关联图像尤其值得说明的是每个 TreeNote 可以关联三幅图像当 TreeNote 处于标准（折叠）状态时显示一幅图像当 TreeNote 处于展开状态时显示另一幅图像当 TreeNote 处于选中状态（当用户单击 TreeNote 时该节点变为选中状态）时显示第三幅图像这三种属性都需要一个指向指定图像的 URL
例如可以通过以下方法展开家族树演示将 TreeView 的 ImageUrl 属性设置为指向某个闭合的文件夹图像的 URL将 TreeView 的 ExpandedImageUrl 属性设置为指向某个打开的文件夹图像的 URL从而分别将折叠和已展开的 TreeNote 显示为闭合的文件夹和打开的文件夹（如果要为选定的 TreeNote 换一幅图像只需要将 TreeView 的 SelectedImageUrl 属性设置为相应的 URL 即可）
请注意TreeView 和 TreeNote 都具有 ImageUrlExpandedImageUrl 和 SelectedImageUrl 属性不同的是当设置 TreeView 的属性时默认情况下TreeView 中所有 TreeNote 都将显示指定的图像 如果设置 TreeNote 的属性则这些属性仅适用于当前特定的 TreeNote由于我们希望所有 TreeNote 处于折叠状态时显示为闭合的文件夹处于展开状态时显示为打开的文件夹因此我们对 TreeView 控件的 ImageUrl 和 ExpandedImageUrl 属性进行了设置
设置完这些新属性后图 的外观增色很多在新的 TreeView 外观中TreeNote 旁边都显示有图像如图 所示
图 带图像的 TreeNote
TreeNote 也可以关联 URL当单击关联有 URL 的 TreeNote 时会自动将用户快速链接到指定的 URLTreeNote 的 NavigateUrl 属性用于指示当单击 TreeNote 时将用户链接到的 URL该功能对于包含两个窗框的 ASPNET Web 页非常有用左侧窗框中包含一个 TreeView 控件当用户单击某个 TreeNote 时该节点的详细信息将显示在右侧窗框中这与在 Windows 资源管理器中单击左侧窗格中的某个系统文件夹该文件夹的文件将显示在右侧窗格中的情形类似
要关联 URL只需要将每个 TreeNote 的 NavigateUrl 设置为相应的 URL要将 TreeNote 的关联 URL 加载到其他浏览器窗框中请将 TreeNote 的 Target 属性设置为相应的窗框名称这些步骤都可以通过 TreeNodeEditor（TreeNote 编辑器）来完成要查看此类应用程序的示例请参阅 Steve Sharrock 关于使用 TreeView 创建资源管理器风格的 ASPNET Web 应用程序的文章TreeView Programming an Explorerstyle Site View
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();
tvFirstText = First Tree Node;
// 创建第二个 TreeNote
TreeNode tvSecond = new TreeNode();
tvSecondText = Second Tree Node;
// 将第二个 TreeNote 添加为第一个 TreeNote 的子节点
tvFirstNodesAdd(tvSecond);
// 将第一个 TreeNote 添加到 TreeView 的根节点中
tvFamilyTreeNodesAdd(tvFirst);
遗憾的是将数据库数据绑定到 TreeView 可不像将数据绑定到某个标准 ASPNET 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 可以作为超链接将访问者重定向到其他 URLTreeNote 还可以包含复选框
使用 Visual Studio NET 并借助 TreeNote 编辑器可以很容易地实现在 TreeView 中显示静态数据通过 XML 文件或通过以编程方式添加 TreeNote可以动态指定 TreeView 控件的内容虽然本文介绍的仅是 TreeView 控件的皮毛但对于您初步了解在 ASPNET Web 应用程序中使用 TreeView 控件也是大有帮助的
