摘要

在本文章中笔者使用WinForm.NET2.0开发出一个具有固定背景图片的带滚动条的容器控件。点击下载本文章配套的演示程序 /Files/xdesigner/FixedBackground.zip。

 

    在WinForm.NET开发中，可以使用一个Panel或UserControl作为一个带滚动条的容器放置图形或其他控件。我们可以设置控件的BackgroundImage属性来设置控件的背景图片，但这个背景图片是会随着控件内容的滚动而滚动的，而且还出现背景破碎的不良效果。现笔者在开发实践中遇到控件的背景图片不随着控件的滚动而滚动。

在B/S开发中，开发者可以使用“background-attachment:fixed”的CSS样式来固定HTML文档的背景图片，使之不随着内容的滚动而滚动。但在WinForm.NET开发中却没这个功能。

于是袁某人又开始路漫漫其修远兮，到处上下而求索，居然得出了一个解决方法，在此使用发现问题，分析问题和解决问题的步骤来一一道来，希望能为遇到相同问题的人一点启发。

发现问题

首先说说WinForm.NET滚动时背景也随之滚动的原理。如下图所示，笔者在一个窗体上放置一个Panel控件，设置了一个尺寸较大的背景图片，然后设置控件的AuotScroll值为true，设置控件的AutoScrollMinSize属性值为背景图片的大小，则这个控件就会如下图所示的显示滚动条。[作者袁永福 http://www.xdesigner.cn/ ]

 

笔者向下拖拽控件的垂直滚动条，使得控件的内容发生滚动。在默认情况下，Windows操作系统会自动实现控件客户区视图的滚动，例如滚动操作导致了100个像素的滚动距离，Windows会自动的将控件客户区显示的内容向上平移100个像素，于是控件下方新腾出来100个像素高度的客户区，这个客户区就是控件的无效矩形，Windows操作系统会向控件发送WM_PAINT消息，导致触发控件的Paint事件，从而调用程序代码来重新绘制这100个像素高度的区域。[作者袁永福 http://www.xdesigner.cn/ ]

 

Panel控件内部处理Paint事件来绘制背景图片，此时即使控件的内容发生滚动，但绘制图形使用的XY坐标系仍然是以控件的左上角为原点的。而且由于无效矩形只有控件客户区最下面的100个像素的高度，而无效矩形之上的部分是不会重新绘制的，于是控件重新绘制了一部分的背景图片，于是导致如下的用户界面。这个用户界面是破碎的，是不能见人的。

 

笔者让其他窗体完全覆盖掉这个控件后关闭覆盖窗体，则控件的所有的客户区都是无效区域，Windows操作系统会向控件发送WM_PAINT消息来触发控件的Paint事件，而控件内容会自动处理Paint事件并重新完整的绘制背景，从而形成如下效果。

 

分析问题

根据上述观察到的现象可以知道WinForm.NET控件天生具有固定背景的功能，其背景图片是不随控件的滚动而滚动。但Windows的默认滚动图形的操作却破坏了这个功能，从而造成了控件滚动时背景破碎的现象。

根据上述的原理，笔者可以得出，只要阻止Windows默认的滚动图形的操作即可保护WinForm.NET控件的天生的固定背景的功能，从而实现固定背景的带滚动的控件。

WinForm.NET并没有提供任何禁止Windows默认滚动图形的功能，于是笔者使用到了一个强大的Win32API函数，那就是LockWindowUpdate。[作者袁永福 http://www.xdesigner.cn/ ]

这个API函数在C#中的声明形式如下 

[DllImport(“user32.dll”)]
external static bool LockWindowUpdate( IntPtr hWndLock );

 

这个函数能允许或禁止指定窗体的绘制操作，在任何时刻，整个操作系统中只能有一个窗体的绘图操作被禁止掉。

这个函数的参数是窗体句柄，若参数为0表示用户界面被锁定的窗体重新释放而能绘制用户界面。

只要在控件发生滚动时程序调用LockWindowUpdate函数，则控件的内容被锁定了，不能反映任何图形操作，Windows默认的滚动图形的操作就没有效果。当控件的滚动操作完成调用LockWindowUpdate函数来重新释放窗体并强制重新绘制控件的所有内容，则就能实现固定背景的效果。

根据上述分析，笔者只要处理控件的滚动事件，当控件内容发生滚动时调用LockWindowUpdate函数锁定控件用户界面，而滚动完毕后又调用LockWindowUpdate函数解除锁定并重新绘制控件所有的内容则就可以让控件发送滚动时不背景图片不随之滚动。

在WinForm.NET2.0中，支持滚动的控件都是从System.Windows.Forms.ScrollableControl派生的，这些控件都提供一个Scroll事件。这个事件的参数是一个System.Windows.Forms.ScrollEventArgs类型的对象，该参数有一个Type属性值，是System.Windows.Forms.ScrollEventType类型，用于表示滚动事件的类型。WinForm.NET2.0中支持的滚动事件类型有以下几种。[作者袁永福 http://www.xdesigner.cn/ ]

滚动事件类型	说明
SmallDecrement	滚动框移动了较短的距离。用户单击了左（水平）或上（垂直）滚动箭头，或者按了向上键。
SmallIncrement	滚动框移动了较短的距离。用户单击了右（水平）或下（垂直）滚动箭头，或者按了向下键。
LargeDecrement	滚动框移动了较长的距离。用户在滚动条上单击了滚动框左侧（水平）或上方（垂直），或者按了 Page Up 键。
LargeIncrement	滚动框移动了较长的距离。用户在滚动条上单击了滚动框右侧（水平）或下方（垂直），或者按了 Page Down 键。
ThumbPosition	滚动框被移动。
ThumbTrack	滚动框当前正在移动。
First	滚动框被移动到 System.Windows.Forms.ScrollBar.Minimum 位置。
Last	滚动框被移动到 System.Windows.Forms.ScrollBar.Maximum 位置。
EndScroll	滚动框已停止移动。

一般的用户在进行滚动操作时会触发一个或多个不同类型的滚动事件，而且这些事件的发生过程和Windows操作系统的“拖动时显示窗口内容”设置有关。

笔者在控制面板中运行“显示”项目，显示出“显示属性”对话框，切换到“外观”标签页，点击“效果”按钮，弹出的“效果”对话框中就能设置“拖动时显示窗口内容”的操作系统配置项了。这个选项对控件的滚动行为影响很大。

 

在Windows操作系统中，鼠标右击控件的滚动条，通常会弹出如下的快捷菜单。点击这些快捷菜单就会设置滚动条的位置，而且会触发不同类型的滚动事件

经过试验，在WindowsXP SP2的环境下，点击这些菜单项目而触发的滚动事件有

滚动至此	当Windows系统设置了“拖动时显示窗口内容”时 ThumbTrack ThumbPosition ThumbTrack ThumbPosition 当没有设置“拖动时显示窗口内容”时 ThumbTrack ThumbTrack ThumbPosition
顶部	First 0
底部	Last
向上翻页	LargeDecrement
向下翻页	LargeIncrement
向上滚动	SmallDecrment
向下滚动	SmallIncrement

当用户用鼠标拖拽操作直接拖动滚动条时，控件触发的滚动事件过程如下：

1.       当用户在滚动条上按下鼠标左键，开始拖拽在时，控件触发ThumbTrack类型的滚动事件。[作者袁永福 http://www.xdesigner.cn/ ]

2.       当用户移动鼠标时，每一移动都会让控件触发ThumbTrack类型的滚动事件。当Windows系统设置了“拖动时显示窗口内容”时，还会触发控件重绘事件，当没有设置“拖动时显示窗口内容”时不会触发控件重绘事件。

3.       当用户松开鼠标按键，结束拖拽操作时触发ThumbPosition事件。

 

此外当程序自己使用代码设置控件的AutoScrollPosition属性来自行滚动时不会触发任何控件滚动事件，鼠标滚轮操作也不会触发滚动事件。

以上是在笔者的WindowsXP SP2的系统中的实验效果，相信对其他Windows操作系统也一样吧。

根据上述实验结果，笔者重点处理ThumbTrack和ThumbPosition类型的滚动事件，由于存在“拖动时显示窗口内容”的设置，笔者会重载处理控件的Windows消息处理方法，当Windows没有设置“拖动时显示窗口内容”时，对每一个ThumbTrack事件消息都额外的处理一个ThumbPosition消息，这样就将两种情况统一起来。[作者袁永福 http://www.xdesigner.cn/ ]

解决问题

根据所上述分析，笔者开始创建一种固定背景的可滚动的控件了，原理上面讲的比较清楚，因此编写代码时不再多说了。笔者首先使用VS.NET2005建立一个名为“FixedBackground”的WinForm的C#工程。然后创建一个名为FixedBackgroundControl的类型，该类型是从System.Windows.Forms.UserControl类型派生的。

笔者建立一个FixedBackground的属性用于指定是否启动固定背景的功能，其代码如下

 

private bool bolFixedBackground = false;
/// <summary>
/// 固定背景
/// </summary>
[System.ComponentModel.Category("Appearance")]
[System.ComponentModel.DefaultValue(false)]
public bool FixedBackground
{
    get
    {
        return bolFixedBackground;
    }
    set
    {
        bolFixedBackground = value;
    }
}

 

然后定义一个名为LogonImage的属性用于设置在控件客户区右下角显示的图标，其代码如下

private System.Drawing.Image myLogonImage = null;
/// <summary>
/// 标志图片
/// </summary>
[System.ComponentModel.Category("Appearance")]
public System.Drawing.Image LogonImage
{
    get
    {
        return myLogonImage;
    }
    set
    {
        myLogonImage = value;
    }
}

然后笔者重载控件的OnPaintBackground方法用于自定义绘制背景，其代码如下。

 

/// <summary>
/// 自定义绘制控件背景
/// </summary>
/// <param name="e"></param>
protected override void OnPaintBackground(PaintEventArgs e)
{
    base.OnPaintBackground(e);
    if (myLogonImage != null)
    {
        // 在控件客户区的右下角绘制标志图片
        int x = this.ClientSize.Width - myLogonImage.Width;
        int y = this.ClientSize.Height - myLogonImage.Height;
        if (e.ClipRectangle.IntersectsWith(
            new Rectangle(
                x,
                y,
                myLogonImage.Width,
                myLogonImage.Height)))
        {
            e.Graphics.DrawImage(
                myLogonImage,
                x,
                y,
                myLogonImage.Width ,
                myLogonImage.Height );
        }
    }
}

接着要处理控件的滚动事件了，首先笔者导入Win32API函数LockWindowUpdate，其代码如下

 

[System.Runtime.InteropServices.DllImport("user32.dll")]
private static extern bool LockWindowUpdate(IntPtr hWnd);

笔者重载控件的OnScroll方法，其代码如下

 

/// <summary>
/// 处理滚动条事件
/// </summary>
/// <param name="se">事件参数</param>
protected override void OnScroll(ScrollEventArgs se)
{
    if (bolFixedBackground)
    {
        // 执行固定背景的操作
        if (se.Type == ScrollEventType.ThumbTrack)
        {
            // 若滚动框正在移动，解除对控件用户界面的锁定
            LockWindowUpdate(IntPtr.Zero);
            // 立即重新绘制控件所有的用户界面
            this.Refresh();
            // 锁定控件的用户界面
            LockWindowUpdate(this.Handle);
        }
        else
        {
            // 解除对控件用户界面的锁定
            LockWindowUpdate(IntPtr.Zero);
            // 声明控件的所有的内容无效，但不立即重新绘制
            this.Invalidate();
        }
    }
    base.OnScroll(se);
}

在这里可以看到程序处理滚动事件时调用了Refresh或Invalidate函数，这将导致控件所有的内容都重新绘制，当控件比较大，内容比较复杂时会导致绘制控件图形的任务很重，从而导致明显的闪烁，这是不可避免的难于优化的过程，因此笔者使用双缓冲技术来解决闪烁文件，笔者在控件的构造函数中添加以下代码即可启用控件的双缓冲设置

// 固定背景图片会不可避免的导致闪烁，此处启用双缓冲功能。
this.DoubleBuffered = true;

双缓冲能避免闪烁，但拖累的软件的性能，因此本控件是一个为了美观而降低性能的典型，因此建议本技术不要大量采用。[作者袁永福 http://www.xdesigner.cn/ ]

接着笔者要重载控件的Windows消息处理方法了，由于要事先知道Windows操作系统的“拖动时显示窗口内容”的设置。因此使用了下述代码

/// <summary>
/// Windows操作系统是否设置为拖动时显示窗口内容
/// </summary>
private bool bolDragFullWindows = false;

/// <summary>
/// 当创建控件Windows句柄时的处理，调用SystemParametersInfoGetBool API函数
/// 判断操作系统是否设置为拖动时显示窗口内容。
/// </summary>
/// <param name="e">参数</param>
protected override void OnHandleCreated(EventArgs e)
{
    bolDragFullWindows = false;
    if (SystemParametersInfoGetBool(SPI_GETDRAGFULLWINDOWS, 0, ref bolDragFullWindows, 0) == false)
    {
        bolDragFullWindows = false;
    }
    base.OnHandleCreated(e);
}

private const int SPI_GETDRAGFULLWINDOWS = 0x0026;

[System.Runtime.InteropServices.DllImport(
    "user32.dll",
    EntryPoint = "SystemParametersInfo", 
    SetLastError = true)]
private static extern bool SystemParametersInfoGetBool(
    int action,
    uint param,
    ref bool vparam,
    uint init); 

在这段代码中，bolDragFullWindows全局变量用于指明是否系统是否启用了“拖动时显示窗口内容”。笔者重载了OnHandleCreated方法，在这个方法中调用Win32API函数SystemParametersInfoGetBool来获得这个系统级设置。

SystemParametersInfo函数是一个很强大的Win32API函数，用于获得各种操作系统级设置，能实现的功能点很多，具体可参考MSDN中关于该函数的详细说明。

经过试验，控件在创建后修改了“滚动时显示窗口内容”后，对控件的滚动行为没有发生任何影响。因此实时的检测“滚动时显示窗口内容”的设置是不合适的，应当在控件句柄创建时才检查该设置，因此笔者重载了控件的OnHandleCreated函数来检测该系统级设置并保存在一个全局变量中。[作者袁永福 http://www.xdesigner.cn/ ]

笔者重载了控件的WndProc方法来处理控件接受的Windows底层消息，其代码如下

/// <summary>
/// 处理底层Windows消息处理方法
/// </summary>
/// <param name="m">Windows消息对象</param>
protected override void WndProc(ref Message m)
{
    if (bolFixedBackground)
    {
        if (m.HWnd == this.Handle)
        {
            // 当前消息是横向滚动条或纵向滚动条事件
            if (m.Msg == 0x0114 // WM_HSCROLL 
                || m.Msg == 0x0115)// WM_VSCROLL )
            {
                int v = m.WParam.ToInt32();
                if ((v & 0xf) == 5)
                {
                    // 滚动消息是 THUMBTRACK 类型
                    base.WndProc(ref m);
                    if (bolDragFullWindows == false)
                    {
                        // Windows操作系统没有设置为拖动时显示窗口内容
                        // 则重复执行 THUMBPOSITION 类型的滚动消息
                        v = v - 1;
                        m.WParam = new IntPtr(v);
                        base.WndProc(ref m);
                    }
                }
                else
                {
                    base.WndProc(ref m);
                }
                return;
            }
        }
    }
    base.WndProc(ref m);
}

在这段代码中，若消息类型是ThumbTrack类型的滚动消息，则执行控件的默认处理方法，然后将消息类型修改为ThumbPosition类型的滚动消息，然后再次执行控件默认的消息处理方法，这样就使得控件每接受到一个ThumbTrack类型的滚动消息就处理了ThumbTrack和ThumbPosition两个消息。这就统一了有和没有“拖动时显示窗口内容”两种情况。

由于用户进行鼠标滚轮操作时不会触发滚动事件，因此还需要处理控件的鼠标滚轮事件来，其代码如下

/// <summary>
/// 处理鼠标滚轮事件
/// </summary>
/// <param name="e"></param>
protected override void OnMouseWheel(MouseEventArgs e)
{
    if (bolFixedBackground)
    {
        LockWindowUpdate(this.Handle);
        base.OnMouseWheel(e);
        LockWindowUpdate(IntPtr.Zero);
        this.Invalidate();
    }
    else
    {
        base.OnMouseWheel(e);
    }
}

笔者还进行了一些其他非关键的代码的编写，这样，一个具有固定背景图片的可滚动的控件开发完毕。[作者袁永福 http://www.xdesigner.cn/ ]

测试

这个控件开发完毕后，笔者就可以测试了。笔者在项目中新增一个窗体，打开窗体设计器，可以在工具箱上看到“FixedBackgroundControl”的项目，笔者点击该项目即可在窗体上画出一个固定背景图片的控件，则窗体的设计样式如下图所示

 

笔者对该控件进行以下属性设置

AutoScroll	True
AutoScrollMinSize	2000,2000
FixedBackground	True
LogonImage

这样笔者就可以运行这个窗体来检查控件的运行时效果了。[作者袁永福 http://www.xdesigner.cn/ ]

小结

在这篇文章中，笔者使用了WinForm.NET2.0来实现一个具有固定背景图片的带滚动的控件，从而实现了类似“background-attachment:fixed”的CSS样式的用户界面，这个过程是比较复杂的，需要了解WIN32编程的一些知识。相对于常规ASP.NET开发，C#图形编程比较复杂的，应用广泛，对于软件技术爱好者来说是一片广阔的天空。

 

评论: 8　查看评论　发表评论

---

最新新闻：
· 苹果放出iPad专用iPhone OS 3.2 SDK(2010-02-10 18:05)
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

]]>

今天是2009年10月1号，上午看了国庆阅兵式，晚上看了国庆晚会，感触比较大，祖国万岁，大中华万岁。

国庆阅兵式上，大批军人踏着整齐的方步走过天安门前，整齐划一，绝无例外，展示了强悍的执行力，强悍的执行力就是战力逆天的精神基础。中国军队大量的现役装备展示在世人面前，成批量成系列的先进装备列装军队，最后那群桶装核导弹一看就很好很强大，这样的装备构建了完整的武器功能链，形成战力逆天的物质基础。如此强大的精神基础和物质基础就造就了战力逆天的中国军队，成就中国强大的武力。就像没人敢欺负李连杰一样，没有国家敢欺负拥有强大武力的中国。强大的武力加上和平的心就能造就稳定的和平，缺一不可。而只有稳定的和平才能使我们安心的保稳定设促发展。【http://www.xdesigner.cn】

人际社会还多少讲究礼尚往来和广泛的尊重他人。但我看当今国际社会并无多少礼尚往来，都是讲究实力和利益交易。“韬光养晦”是前一段时期的中国对外策略，结果形成了中国的较为和平的国际环境。但这种低调形成的和平是不稳定的，现在是到了武装威慑力量来加强和延续和平的时候了。我觉得中国不必对周边小国家的小动作反应过大，中国发展的重要瓶颈只有台湾问题，我们应当集中精力解决台湾问题，等台湾问题解决了，一切就海阔天空。【http://www.xdesigner.cn】

晚上看了国庆联欢晚会，听说是老谋子导演的，还是比较精彩的，但觉得和奥运会的开幕式提高不是很多，呵呵，现在的观众都学我们的客户，越来越挑剔了。那个和平鸽形状的烟花比奥运那个大脚印的图形复杂了许多，想必这一年那些烟火师傅改进了不少。

改革开发是正确的路线，没有改革开发，中国怕是像现在的朝鲜一样，绝无前途。纵然改革开发带来了很多问题，但世界上没有绝对正面的事物，些许问题最终都是可以解决的，但改革开发带来的利益是巨大的本质的。回想小时候去外婆家，起大早坐车，下午才能到，而现在只要2个小时。以前打电话很麻烦，长途都得靠电报，现在手机很方便，3G上网也很方便。【http://www.xdesigner.cn】

一个国家真正的强大是综合的强大，军队强大，办的联欢会强大，铁路修到了青藏高原，强大，开始在国外办孔子学院，文化正在强大。没有综合的强大就没有生存权，没有综合的强大就没有和平和发展。我作为一名软件从业者，认为中国的综合的强大包括计算机软件业的强大，国家该花精力认真抓盗版了，因为盗版对中国软件业是釜底抽薪的伤害。

最后祝福祖国繁荣昌盛，祝各位节日吃好喝好玩好，多为祖国的建设出点力啊。

评论: 1　查看评论　发表评论

最新新闻：
· 苹果放出iPad专用iPhone OS 3.2 SDK(2010-02-10 18:05)
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

C#发现之旅 - 高性能ASP.NET树状列表控件

本章介绍

本课程研究了使用XSLT技术来开发一个树状列表WEB控件，展示了XSTL的一些高级应用，以及ASP.NET控件的开发过程，本课程内容比较多。本章的配套演示程序为http://files.cnblogs.com/xdesigner/ASPNETTreeView.zip。

已有树状列表控件分析

发现问题

近期发现有人在ASP.NET项目开发中使用一种叫dtree的树状列表组件加载缓慢。这也是笔者撰写本章的动机。毛主席教导我们，做事要发现问题，分析问题和解决问题。首先我们发现了已有的树状列表WEB控件加载缓慢的问题，接下来就很自然的是分析问题了。

下图就是dtree 运行界面的例子【袁永福原创(http://www.xdesigner.cn/)】

分析问题

现在我们分析问题，对使用dtree生成树状列表的程序代码的分析，可以了解程序运行过程如下图所示

在这样的程序中，首先服务器端的C#代码查询数据库，然后根据查询所得数据拼凑出一个JavaScript代码字符串，然后发往客户端，客户端浏览器获得这个JavaScript代码字符串并开始执行它，而在JavaScript脚本中也是字符串拼凑出一段HTML代码字符串，然后使用浏览器提供的document.write方法或obj.innerHTML属性将生成的HTML字符串填充到HTML页面中进行展示。

这是是分析了dtree的流程，但使用其他的一些树状列表控件也大体如此。

现在我们根据这个流程图来判断是哪个环节速度缓慢。基本上数据库本身查询速度是没问题；将查询结果传递到C#程序中问题也不大，因为一般的数据库服务器和ASP.NET程序是在一台电脑上或者同一个高速局域网中；C#程序生成JavaScript字符串的过程也是没多大问题，因为C#运行速度是相当的快的，而且还有StringBuilder来加速字符串拼凑操作，因此只要逻辑算法没有问题，速度是有保障的。总体来说服务器端内部是没有速度问题。

将JavaScript字符串通过网络从服务器端发送到客户端，所花的的时间是字符串长度除以网络传输速度，若WEB系统运行在高速的局域网中，则速度没多大问题，但若WEB程序运行在缓慢的广域网或英特网中，则JavaScript字符串长度会比较大的影响程序运行速度。由于公司系统主要运行在局域网中，因此网络传输速度不是主要问题。

在客户端浏览器中，浏览器接受并执行JavaScript脚本代码，在JavaScript脚本中使用字符串拼凑来生成用于展现树状列表的HTML字符串。JavaScript代码是解释方式执行的，速度相当慢，而字符串拼凑操作也是比较缓慢的操作，JavaScript中没有任何手段来优化字符串拼凑操作。因此由JavaScript代码生成HTML字符串的过程是缓慢的，这是一个速度瓶颈。

JavaScript代码还调用浏览器提供的document.write函数或innerHTML属性将生成的HTML字符串填充到页面中，浏览器会解析这个HTML代码并展现出树状列表。由于document.write或innerHTML是运行在浏览器内部的，外部程序无法控制，而且速度也不算慢，因此这里也就没有什么好优化的。

经过上述分析，可以看到整个展现树状列表的过程中最缓慢的环节就是使用JavaScript脚本来生成HTML代码字符串，其次就是数据从服务器端发送到客户端的过程。若一个树状列表要显示数千个节点，则JavaScript脚本将拼凑出几百K甚至过MB的HTML字符串，这个过程是相当缓慢的，很容易导致IE浏览器由于脚本运行过于缓慢而提示用户是否继续执行脚本。

因此JavaScript脚本生成HTML字符串将是我们主要的优化环节，也是新开发的树状列表控件的重点关注部分。

解决问题

经过上述分析，我们可以了解到树状列表加载缓慢主要原因就是JavaScript脚本生成HTML字符串过程缓慢，很自然我们就针对这个原因来解决问题。

【袁永福原创(http://www.xdesigner.cn/)】首先我们可以完全抛弃JavaScript脚本，使用C#在服务器端生成 展现树状列表的HTML代码，然后发往客户端 ，客户端浏览器获得HTML代码并展示出树状列表。

在这种模式下， 服务器端的C#程序查询数据库获得数据，并使用字符串拼凑来生成用于展现树状列表的HTML代码，由于C#功能强大，而且速度比较快，可以使用StringBuilder来加速字符串拼凑操作，而客户端浏览器获得的这个HTML代码，立即解析并显示出树状列表。因此整个过程是相当快的。这是一个可以采用的解决方法。

当然这个方式有一定的限制性，若服务器程序运行也比较缓慢，比如ASP，它比客户端的JavaScript脚本快不了很多，此时这种方法优势就不明显了。

【袁永福原创(http://www.xdesigner.cn/),请尊重知识】 

另外一个方法就是加速JavaScript脚本生成HTML代码的过程。这时我们可以考虑使用其他的可快速运行的程序来辅助JavaScript来生成HTML代码，于是我们想到COM组件，我们可以设计出这样的程序结构。

在这个软件结构中，C#程序连接数据库查询数据，然后生成JavaScript脚本字符串，而客户端浏览器获得并执行JavaScript脚本，在JavaScript脚本调用外部的COM组件，生成HTML字符串，然后使用document.write或innerHTML将HTML字符串填充到页面中显示出树状结构。由于COM组件一般是用C++等编译性语言开发的，因此运行速度比JavaScript快得多，这样能加速JavaScript生成HTML代码的速度。

由于便于B/S系统的开发和部署，我们尽量避免自己开发的COM组件或使用第三方组件，而是使用Windows操作系统自带的标准COM组件，浏览器认为该组件比较安全，运行速度快，而且还能方便的生成HTML字符串。这个组件是什么呢？这就是MSXML组件。

MSXML组件是用C++开发的，是Windows操作系统的标准部分，而且是IE浏览器认为比较安全的ActiveX组件，能和IE浏览器进行密切的协作。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

那么我们又如何使用MSXML组件来生成HTML代码呢？我们可以采用XSLT技术，首先系统提供一个XML文档，该文档定义了树状结构信息，然后我们调用一个事先定义好的XSLT文档，将两者进行XSLT转化，一下子就能生成HTML字符串，然后将生成的HTML字符串填充到页面中。在这个过程中，大部分运算量是由MSXML完成，而MSXML组件是用C++开发的，运行速度快，这样就能大大加快整个生成HTML字符串的过程，从而加快树状列表的加载过程。

由于XSLT是国际标准，因为我们在服务器端也可以使用这种方法。而且客户端和服务器端的代码类似，因此我们有可能开发出同时支持服务器端运行和客户端运行的树状列表WEB控件。

运行软件

笔者已经根据上述的解决问题的方式经过上述的软件设计开发出了这个树状列表WEB控件，并编写了演示页面，现对该控件的功能进行展示，使得读者对这个控件有一些初步的印象。打开浏览器直接输入演示页面地址，打开页面，可以看到如下的用户界面【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

可以看到页面上主要显示了两个树状列表，其显示内容都是按照客户，定单，货物三层结构的树状列表。其中左边的树状列表是一次性加载了所有的数据，共生成3072个节点。而右边的列表只加载了第一层节点，共91个节点，但右边的列表能动态加载子节点列表。用户可以使用鼠标点击操作来展开和收缩节点，点击货物节点会显示一个消息框。

软件设计

为了便于开发人员使用，笔者开发出一个通用的树状列表WEB控件，该控件名称为SkyTreeViewControl，是一种从System.Web.UI.WebControls.WebControl派生的WEB控件，这样开发人员以后在ASP.NET 程序中需要树状列表时只要将这个控件拖拽到页面即可开始使用了。现在开始进行控件的基本设计。

结构设计

根据上面分析的结果，笔者采用XML/XSLT技术，于是就可以设计出如下的程序运行流程。

在这个流程中，服务器的C#程序查询数据库获得树状结构信息，并将树状结构信息保存到一个XML文档中，然后发往客户端。而客户端执行的JavaScript脚本中，调用MSXML组件加载服务器端生成的节点XML文档，并从服务器上下载事先准备好的XSLT模板文档，然后调用MSXML组件执行XSLT转换，转换结果就是HTML字符串，然后将这个字符串填充到页面上展示出树状列表。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

目标HTML代码设计

无论WEB控件或者JavaScript等等经过怎样的处理，浏览器最终都是依据HTML代码来显示文档界面的，因此设计WEB控件，首先得设计WEB控件最终生成的HTML代码，也就是WEB控件的执行目标。

为了展现树状结构，业界已经设计出很多种HTML代码格式。有使用DIV标签的，有使用P标签的，笔者这里经过一些尝试，决定采用TABLE标签，使用表格套表格的方式来展现树状列表的层次结构。其设计的HTML页面范例如下。

培训演示程序中有一个名为treeviewsample.htm 的文件，其中就是这个树状列表的HTML样本。

这个演示HTML文档中，展现节点“10359 成先生”及其子节点的HTML代码片段如下

则这段HTML代码的显示效果为

分析这段HTML代码，读者可以看到，每一个节点都占据一个表格行，节点文本后面还跟着一个Table来容纳子节点。如此循环则使用表格套表格的方式实现了一个树状列表结构。

HTML中，对于每一个节点都定义了一个惟一的编号，比如“NodeID”，在实际应用中则可以是任意样式的ID号，而且每一个节点分成4个部分。首先是前面的展开收缩控制元素。用一个图片元素来表示，当节点展开时使用图标，当节点收缩时使用图标。该图片元素编号为“NodeID_expend”，占据了节点表格行的第一个单元格。由于树状结构有同层节点连接线，若节点不是上级节点的最后一个子节点则设置第一个单元格的背景图片来模拟显示同层节点连接线。

节点表格行的第二个单元格用来放置节点的图标，文本和子节点的表格。每一个节点都有一个图标，使用IMG元素来展示，元素编号是“NodeID_icon”，而且若有子节点，则节点可以展开和收缩，此时节点的图标是不同的，需要动态设置。最典型的就是节点展开时使用图标，而节点收缩时使用图标，当然两个图标是可以一样的。这里使用扩展属性“SrcBack”来设置节点第二个图标的图片地址，当节点展开或收缩时可以将图片元素的SrcBack属性值和标准的Src属性值进行互换即可实现节点图标的变化。

节点图标后面就是用一个A标签来显示节点文本了，这个元素的编号为“NodeID_text”。

若节点有子节点，则在节点文本后面放置一个Table 元素来显示子节点。该表格的编号为“NodeID_table”。这个表格里面也是一个表格行来显示一个节点数据。当用户点击节点的展开和收缩标记时，笔者就可以编写脚步来控制容纳子节点的Table对象的display的样式值来显示或隐藏这个表格，从而实现子节点的展开和收缩。

HTML代码设计后，笔者开发的WEB控件的最终的目标就是生成这样的HTML代码，其生成过程有很多种，有字符串拼凑的，有在服务器端用C#程序生成，也有在客户端用JavaScript脚本代码来生成。在这里使用XSLT来生成HTML代码，并支持在服务器端和客户端生成代码。

脚本设计

基本的HTML代码设计出来后，接着就开始设计客户端脚本，使得这个静态的树状列表具有动态的效果。这里采用JavaScript脚本语言，树状列表的动态效果就是用户鼠标点击某个节点时，若该节点有子节点，则设置包含子节点的表格元素在可见和不可见的状态的切换，而且同时更新元素的图标来表示节点的展开收缩状态，此外还设置节点的文本为高亮度显示来表示该节点处于选择状态。

读者知道HTML的CSS样式控制中有一个名为“display”的样式，若设置“display”的值为“none”时则HTML元素不可见而且不占地方，就好像这个元素从来就没有存在过，若设置“display”样式为空字符串时，则HTML元素是正常显示。JavaScript脚本就可以修改子节点表格元素的“display”样式来显示或隐藏子节点列表。

在JavaScript中，很多HTML元素有“getAttribute”和“setAttribute”函数，用来读取和设置扩展属性，在上面的HTML设计中，笔者对显示节点图标的图片元素定义了一个名为“SrcBack”的非标准属性。在JavaScript中，可以使用代码“obj.getAttribute(“SrcBack”)”来获得该属性值，使用“obj.setAttribute(“SrcBack”,”新数据”)”来设置该属性值；在IE浏览器中，开发人员可以使用更简洁的方式，直呼其名的获得和设置扩展属性值，也就是使用“obj.SrcBack”属性，但这是微软对JavaScript和HTML DOM的扩展，只适用于IE，其他浏览器是不支持的，为了使得控件具备一定的兼容性，笔者这里使用“getAttribute”和“setAttribute”这种符合HTML国际标准的编程接口。

在脚本程序中有个很重要的问题是如何加载XML和XSLT文档。很多时候这里的XML文件是动态生成的，而XSLT文档是事先编制好的。一般的需要三个文档，一个是包容树状列表的主HTML页面，一个是生成XML文档的动态服务器页面，还有一个是保存在服务器上的静态的XSLT文件。这三个文件分开提供，则不利于程序的编写和部署，为此这里采用微软IE浏览器所特有的XML数据岛（XML Island）的功能，将XML文档和XSLT文档嵌入到HTML文档中，从而仅仅依赖一个HTML文档即可生成树状列表。

在HTML中使用标签XML来定义一个XML数据岛元素。其范例为

开发人员既可以使用它的src属性来指定动态加载的XML文档的URL地址，也可以直接在XML标签之间填写XML代码。在JavaScript中，开发人员可以使用XML数据岛对象的XMLDocument属性来获得XML文档对象，也就是调用“XMLIslandID.XMLDocument”语句，开发人员还可以使用响应它的“onreadystatechange”事件来执行该XML数据加载完毕后的处理。

XML数据岛是IE浏览器的特有的功能，其他浏览器不支持XML数据岛。关于XML数据岛的详细信息可参考MSDN中的相关说明。若要使得控件能在多个浏览器中运行，则不得使用XML数据岛。此处为了开发方便就采用XML数据岛技术，不过这使得控件只能用于IE浏览器。

节点XML文档设计

在这个WEB控件中将采用XML/XSLT技术来生成HTML代码。首先得设计出定义树状结构的XML文档，由于XML文档本身是树状结构，因此这里的XML文档设计就比较简单的了。大家可以提出很多种设计方案，在此我提出如下的设计方案。先看一下XML文档的范例。

详细读者看到这个范例后能很容易的理解这个XML文档的结构，Node元素表示一个节点，它下面有Icon元素指定元素图标文件名，Text元素指定节点文本，OnClick元素指定节点的OnClick事件处理，Nodes元素用于放置子节点。根元素RootNodes下放置了树状列表第一层节点。

XSLT文档设计

XSLT文档是这个控件中比较复杂的部分，在后面将详细说明其内容。

软件说明

根据软件设计，笔者已经完成了该程序，程序主要包含以下几个文件

现对该软件进行详细说明。

SkyTreeNode.cs

该文件中定义了类型SkyTreeNode，用于表示树状列表中的一个节点，其主要代码如下

本类型比较简单，定义了一些树状节点拥有的属性，此外还定义了一个Nodes子节点列表，一个节点可以有若干个子节点，则多个节点组合起来就可以构成树状列表。

该类型前面使用代码“[System.Serializable()]”来指定类型可以进行二进制序列化，在ASP.NET2.0中，所有可以保存在页面Session或ViewState中的对象必须可以执行二进制序列化，若SkyTreeNode类型没有使用代码“[System.Serializable()]”标记为可执行二进制序列化，则不能将其保存在页面Session或ViewState中。类型SkyTreeNode前面还使用代码“[System.Xml.Serialization.XmlType("Node")]”来指定类型进行XML序列化时的使用的XML标签名为“Node”。

对“Parent”属性在使用代码“[System.Xml.Serialization.XmlIgnore()]”表明该属性不执行XML序列化和反序列化。由于XML序列化是递归处理对象的所有的可读写属性，而“Parent”属性指向该节点的父节点，而父节点的“Nodes”属性又包含了这个节点，如此形成了对象循环引用，若“Parent”属性参与XML序列化则必然会造成无限递归循环，导致程序错误。

SkyTreeNodeList.cs

该文件定义了SkyTreeNodeList类型，该类型是树状节点列表，能存储若干个树状节点对象，该类型的代码为

本类型比较简单，它是从类型“System.Collections.CollectionBase”上派生的针对SkyTreeNode类型的强类型的列表，它使用代码“[System.Serializable()]”表明可以进行二进制序列化，它提供了一些属性和方法用于维护列表中的树状节点元素。

SkyTreeViewControl.cs

树状列表控件所有的C#代码就放置在这个文件中。打开这个文件，首先我们看到一条指令

这条指令前面有“assembly:”的前缀，表示这是一个针对程序集的指令，它具有两个参数，第一个参数为某个名称控件，第二个参数指定该名称空间下的所有的Web控件在ASPX的HTML源代码中的标签前缀，这里为“SkyWebControl”。

这个文件中定义了3个类型。

SkyTreeViewControlBuilder

这个类型是从System.Web.UI.ControlBuilder上派生的。本类型用于对VS.NET的WEB窗体设计器提供支持。

SkyTreeViewControlDesigner

这个类型是从System.Web.UI.Design.ControlDesigner 上派生的，用于对VS.NET的WEB窗体设计器提供支持。

SkyTreeViewControl

这个类型就是树状列表WEB控件了。首先看到它的定义头。

这个类型是从System.Web.UI.WebControls.WebControl上派生的。它还附加了3个特性，其中ControlBuilder特性用于指明控件配套的控件创建者类型为SkyTreeViewControlBuilder，Designer特性用于指明控件配套的设计器类型为SkyTreeViewControlDesigner，而特性ToolboxBitmap用于指明控件类型在VS.NET的窗体设计器的工具箱中使用什么样的图标。这里指明使用图标“”。

本控件定义了Nodes属性，其代码为

Nodes属性保存了树状列表控件的根节点。该属性使用代码“[System.ComponentModel.Browsable( false )]”声明该属性在设计器中的属性列表中是看不见的。本控件还定义了AllNodes属性用于获得树状列表所包含的所有节点组成的列表。

本控件定义了IndentXML属性，其定义代码为

该属性用于表示生成的XML源代码是否进行缩进。若XML源代码进行缩进，则方便开发人员直接查看XML源代码，但这样会增加页面大小，因此当应用程序处于开发时可以设置树状列表的控件的IndentXML属性值为true，当开发完成部署时可设置该属性值为false。

此外控件还定义了以下几个属性

OnLoad 函数

控件重写了WebControl的OnLoad函数，其代码为

/// <summary>
/// 控件加载时的处理，此时控件尚未向页面输出HTML代码。
/// </summary>
/// <param name="e">事件参数</param>
protected override void OnLoad(EventArgs e)
{
    base.OnLoad (e);
    // 包含树状列表节点样式的HTML代码
    string strStyleHtml = "\r\n.SkyTreeViewControl_TreeNode { " + this.TreeNodeStyleString + "}"
                + "\r\n.SkyTreeViewControl_SelectedNode{" + this.SelectedNodeStyleString + "}\r\n";

    // 添加树状节点使用的CSS样式代码
    if (this.Page.Header != null)
    {
        // 若在ASPX的HTML代码中使用了“<head runat=server>.</head>”则
        // this.Page.Header属性有效，可以向head标签下添加新内容。
        // 按照比较严格的HTML规范，style标签只能放置在head标签下面。
        // ASP.NET2.0支持this.Page.Header属性,但ASP.NET1.0/1.1不支持。
        bool find = false;
        foreach (System.Web.UI.Control ctl in this.Page.Header.Controls)
        {
            // 搜索Header下面的所有的子元素，看看是否已经输出过树状列表
            // 节点样式元素。
            if (ctl.ID == "SkyTreeViewControl_Style")
            {
                find = true;
                break;
            }
        }
        if (find == false)
        {
            // 若以前没有输出则向Header元素下添加新的style元素，并设置其内容。
            HtmlGenericControl style = new HtmlGenericControl("style");
            style.ID = "SkyTreeViewControl_Style";
            style.InnerHtml = strStyleHtml;
            this.Page.Header.Controls.Add(style);
        }
    }
    else
    {
        // 不能在Render或RenderContents函数中使用RegisterClientScriptBlock
        // 因为那时RegisterClientScriptBlock函数的功能已经不在状态，无效了。
        // 而OnLoad函数中页面尚未开始输出，此时RegisterClientScriptBlock函数
        // 是有效的。
        this.Page.ClientScript.RegisterClientScriptBlock(
            this.GetType(),
            "SkyTreeViewControl_Style",
            "<style>" + strStyleHtml + "</style>");
    }
}

这里的树状节点列表需要根据其选择状态而使用属性“TreeNodeStyleString”或“SelectedNodeStyleString”中指定的CSS样式，为了减少HTML代码量，将生成一个style的HTML标签，该标签包含了属性“TreeNodeStyleString”或“SelectedNodeStyleString”指定的CSS样式，而对树状列表节点采用“class=’样式名称’”来选择其CSS显示样式。

按照比较严格的HTML语法，style标签必须放置在HTML文档中的head标签里面，因此本控件尽量将style标签放置在head标签中。

在ASP.NET2.0中，WEB控件可以使用属性“this.Page.Header”获得ASPX中的head标签，若ASPX的HTML代码中使用了“<head runat=server>….</head>”，则属性“this.Page.Header”属性是有效的，若head标签没有标记为“runat=server”则“this.Page.Header”属性值是空引用，由于笔者无法强制开发人员使用“<head runat=server>”标记，因此在此需要进行判断“this.Page.Header”属性值是否为空。注意ASP.NET1.0/1.1不支持“this.Page.Header”属性。

若“this.Page.Header”属性有效，则还需要遍历页面head标签下面的所有的子元素，若没有找到ID号为“SkyTreeViewControl_Style”则元素则向其添加一个ID号为“SkyTreeViewControl_Style”的标签为“style”的HTML元素，此举是为了放置当同一个页面上有多个树状列表控件时重复的向“head”标签输出“style”标签。

若“this.Page.Header”属性为空，则只能使用非标准的HTML语法来输出style标签了。这里使用了函数“this.Page.ClientScript.RegisterClientScriptBlock”，这个函数用于向页面特定的部分输出HTML代码。

在ASP.NET中，任何标记为“runat=server”的WEB控件必须包含在标记为“runat=server”的FORM元素中。当页面程序或WEB控件内部调用RegisterClientScriptBlock 函数时，ASP.NET框架会紧跟着Form元素的起始标记(也就是HTML代码“<form runat=server … >”)后插入指定的HTML代码。这个函数有三个参数，第一个参数为WEB控件的类型，第二个是用于标记HTML代码块的名称，第三个是HTML代码字符串。若在同一种（注意，不是同一个）WEB控件中调用了多次RegisterClientScriptBlock函数，但使用了相同的HTML代码块名称，则仍然只输出一次。这样能避免一个页面上同一个类型的多个WEB控件多次输出相同的HTML代码。

类似的，ASP.NET还提供一个RegisterStartupScript 函数，函数参数也是HTML代码块的名称和HTML代码字符串。但它会紧挨着Form元素的结束标签(也就是HTML代码“</form>”)的前面插入指定的HTML代码。下面的代码说明了函数RegisterClientScriptBlock和RegisterStartupScript的输出区域。

Render 函数

WEB控件使用Render函数向页面输出HTML代码。其代码为

在这里会进行判断，若控件设置了AutoScroll属性，也就是当树状列表要显示的节点比较多时，控件自动显示滚动条，这里就设置控件的“overflow”样式值为“auto”。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

ASP.NET框架处理原始的ASPX文件时，遇到WEB控件标签时会去掉这个标签，然后转而调用WEB控件的Render函数。比如在Default.ASPX中有一段HTML

当ASP.NET框架处理这个HTML代码片段时，会将“SkyWebControl:SkyTreeViewControl”标签整个的删除掉，然后转而调用WEB控件的Render函数，将这个函数输出的HTML代码替换掉ASPX中的WEB控件标签。此时ASPX中的WEB控件标签成了WEB控件在HTML文档中的占位符。这就是所有WEB控件输出HTML代码的原理，不会有例外。

RenderContents 函数

控件的Rander函数调用了“base.Rander”函数，而“base.Rander”函数内部会调用RenderContents函数来输出控件的内容。因此这里控件重写了RenderContents函数用来输出详细内容。这个函数是树状列表控件C#代码的主要内容。

本函数的第一个部分就是判断控件是否处于设计模式，也就是判断控件是否运行在VS.NET的Web窗体设计器中，其代码如下

在这里判断 base.Page.Site.DesignMode 属性。若该属性值为 true , 则表明控件处于设计模式，出现在VS.NET的窗体设计器中。此时控件就是简单地输出控件的名称类型和一些重要属性值。

若控件不处于设计器中，那就是真正的运行了。若允许客户端动态加载子节点，则输出支持动态加载子节点的HTML代码块，这里使用了RegisterStartupScript函数。将在客户端的form标签结束前输出这些HTML代码。

这里要注意一下，在Render和RenderContents函数中调用RegisterClientScriptBlock函数是无意义的，因为早在任何WEB控件输出前，form标签已经开始并输出了一些内容了，已经输出的内容是不可更改的，因此Render或RenderContents中不能调用RegisterClientScriptBlock函数，而应当在控件的的OnLoad方法或Load事件处理中调用RegisterClientScriptBlock函数。

第一段HTML代码块

若控件的“DynamicLoadChildNodes”属性值为true，也就是控件运行在客户端动态加载子节点，则输出支持客户端动态加载子节点的HTML代码，首先输出一个名为“SkyTreeViewControlTempXML”的XML数据岛标签，并将它的“onreadystatechange“事件绑定到”SkyTreeViewControlDynamicLoadChildNodes”的JavaScript函数上。这里还定义了一个名称为“SkyTreeViewControlDyanmicRootNodeID”的全局变量，用于指明是哪个节点正在加载在节点。这里输出的HTML代码内容为

<!-- 

    定义一个XML数据岛标签
    
    当动态加载子节点时使用该XML数据岛来加载定义子节点的XML文档，

    XML数据岛是IE特有技术，其他浏览器可能不支持。

-->
<xml id='SkyTreeViewControlTempXML'
     onreadystatechange='SkyTreeViewControlDynamicLoadChildNodes()' ></xml>
<script language=javascript>

//--------- 开始定义动态加载子节点使用的JavaScript 代码---------------------

// 当前动态加载子节点的根节点对象编号
var SkyTreeViewControlDyanmicRootNodeID ;

// 动态加载子节点
function SkyTreeViewControlDynamicLoadChildNodes()
{
    // 获得加载子节点定义数据的XML数据岛对象
    var xml = document.getElementById( 'SkyTreeViewControlTempXML' );
    if( xml == null )
    {
        return ;
    }
    if( xml.readyState != 'complete' )
    {    // 此时说明XML数据岛正处于工作状态，取消当前操作
        return ;
    }
    // 获得当前正在处理的树状列表节点对象
    var RootNode = document.getElementById( SkyTreeViewControlDyanmicRootNodeID + '_text' );
    if( RootNode == null)
        return ;
    var html = '';
    var errorflag = false;

    // 获得包含XSLT代码的XML数据岛对象
    var xsl = document.getElementById( 'SkyTreeViewControlXSLT');
    if( xsl == null )
    {
        // 未找到XSLT文档则设置错误信息
        html = '缺失XSLT数据';
        errorflag = true ;
    }
    else if( xml.XMLDocument.parseError.errorCode != 0)
    {
        // 若加载定义子节点的XML文档错误则设置错误信息
        html = '错误:' + xml.XMLDocument.parseError.reason
                + '[' + xml.XMLDocument.parseError.url + ']' ;
        errorflag = true ;
    }
    else
    {
        if( xml.XMLDocument.documentElement == null )
        {
            html = '未找到根节点';
            errorflag = true ;
        }
        else
        {
            // 将当前节点的HTML标签的编号保存到XML文档中。
            xml.XMLDocument.documentElement.setAttribute(
                'RootID' , 
                SkyTreeViewControlDyanmicRootNodeID );

            // 执行XSLT转换，生成用于显示子列表的HTML字符串
            html = xml.XMLDocument.transformNode( xsl.XMLDocument );
        }
    }
    // 将当前节点的“正在加载”的字样删掉
    var lbl = document.getElementById( SkyTreeViewControlDyanmicRootNodeID +'_Loading');
    if( lbl != null )
    {
        if( errorflag )
        {
            lbl.innerHTML = '<br />' + html ;
            return ;
        }
        // 将动态生成的HTML代码输出到HTML页面中
        lbl.insertAdjacentHTML('afterEnd', html );
        lbl.parentNode.removeChild( lbl );
    }
    else
    {
        // 将动态生成的HTML代码输出到HTML页面中
        RootNode.insertAdjacentHTML('afterEnd', html );
    }

    // 获得节点的展开点图片对象
    var myExpend    = document.getElementById( SkyTreeViewControlDyanmicRootNodeID + '_expend');
    // 获得节点的图标图片对象
    var myIcon        = document.getElementById( SkyTreeViewControlDyanmicRootNodeID + '_icon');
    // 获得节点的文本对象
    var myText        = document.getElementById( SkyTreeViewControlDyanmicRootNodeID + '_text');
    // 获得子节点表格    
    var myTable        = document.getElementById( SkyTreeViewControlDyanmicRootNodeID + '_table');

    if( myExpend != null 
        && myIcon != null
        && myText != null 
        && myTable != null )
    {
        // 将当前节点的控制图标从收缩状态改变为展开状态
        var SrcBack = myIcon.src ;
        myIcon.src = myIcon.getAttribute('SrcBack');
        myIcon.setAttribute( 'SrcBack' , SrcBack );
        
        SrcBack = myExpend.src ;
        myExpend.src = myExpend.getAttribute('SrcBack');
        myExpend.setAttribute( 'SrcBack' , SrcBack );

        //myTable.scrollIntoView( false );
    }

    SkyTreeViewControlDyanmicRootNodeID = null;

}//function SkyTreeViewControlDynamicLoadChildNodes()

//-------- 本段JavaScript 定义结束--------------------------

</script>

当用户展开一个节点而导致动态加载子节点时，其他的JavaSciprt代码会设置节点的XMLSource属性值到这个名为“SkyTreeViewControlTempXML”的XML数据岛的src属性上。这会导致IE浏览器立即开始异步的加载XML文档，并根据其文档加载状态而多次触发“onreadystatechange”事件，从而调用JavaScript函数“SkyTreeViewControlDynamicLoadChildNodes”，在这个JavaScript函数中，首先获得XML数据岛对象，然后判断其状态，若状态值不等于“complete”时，则文档还没有完成加载，从而退出等待下一次调用。

若XML数据岛完成加载后，获得父节点的文本元素，然后获得嵌入在HTML文档中另外一个名为“SkyTreeViewControlXSLT”的XML数据岛，这个XML数据岛包含了XSLT文档。然后使用刚刚加载的XML文档，调用它的“transfromNode”函数执行XSLT转换，则转换结果就是显示子节点的HTML字符串。然后使用HTML元素的“insertAdjacentHTML”函数将生成的HTML字符串输出到HTML页面上。

成功的动态加载子节点后，JavaScript脚本还更新父节点的图标，使其表示为展开状态。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

第二段HTML代码块

WEB控件输出完第一段HTML代码后，会根据需要输出第二段代码，第二段代码包含在客户端执行XSLT转换所需的XSLT模板代码以及初始化生成树状列表的HTML代码的JavaScript代码，其C#代码为

在这里程序会判断控件的GenerateAtServer和DynamicLoadChildNodes 的属性值，若WEB控件不是在服务器端生成HTML代码或者允许在客户端动态加载子列表就会输出第二段HTML代码。

在输出第二段HTML代码时，首先会输出一个名为“SkyTreeViewControlXSLT”的XML数据岛元素，该数据岛内容来自函数“ReadXSLTString”，该函数就是简单的从一个名为“SkyTreeViewControl.xslt”的嵌入式程序集资源中读取所有的文本内容。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

此处还输出一个为“RefreshSkyTreeViewControl”的JavaScript函数，用于初始化一个树状列表，其参数就是树状列表的编号。也就是“myTreeView”，“myTreeView2”之类的控件客户端编号。在JavaScript函数中，首先获得第三个XML数据岛，获得树状节点定义信息XML文档，然后和“SkyTreeViewControlXSLT”数据岛中的XSLT文档执行XSLT转换，生成HTML字符串，然后调用HTML元素的“innerHTML”属性向HTML文档填充刚刚生成的HTML代码，从而展现出一个树状结构。

本过程配套使用的“ReadXSLTString”函数的代码为

本函数中，程序会遍历程序集中所有的嵌入式的资源名称，若该名称以“.SkyTreeViewControl.xslt”结尾则以UTF8的编码格式读取该资源的文本内容。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

第三段HTML代码块

WEB控件还会输出一个名为“SkyTreeViewControlExpendNodebyID”的JavaScript函数，该函数用于展开或收缩节点，而与之配套的定义了一个名为SkyTreeViewControlCurrentTreeNode的全局变量，用于保存当前高亮度显示的节点的编号。这段JavaScript代码为

// 定义树状列表的当前节点对象
var SkyTreeViewContrlCurrentTreeNode ;

//
//---------------- 展开指定编号的树状列表的节点---------------
// 参数strID 指明节点的ID号
// 参数bolSelect 指明是否高亮度显示这个树状列表节点
//
function SkyTreeViewContrlExpendNodeByID(strID , bolSelect )
{
    // 获得节点的展开点图片对象
    var myExpend    = document.getElementById(strID + '_expend');
    // 获得节点的图标图片对象
    var myIcon        = document.getElementById(strID + '_icon');     
    // 获得节点的文本对象
    var myText        = document.getElementById(strID + '_text');     
    // 获得子节点表格
    var myTable        = document.getElementById(strID + '_table'); 
    if( myText == null )
        return ;
    if( bolSelect )
    {
        // 设置树状列表节点高亮度显示
        if( SkyTreeViewContrlCurrentTreeNode != myText
            && SkyTreeViewContrlCurrentTreeNode != null)
        {
            SkyTreeViewContrlCurrentTreeNode.className = 'SkyTreeViewControl_TreeNode';
        }

        SkyTreeViewContrlCurrentTreeNode = myText;
        SkyTreeViewContrlCurrentTreeNode.className = 'SkyTreeViewControl_SelectedNode';
    }

    
    // 展开或收缩子节点
    if( myExpend != null 
        && myIcon != null
        && myTable != null )
    {
        // 切换节点前面的展开或收缩样式的图标
        var SrcBack = myIcon.src ;
        myIcon.src = myIcon.getAttribute('SrcBack');
        myIcon.setAttribute( 'SrcBack' , SrcBack );

        // 切换节点前面的+ 或者- 样式的图标
        SrcBack = myExpend.src ;
        myExpend.src = myExpend.getAttribute('SrcBack');
        myExpend.setAttribute( 'SrcBack' , SrcBack );
        
        // 显示或隐藏包含子节点的表格对象
        if( myTable.style.display != 'none' )
        {
            myTable.style.display='none';
        }
        else
        {
            myTable.style.display='';
        }
    }

    var dyload = false;
    if( myTable == null )
    {
        // 若不存在包含子节点的表格对象则尝试动态加载子节点
        // 此时节点的XMLSource扩展属性就保存着定义子节点的XML文档URL地址。
        var XMLSource = myText.getAttribute('XMLSource');
        if( XMLSource != null && XMLSource.length > 0 )
        {
            // 若设置了该XML文档地址则删除XMLSource 扩展属性并
            myText.removeAttribute('XMLSource');
            var xml = document.getElementById( 'SkyTreeViewControlTempXML');
            if( xml != null )
            {
                // 设置“正在加载”字样为显示状态
                SkyTreeViewControlDyanmicRootNodeID = strID ;
                var lbl = document.getElementById( SkyTreeViewControlDyanmicRootNodeID +'_Loading');
                if( lbl != null )
                {
                    lbl.style.display = '';
                }
                // 调用编号为SkyTreeViewControlTempXML 的XML数据岛来异步加载XML文档
                xml.src = XMLSource ;
                dyload = true ;
            }
        }
    }
    if( dyload == false )
    {
        //myText.scrollIntoView( false );
    }

}//function SkyTreeViewContrlExpendNodeByID(strID)

这个JavaScript函数有两个参数，第一个参数是节点编号，第二个参数是是否设置该节点为当前节点，也就是是否设置高亮度显示（一般的就是蓝底白字）。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

在这个JavaScript函数里面，首先根据节点编号获得节点的图标，文本和包含子节点列表的表格对象。并根据需要设置当前高亮度显示的节点对象。

若子节点列表存在则需要展开和收缩子节点列表，此时将节点图标的src属性和它们的扩展属性SrcBack值进行互换，从而切换了图标，还对包含子节点列表的表格对象在可见状态和不可见状态间进行切换。

若子节点列表不存在而且节点的XMLSource属性有效则开始动态加载子节点。首先获得名为“SkyTreeViewControlTempXML”的XML数据岛对象，本控件输出的第一段HTML代码中已经包含了该XML数据岛。设置JavaScript全局变量“SkyTreeViewControlDyanmicRootNodeID”的值为当前节点的编号，然后设置这个XML数据岛的src属性值为节点的XMLSource属性值。之后IE浏览器就异步的加载XML文档，转而执行第一段HTML代码块中的JavaScript脚本了。

上面的代码都是使用RegisterStartupScript函数输出了三段HTML代码块。接下来就是输出控件的HTML代码内容了。

输出控件HTML代码

C#代码首先在内存中创建一个XML文档书写器，创建一个System.Xml.Serialization.XmlSerializer类型的对象，使用XML序列化技术将控件Nodes属性中的树状节点保存到一个XML文档中，实现这个功能的代码为

若控件的“GenerateAtServer”属性值为true，也就是在服务器端生成HTML代码，实现该功能的代码为

这段代码中，首先调用函数ReadXSLTString从资源文件“SkyTreeViewControl.xslt”加载一个XML文档，然后创建一个NodeXmlDocument变量，调用它的LoadXml函数对根节点进行XML序列化所得的XML字符串来生成XML文档，然后创建一个System.Xml.Xsl.XslCompiledTransform类型的XSLT转换引擎，调用它的Load方法加载XSLT模板，调用它的Transform方法来执行XSLT转换，转换结果输出到myStrWriter的字符串书写器中，这个字符串书写器中的内容就是用于显示树状结构的HTML代码。然后程序使用RenderContent函数的writer参数将这个HTML代码输出到页面中。

若不是在服务器端生成HTML代码，那就是在客户端生成代码了，于是程序输出一个XML数据岛的HTML代码，该数据岛的内容就是节点XML文档的内容。实现这个功能的C#代码为

// 若在客户端动态生成HTML代码则将数据XML字符串输出到ASPX页面中
writer.Write("<span id='" + this.ClientID + "_container' >正在加载，请稍候</span>");
// 将数据XML字符串输出到ASPX页面中的一个XML数据岛中
writer.Write("<xml id='" + this.ClientID + "_xml'>" + xml + "</xml>");
// 输出将要初始化树状列表的JavaScript函数
this.Page.ClientScript.RegisterStartupScript(
    this.GetType() ,
    "SkyTreeViewControL_Init_" + this.ClientID , @"
<script language=javascript>
RefreshSkyTreeViewControl( '" + this.ClientID + @"' );
</script>
");

这里调用了RegisterStartupScript函数，使得HTML页面加载时立即调用名为 RefreshSkeyTreeViewControl 的JavaScript函数来初始化这个树状列表，本控件输出的第二段HTML代码就包含了该JavaScript函数。

操作数据视图

本WEB控件还在数据视图中保存数据，其功能代码为

当ASP.NET框架要求WEB控件保存数据到视图中，系统会自动调用控件的SaveViewState函数，当ASP.NET框架要求WEB控件从数据视图中加载数据时，系统会自动调用WEB控件的LoasViewState函数。能保存在数据视图中的对象必须能进行二进制序列化。这就是在SkyTreeNode和SkyTreeNodeList类型前面都附加声明类型能进行二进制序列化的“[System.Serializable()]”的原因。

分析SkyTreeViewControl的源代码，读者可以看到这个WEB控件还是比较复杂的，它需要了解ASP.NET自定义控件的一些知识，此外还需要掌握JavaScript和IE浏览器XML数据岛的知识。

XML数据岛是IE浏览器特有的功能，【袁永福原创(http://www.xdesigner.cn/),请尊重知识】是微软对HTML标准的扩展，其他浏览器是不支持XML数据岛的，实际上我们可以使用XMLHttpRequest 的ActiveX组件来从服务器上下载XML文档，而FireFox是支持XMLHttpRequest的，这样可以做到对FireFox的兼容。在这里我特地演示使用了XML数据岛的功能，而且使用XML数据岛的功能能将XML文档嵌入到HTML文档中，减少WEB系统的文件数，从而降低系统复杂度，而且方便部署。若规定客户端浏览器限制为IE浏览器时，则可以采用XML数据岛的功能。

SkyTreeViewControl.xslt

这个WEB控件中有一个很重要的文档就是XSLT模板文档。它保存在文件SkyTreeViewControl.xslt中，并作为嵌入的资源参与程序的编译。这个XSLT模板文档的主体结构为

这里使用了xsl:output指令

表明此XSLT转换生成是HTML代码，而且不进行缩进处理。

该XSLT模板文档定义了两个XSLT模板，一个是默认模板，还有一个名为“TreeNode”的子模板。默认模板内容为

主模板是XSLT转换的入口处，在主模板中，首先创建了一个名为NodeID的XSLT参数，若定义了树状列表的根节点则创建table元素，然后循环遍历所有的根节点，并对每一个列表节点元素调用TreeNode模板，并传递了一个名为Level的值为1的参数，表示生成的节点层次数。这样就开始了递归创建HTML元素的过程。

TreeNode 模板

TreeNode模板是XSLT模板文档的主要部分，其代码为

<!-- *******************  输出一个树状列表节点 *************************** -->
<xsl:template name="TreeNode">
  <!-- 定义一个 Level 参数，表示节点层次，默认 0 -->
  <xsl:param name="Level">0</xsl:param>
  <!-- 定义一个NodeID变量，表示当前节点的编号 -->
  <xsl:variable name="NodeID">
     <xsl:choose>
        <xsl:when test="string-length(ID) > 0">
           <xsl:value-of select="ID" />
        </xsl:when>
        <xsl:otherwise>
           <xsl:value-of select="generate-id( . ) " />
        </xsl:otherwise>
     </xsl:choose>
  </xsl:variable>
  <!-- 定义一个showChildNodes变量，表示当前节点是否默认显示子节点 -->
  <xsl:variable name="ShowChildNode">
     <xsl:if test="$Level &lt; 1 ">1</xsl:if>
  </xsl:variable>
  <!-- 获得所有子节点的个数 -->
  <xsl:variable name="ChildCount">
     <xsl:value-of select="count(Nodes/Node) " />
  </xsl:variable>
  <!-- 判断是否存在子节点 -->
  <xsl:variable name="HasChild">
     <xsl:if test="$ChildCount > 0 or string-length( XMLSource ) > 0 ">1</xsl:if>
  </xsl:variable>
  <tr>
     <td valign="top" align="left" width="16" height="16">
        <!-- 显示前面的树状结构线 -->
        <xsl:choose>
           <xsl:when test=" $HasChild = '1' ">
              <xsl:if test="position()!=last()">
                 <xsl:attribute name="background">SkyTreeViewControl_line.gif</xsl:attribute>
              </xsl:if>
              <img>
                 <xsl:attribute name="id">
                    <xsl:value-of select="concat($NodeID,'_expend')" />
                 </xsl:attribute>
                 <xsl:choose>
                    <xsl:when test="$ShowChildNode != '1' and position() != last()">
                       <xsl:attribute name="src">SkyTreeViewControl_collapse.gif</xsl:attribute>
                       <xsl:attribute name="SrcBack">SkyTreeViewControl_expend.gif</xsl:attribute>
                    </xsl:when>
                    <xsl:when test="$ShowChildNode = '1' and position() != last()">
                       <xsl:attribute name="src">SkyTreeViewControl_expend.gif</xsl:attribute>
                       <xsl:attribute name="SrcBack">SkyTreeViewControl_collapse.gif</xsl:attribute>
                    </xsl:when>
                    <xsl:when test="$ShowChildNode != '1' and position() = last()">
                       <xsl:attribute name="src">SkyTreeViewControl_lastcollapse.gif</xsl:attribute>
                       <xsl:attribute name="SrcBack">SkyTreeViewControl_lastexpend.gif</xsl:attribute>
                    </xsl:when>
                    <xsl:when test="$ShowChildNode = '1' and position() = last()">
                       <xsl:attribute name="src">SkyTreeViewControl_lastexpend.gif</xsl:attribute>
                       <xsl:attribute name="SrcBack">SkyTreeViewControl_lastcollapse.gif</xsl:attribute>
                    </xsl:when>
                 </xsl:choose>
                 <xsl:attribute name="onclick">
                    <xsl:text>SkyTreeViewContrlExpendNodeByID('</xsl:text>
                    <xsl:value-of select="$NodeID" />
                    <xsl:text>' , false );</xsl:text>
                 </xsl:attribute>
              </img>
           </xsl:when>
           <xsl:otherwise>
              <xsl:if test="position()!=last()">
                 <img src="SkyTreeViewControl_child.gif" />
              </xsl:if>
              <xsl:if test="position()=last()">
                 <img src="SkyTreeViewControl_lastchild.gif" />
              </xsl:if>
           </xsl:otherwise>
        </xsl:choose>
     </td>
     <td valign="top" nowrap="1">
        <!-- 用于生成节点图标HTML代码  -->
        <img align="absmiddle" width="16" height="16">
           <xsl:attribute name="onclick">
              <xsl:text>SkyTreeViewContrlExpendNodeByID('</xsl:text>
              <xsl:value-of select="$NodeID" />
              <xsl:text>' , true );</xsl:text>
           </xsl:attribute>
           <xsl:attribute name="id">
              <xsl:value-of select="concat($NodeID,'_icon')" />
           </xsl:attribute>
           <xsl:choose>
              <xsl:when test="string-length( Icon ) != 0">
                 <xsl:attribute name="SrcBack">
                    <xsl:value-of select="Icon" />
                 </xsl:attribute>
                 <xsl:attribute name="src">
                    <xsl:value-of select="Icon" />
                 </xsl:attribute>
              </xsl:when>
              <xsl:when test="$HasChild = '1' and $ShowChildNode = '1'">
                 <xsl:attribute name="SrcBack">SkyTreeViewControl_close.bmp</xsl:attribute>
                 <xsl:attribute name="src">SkyTreeViewControl_open.bmp</xsl:attribute>
              </xsl:when>
              <xsl:when test="$HasChild = '1' and $ShowChildNode != '1'">
                 <xsl:attribute name="SrcBack">SkyTreeViewControl_open.bmp</xsl:attribute>
                 <xsl:attribute name="src">SkyTreeViewControl_close.bmp</xsl:attribute>
              </xsl:when>
              <xsl:otherwise>
                 <xsl:attribute name="src">SkyTreeViewControl_default.bmp</xsl:attribute>
              </xsl:otherwise>
           </xsl:choose>
        </img>
        <!--  生成节点的文本 -->
        <a class="SkyTreeViewControl_TreeNode" valign="top">
           <xsl:attribute name="id">
              <xsl:value-of select="concat( $NodeID, '_text')" />
           </xsl:attribute>
           <xsl:attribute name="onclick">
              <xsl:text>SkyTreeViewContrlExpendNodeByID('</xsl:text>
              <xsl:value-of select="$NodeID" />
              <xsl:text>' , true );</xsl:text>
              <xsl:if test="OnClick !=''">
                 <xsl:value-of select="OnClick" />
              </xsl:if>
           </xsl:attribute>
           <xsl:if test="Link != ''">
              <xsl:attribute name="href">
                 <xsl:value-of select="Link" />
              </xsl:attribute>
           </xsl:if>
           <xsl:if test="string-length(XMLSource) > 0 ">
              <xsl:attribute name="XMLSource">
                 <xsl:value-of disable-output-escaping="yes" select="XMLSource" />
              </xsl:attribute>
           </xsl:if>
           <xsl:value-of select="concat( ' ' ,Text)" />
        </a>
        <xsl:if test="$ChildCount > 0 ">
           <!-- 若有子节点则显示子节点 -->
           <table border="0" cellspacing="0" cellpadding="0">
              <xsl:attribute name="id">
                 <xsl:value-of select="concat( $NodeID , '_table' ) " />
              </xsl:attribute>
              <xsl:if test="$ShowChildNode != '1'">
                 <xsl:attribute name="style">display:none</xsl:attribute>
              </xsl:if>
              <xsl:for-each select="Nodes/Node">
                 <!-- 递归调用TreeNode模板本身来生成下一级的节点的HTML代码 -->
                 <xsl:call-template name="TreeNode">
                    <xsl:with-param name="Level"> <!-- 传递节点层次参数 -->
                       <xsl:value-of select="$Level + 1" />
                    </xsl:with-param>
                 </xsl:call-template>
              </xsl:for-each>
           </table>
        </xsl:if>
        <xsl:if test="string-length(XMLSource) > 0 ">
           <!-- 若节点的XMLSource存在则预先生成好“正在加载”字样，但隐藏起来 -->
           <span style='display:none' class='SkyTreeViewControl_TreeNode'>
              <xsl:attribute name="id">
                 <xsl:value-of select="concat( $NodeID , '_Loading' ) " />
              </xsl:attribute>
              <br />
              <xsl:text>正在加载</xsl:text>
           </span>
        </xsl:if>
     </td>
  </tr>
</xsl:template>

在这个模板中首先接受了一个名为Level的参数，该参数表示生成的树状列表的层次序号。

此处定义了一个名为“NodeID”的XSLT变量，将作为树状列表节点在HTML文档中的编号。

这里使用了XSLT函数generate-id，该函数属于创建一个惟一的编号。对相同的XML节点调用generate-id函数会得到相同的结果，对不同的XML节点调用该函数一定会得到不同的编号。注意，这里的编号在同一个XML文档中是惟一的，但对多个XML文档则不一定了。若对两个XML文档中的XML节点调用该函数是有可能得到相同的编号。因此当同一个页面上有多个WEB控件，或者WEB控件支持动态加载子节点时，【袁永福原创(http://www.xdesigner.cn/),请尊重知识】整个页面会对多个XML文档执行XSLT转换，从而导致多个节点对象可能使用一样的节点编号的情况。若多个节点的编号一样会导致树状列表工作异常。这就是为什么在本演示程序中的“TreeViewNode.aspx”中使用“System.Guid.NewGuid”来手动的设置节点编号的原因。因为“NewGuid”函数会创建一个全球惟一编号，多次调用“NewGuid”函数而创建相同的编号的可能性基本上不存在，这从而保证了同一个页面中所有树状列表的节点编号的惟一性。

此处定义了名为“ShowChildNode”的XSLT变量。这里判断了Level参数值是否小于1，若小于1则参数值为1，表示初始化时该节点的子节点就显示出来。在这里可以控制树状列表初始化时显示多少层节点。

此处定义了“ChildCount”变量，用于存放子节点的个数，以后需要获得子节点个数时就用这个变量，避免重复计算。

此处定义了“HasChild”变量，用于判断是否有子节点，以后需要判断是否有子节点时就不需要重新计算了。

准备工作完毕后开始输出HTML代码了。首先输出一个表格行，然后输出第一个单元格。

若节点存在子节点，若节点不是父节点的最后一个子节点时设置单元格的背景图片，从而模拟显示树状列表的层次结构线。此外由于节点存在子节点，因此可以展开和收缩，因此还输出展开和收缩控制点，并对控制点图片添加“onclick”属性，该属性中调用了控件输出的第三段HTML代码中定义的名为“SkyTreeViewContrlExpendNodeByID”的JavaScript函数。

若节点不存在子节点则输出图片来模拟树状结构叶子节点连接线。

接下来就是输出第二个单元格了。首先输出节点前面的图标，若树状节点定义了Icon数据，则设置图标的SrcBack和src属性值为Icon数据。若没有指定Icon数据，则使用默认值。并设置显示图标的图片的“onclick”属性，这个“onclick”属性将会调用JavaScript函数“SkyTreeViewContrlExpendNodeByID”。

然后输出节点文本，输出超链接和OnClick属性值，若节点还有XMLSource值，这设置该值到HTML元素的XMLSource属性中。

系统判断XSLT变量“ChildCount”的值，若该节点存在子节点，则创建一个table元素，然后遍历所有的子节点，递归调用TreeNode模板，并传递Level参数，并使得Level参数值每次递归调用都增加１。

若节点的XMLSource值有效，还输出一个隐藏的提示“正在加载”的文本标签。

经过上述过程，一种高性能的可动态加载子列表的ASP.NET树状列表控件开发完毕，接着笔者将这个WEB控件投入使用。

Default.aspx

演示程序中有一个Default.aspx页面，为默认页面，这个页面就演示使用树状列表WEB控件，读者可以使用IE浏览器运行这个页面，可以看到两个树状列表，都是使用了3层节点来显示数据库中的客户订单信息。

左边的列表内容是一下子加载了数据库中的所有的数据，页面加载后该树状列表已经包含了3072个节点。用户鼠标操作可以展开和收缩节点，可以点击货物节点来弹出一个消息框。

而右边的列表内容是动态加载的，页面加载后该列表只加载了客户信息，并没有加载定单信息和货物信息。当用户鼠标展开节点时，页面会根据需要自动的从后台加载相关的信息并动态的生成子节点。动态加载子节点能加快树状列表的初始化加载速度。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

使用VS.NET 2005打开演示程序，重新编译一下，然后打开演示页面Default.aspx 的设计界面。其设计界面如下图

可以看到页面上已经放置了两个树状列表控件。控件名为myTreeView和myTreeView2，鼠标点击某个树状列表控件，可以在旁边的属性窗口中列出了该控件的一些属性，其界面如下图所示，

树状列表控件比较重要的属性有

AutoScroll 是否自动显示滚动条。

DynamicLoadChild表示是否使用动态加载子节点。

GenerateAtServer 是否在服务器端生成HTML代码。

IndentXML 生成的XML是否进行缩进。

SelectedNodeStyleString 选中的节点的CSS样式字符串。

TreeNodeStyleString 节点的CSS样式字符串。

查看该页面的HTML代码，可以看到这里使用了标签“SkyWebControl:SkyTreeViewControl”来定义一个树状列表控件。一些控件的属性值保存在HTML标签的属性中。

一般的。NET框架中的WEB控件在HTML代码中的前缀是“asp”，比如“asp:label”，“asp:button”，“asp:TextBox”等。开发人员在开发自己的WEB控件也可以使用自己的HTMJL标签前缀，在树状列表控件的C#源代码中开头有一条指令

这条指令就指明自定义控件采用什么样的标签前缀。

查看这个页面的C#代码，可以看到代码还是不复杂的。主要包含了一个Page_Load函数，该函数的代码为

在这个函数中，首先连接程序目录下的演示数据库 SkyDemo.mdb，然后执行一个比较复杂的SQL查询，获得数据库中所有的客户名称，订单信息和订单货物信息，然后填充到myTreeView的Nodes属性中，从而在内存中构造了一个三层的树状结构。

这里面可以看到树状列表没有自动的数据源绑定功能。由于树状结构处理过程复杂，简单的数据源绑定难于实现，因此这个树状列表控件不提供数据源绑定功能，而是需要使用者编程向列表添加节点。

填充第一个树状列表后，程序然后再次查询数据库，获得所有的客户名称和编号，然后填充到myTreeView2 的Nodes中，并设置每个节点的XMLSource属性。而XMLSource属性就规定了客户端动态加载子节点使用的XML文档的URL地址。这里使用了另外一个页面“TreeViewNodeXml.aspx”作为XML文档的提供者，并向该页面传递参数来决定生成什么样的节点定义XML文档。而且该页面生成的XML文档格式符合刚才设计的节点XML文档格式。【袁永福原创(http://www.xdesigner.cn/),请尊重知识】

在这个页面中，没有任何生成HTML代码的代码，所做的只是向页面拖拽放置树状列表，然后查询数据库填充控件的节点结构，可以说使用比较方便，这个树状列表控件内部自动完成了所有的底层工作。

TreeViewNodeXml.aspx

本页面是一个后台服务页面，用于向第二个树状列表动态的提供子节点信息。该页面也不复杂，它没有HTML代码，其ASPX文件只有一行代码，其代码如下

查看该页面的C#代码，只有一个Page_Load函数，其代码为