如何构建自定义的 ASP.NET 控件,用以呈现使用 ASP.NET AJAX 客户端库的客户端 JavaScript 代码?

实际上,UpdatePanel、UpdateProgress、Timer 正是这么做的。 要实现这一设计很简单,只要添加向页面的 ScriptManager 注册自定义 JavaScript 的代码,然后呈现创建控件需要的基本 HTML 和 JavaScript 即可

这样的方式可行,但通常冗长乏味且具有不必要的限制性。问题在于 ASP.NET AJAX 并不是仅仅只允许设计新的控件类型,它还允许设计可应用到无数控件上的效果。这些多目的的效果(如自动完成、拖放、动画、尺寸调整、展开和收叠、编辑等)代表了使用 ASP.NET AJAX 的最常见方式。

因此, ASP.NET AJAX 鼓励使用另一种模型:控件扩展器。使用它为现有的控件增加 ASP.NET AJAX 特性,可以在不修改当前页面使用的控件集合的情况下为它增加 ASP.NET AJAX 效果

ASP.NET 没有提供任何控件扩展器。不过,ASP.NET AJAX 控件工具包提供了。该工具包是大量控件和控件扩展器的集合,它们使用 ASP.NET AJAX 特性,但可以像普通的服务器控件那样被拖放到 Web 页面上

ASP.NET AJAX 工具包最值得关注的一点是它以协作、开源模式开发,允许社区参与。ASP.NET AJAX 控件工具包完全免费并提供全部源代码,无论对那些希望为页面增加 Ajax 效果的开发人员还是希望构建自己的控件扩展器的开发人员而言,它都是很好的工具。

安装 ASP.NET AJAX 控件工具包

要获取 ASP.NET AJAX 控件工具包,可以访问下面地址:

http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

几个下载选项的区别在于 .NET 版本号以及是否要包含源代码。我这里下载的是针对 .NET 4 设计且不含源代码的工具包。

解压文件后,可以找到一个主要的程序集 AjaxControlToolkit.dll 以及一系列支持不同文化及本地化的较小的卫星程序集。另外,还可以看到一个 AjaxControlToolkitSampleSite.zip 文件,它包含大量示例网站(演示 ASP.NET Ajax Control Toolkit 所有的元素),以及包含了安装说明的 ReadMe.html 文件。

如果要使用 ASP.NET AJAX 控件工具包开发,可直接将主程序集以及文化特定的子文件夹复制到 Web 应用程序的 Bin 目录。

但把这些新组件加入到 VS 的工具箱则更好,下面是具体步骤:

  1. 确保控件工具包文件夹位于硬盘的某个永久位置。
  2. 在工具箱上为控件新建一个页签。(右击工具箱 -> 添加新页签 -> 输入如 "AJAX Toolkit”)
  3. 右击新页签某个空白区域,选择 “选择项目”
  4. 在选择工具箱对话框中,单击“浏览”找到控件工具包程序集

现在可以在任意网站的任意页面里使用 ASP.NET AJAX 控件工具包里的组件了。第一次拖动组件时,VS 会把 AjaxControlToolkit.dll 程序集和本地化程序集一起复制到 Web 应用程序的 Bin 目录。

AutoCompleteExtender

ASP.NET AJAX 控件工具包有很多有用的控件。这里简单的介绍其中的 AutoCompleteExtender 。

ASP.NET 团队在 ASP.NET AJAX 变量开发中一直努力避免开发和现有控件重复的功能。例如,创建一个 AutoCompleteTextBox 服务器控件似乎很具有吸引力,但这样的实现可能会带来几个问题:

  • 必须把现有的 TextBox 控件替换为 AutoCompleteTextBox 控件才能使用这一功能,这是对现有页面的重大变化,且可能带来破坏
  • 如果已经扩展了 TextBox 控件或者使用了扩展了它的第三方控件,那么将不得不放弃这些功能
  • 如果有另一个基于 TextBox 的派生类,比如忽略了非数值按键的 NumericOnlyTextBox 实现的 ASP.NET AJAX 特性,你将不能同时使用这两个特性

更好的解决方案是能够把动态特性添加到网站而不需要替换已在使用的控件。ASP.NET AJAX 利用另一个新的概念使之成为可能:控件扩展器。

创建这个示例非常简单,一个自动完成的文本框提示功能,效果如下图:

image

首先,将 ScriptManager 添加到页面 。然后,添加一个普通的文本框:

Contact Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

其次,添加一个 AutoCompleteExtender 控件 。它扩展文本框使之具有自动完成的功能。技巧是 建议列表从一个 Web 方法获取,而你需要创建这个方法 。假设已经创建了一个叫做 AutoCompleteService 的Web 服务,其中有一个 GetNames()方法,它提供建议列表:

[WebService]
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService
    [WebMethod]
    public List<string> GetNames(string prefixText, int count)
    { ... }

下面是调用这个服务需要的标签:

<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtName"
    ServicePath="~/AutoCompleteService.asmx" ServiceMethod="GetNames" MinimumPrefixLength="1">
</asp:AutoCompleteExtender>

假定在 Web 表单顶部注册了命名空间(拖动组件至页面会自动注册):

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

AutoCompleteExtender 使用 TargetControlID 属性关联相应的服务器控件。使用 ServicePath ServiceMethod 属性指定服务和具体方法,使用 MinimumPrefixLength 属性限定等待用户输入特定数目的字母,然后才提供建议列表。如果列表很长,以至单个字符不能提供有效建议时,这个属性很有用。

代码获取可能建议的完整列表,并缓存1小时以保证速度。下面是 Web 方法的完整代码:

[WebMethod]
public List<string> GetNames(string prefixText, int count)
    if (Context.Cache["NameList"] == null)
        Context.Cache.Insert("NameList", QueryNames(), null,
            DateTime.Now.AddMinutes(60), TimeSpan.Zero);
    SqlCommand cmd = new SqlCommand("select ContactName from Customers order by ContactName", conn);
    List<string> names = new List<string>();
        conn.Open();
        SqlDataReader reader = cmd.ExecuteReader();
        while (reader.Read())
            names.Add(reader["ContactName"].ToString());
        reader.Close();
    catch (Exception ex)
        throw new ApplicationException("Data execute error:" + ex.Message);
    finally
        conn.Close();
    return names;

ASP.NET AJAX 最精彩的特性是它并不只是一个 JavaScript 库或者一个简化回调的 .NET 组件,而是一个多层的平台,让你能够创建更具有响应性且更动态的页面。

可以在 3 个不同层次使用 ASP.NET AJAX 框架:

  • 可以编写自己的 JavaScript 代码来调用服务器端功能。这种情况下,公开需要的 Web 方法并通过自动生成的 JSON 代理调用它们。
  • 可以继续使用普通的 ASP.NET 服务器控件,但利用 ASP.NET AJAX 组件(如 UpdatePanel)或使用时髦的新控件和控件扩展器(包括在 ASP.NET AJAX 控件工具包)扩展它们。这种方法的作用非常大,且不需要太多的工作,也不会给项目带来很大复杂性。
  • 可以创建自己的客户端组件、控件和行为,可以单独或结合自定义的 ASP.NET 服务器控件使用它们。 这是目前最复杂的方式了 想要真正掌握它,必须非常清楚的了解客户端 ASP.NET AJAX 模型,这几乎是一个独立的平台。也就是说,需要深入挖掘 ASP.NET AJAX 的文档,或者钻研这方面的书籍
  •