ASP.NET AJAX 1.0框架之增强服务器控件的客户端功能(1)

【51CTO.com 独家特稿】一、简介

微软ASP.NET 2.0 AJAX Extensions，作为ASP.NET 2.0 AJAX 1.0框架组成的最基本部分，为扩展ASP.NET 2.0服务器端控件提供了支持。借助于这个新框架，你可以使用JavaScript，DHTML以及Web浏览器提供的AJAX能力实现更为丰富的可视化效果。

本文中，我们将探讨如何创建一个使用ASP.NET 2.0 AJAX扩展特征的ASP.NET Web服务器控件以扩展浏览器端功能。然后，我们可以使用一个客户端控件实现把这种新功能添加到客户端文档对象模型（DOM）元素中。注意，这个客户端控件是通过实现服务器控件提供的IScriptControl接口来建立与一个服务器控件的关联。

具体来说，我们要讨论：

◆如何创建一个定制Web服务器控件，它能够封装客户端行为以及用户可以用于设置并控制该行为的属性；
◆如何创建一个与该Web服务器控件相关联的客户端控件；
◆如何在客户端控件中处理浏览器DOM事件。

【注意】除本文介绍的方法外，新框架中还提供了通过创建一个扩展（extender）控件—它能够把客户端能力封装到一个行为中，然后把它依附到一个Web服务器控件—来扩展Web服务器控件（添加丰富的客户端功能）的功能。因为一个扩展控件并不是它的关联控件中的一部分，所以，你可以创建单个的可以与若干类型的Web服务器控件相关联的扩展控件。本文中，我们不讨论这种技术。

二、客户端需求分析

把客户端行为添加到一个Web服务器控件的第一步是，决定该控件在浏览器中将提供什么行为。然后，我们还要确定为了实现该行为必须提供的客户端功能。

在本文中创建的示例Web服务器控件实现一种简单的客户端行为。当在浏览器中选择（拥有焦点）它时，该控件（一个TextBox控件）被高度显示。例如，当它拥有焦点时，该控件可能改变背景颜色，而当焦点移动到另一个控件时还原为缺省的颜色。

为了实现这一行为，本文中的客户端控件必须实现下列功能：

①提供一种实现高亮DOM元素的方法。
为了高亮一个ASP.NET Web页面中的DOM元素，本文中的客户端控件将应用一种层叠式样表（CSS）风格—我们通过一个类来提供。此外，这个风格是用户可配置的。

②实现一种方法以便把DOM元素恢复到正常状态。
也是通过应用一种层叠式样表（CSS）风格来从一个ASP.NET Web页面元素中删除其高亮状态，而且此风格也是用户可配置的。

③标识何时选择一个DOM元素。
为了标识何时选择一个DOM元素（拥有焦点），该控件需要处理对应DOM元素的onfocus事件。

④标识何时取消选择一个DOM元素。
为此，该控件需要处理DOM元素的onblur事件。

三、创建Web服务器控件

从基本操作思路及形式上看，一个使用ASP.NET 2.0 AJAX扩展技术包括客户端特征的Web服务器控件类似于任何其它Web服务器控件。然而，该控件还必须实现System.Web.UI命名空间中的IScriptControl接口。在本例中，我们将通过继承TextBox类并实现IScriptControl接口来扩展ASP.NET TextBox服务器控件。

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

然后，右击解决方案资源管理器添加一个新类，并命名为“EnhancedTextBox”（见下图1）。

图1：通过创建一个新类创建一个扩展的Web服务器控件

然后，打开文件EnhancedTextBox.cs，并作如下修改：

public class EnhancedTextBox  : TextBox， IScriptControl

至此，我们可以借助于VS2005提供的友好的“类关系图”编辑器来更为直观地为此类添加字段、属性和方法等。这只要在文件EnhancedTextBox.cs上右击弹出菜单中的“查看类关系图”来切换到类关系图编辑器。最后编辑完成的类关系图如下图2所示。

图2：类EnhancedTextBox的类关系图

【注意】通过试验，我发现无法通过类关系图在类上继承接口IScriptControl的有关成员。不知什么缘故。

下面让我们进行具体分析。

这个新控件提供了两个用于实现客户端要求的属性：

◆HighlightCssClass—在控件取得焦点时，用来高亮DOM元素的CSS类；
◆NoHighlightCssClass—在控件失去焦点时，应用于DOM元素的CSS类。