探讨微软ASP.NET AJAX控件开发技术（客户端）

(五)Sys.UI.Action

一个行为（Action）的目的是用来扩展一个DOM元素而不改变它的核心功能。Ajax Control Toolkit中的大多数控件就属于行为，例如该AutoCompleteTextBox，MaskEdit，DragPanel等。一个行为必须拥有一个相关联的DOM元素。注意，单个DOM元素可以拥有多个与之相关联的行为。既然本文的重点在讨论控件的开发技术，所以，我们不再进一步讨论行为的概念。如果你对此感兴趣的话，请访问Ajax Control Toolkit站点。

(六)Sys.UI.Control

相对于上面的Action而言，一个Control（控件）本身就是一个DOM元素。创建一个控件的主要目的是通过对一个现有控件加以包装进而提供新的功能。其典型的示例就是UpdatePanel，UpdateProgress或Ajax Control Toolkit中新加入的Tab控件。下列的代码向你展示了创建一个控件所要求的最少代码。

列表1：构建一个客户端控件至少需要实现的JavaScript框架代码

Type.registerNamespace('DummyNamespace');
DummyNamespace.DummyControl = function(element)
{
DummyNamespace.DummyControl.initializeBase(this, [element]);
}
DummyNamespace.DummyControl.prototype =
{
initialize : function()
{
DummyNamespace.DummyControl.callBaseMethod(this, 'initialize');
},
dispose : function()
{
DummyNamespace.DummyControl.callBaseMethod(this, 'dispose');
}
}
DummyNamespace.DummyControl.registerClass('DummyNamespace.DummyControl', 
Sys.UI.Control);
if (typeof (Sys) != 'undefined')
{
Sys.Application.notifyScriptLoaded();
}

上面所列出的仅是一个控件的框架代码。如你所见，与之相关联的DOM元素作为参数传入该控件的构造器函数中。我们还要重载initialize和dispose方法以便执行初始化和最后释放控件时的清理工作。因为在此列出的仅是一个虚构的控件，所以，除了调用基类的一些方法外我们什么也没有做。下列图3展示了Sys.UI.Control类提供的主要功能。

图3：Sys.UI.Control类提供的方法

一个控件和一个行为之间的另一个区别在于，一个行为允许你设置一个id而一个控件却不允许。事实上，一个控件的id与其相关联的DOM元素是一致的。下面是这个类中常用方法（有些是父类提供）的详细解释。

◆get_element()：返回该控件描述的DOM元素。
◆get_id()：返回该控件的id，为$find语句所用以引用此控件。
◆set_id()：如果你试图设置id，那么，你将得到一个Error.invalidOperation异常，因为控件是不允许设置id的。
◆get_parent()：返回父级控件。
◆set_parent()：设置父控件。
◆get_visibilityMode()：visibilityMode是一个枚举，其取值是hide或collapse。
◆set_visibilityMode()：设置visibilityMode的值。
◆get_visibile()：返回相应DOM元素的可见性。
◆set_visibile()：设置DOM元素风格可见性，取值为hidden或visible。
◆addCssClass()：把指定的CSS类添加到DOM元素的className中。
◆dispose()：继承自Sys.Component。
◆initialize()：继承自Sys.Component。
◆onBubbleEvent()：处理由raiseBubbleEvent激发的事件。如果这个方法返回true，则该事件将不会被上传到其父元素中进行处理。注意，如果你不处理该事件的话，你应该把此事件交由父级来作默认处理。
◆raiseBubbleEvent()：引发一个事件并交由父控件处理。总的来看，当你创建复杂的控件（经常是包含一个或多个子控件并且想把一个事件从子控件上交由其父控件来处理时）时往往要使用onBubbleEvent与这个方法。
◆removeCssClass()：从DOM元素的className中删除指定的CSS类。
◆toggleCssClass()：把指定的CSS类添加到DOM元素的className中（如果以前没有设置的话）。注意，如果已经指定了这个CSS类，那么，将从className中移除该类。

三、实例分析

在本示例中，我们将创建一个增强的客户端ImageButton控件。这个控件在鼠标移过时将显示一幅不同的图像。

(一)创建示例AJAX网站

启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX-Enabled Web Site”模板，命名工程为“AjaxClientCtrlTest”，并选择C#作为内置支持语言，最后点击OK。

注意，此后系统将自动加入对于程序集System.Web.Extensions.dll的引用（因其被自动加入到GAC中，所以默认情况下无法直接看到）。当然，你还会注意到，作为ASP.NET AJAX控制中心的服务器控件ScriptManager被自动地添加到默认网页Default.aspx中。然后，把一个HTML <image>元素拖动到此页面中，并稍加修改，得到如下图4所示布局。

图4：示例网站屏幕快照