ASP.NET AJAX（控件扩展器、工具包详述）

       如何构建自定义的 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 利用另一个新的概念使之成为可能：控件扩展器。

 

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

 

       首先，将 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);

    }

    List<string> names = Context.Cache["NameList"] as List<string>;

    int index = -1;

    for (int i = 0; i < names.Count; i++)

    {

        if (names[i].StartsWith(prefixText))

        {

            index = i;

            break;

        }

        // Give up if the search has passed to the next letter.

        // (This improves performance.)

        if (String.Compare(names[0], prefixText) == 1) // 序列中第一个字符串就已经大于用户输入

        {

            break;

        }

    }

    if (index == -1) // Give up if there isn't a match.

    {

        return new List<string>();

    }

    List<string> wordList = new List<string>();

    for (int i = index; i < (index + count); i++)

    {

        if (i > names.Count)

        {

            break;

        }

        if (!names[i].StartsWith(prefixText))

        {

            break;

        }

        wordList.Add(names[i]);

    }

    return wordList;

}

// Return a sorted NameList

public List<string> QueryNames()

{

    SqlConnection conn = new SqlConnection(

        WebConfigurationManager.ConnectionStrings["Northwind"].ConnectionString);

    SqlCommand cmd = new SqlCommand("select ContactName from Customers order by ContactName", conn);

    List<string> names = new List<string>();

    try

    {

        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 控件工具包

       AutoCompleteExtender 只是 ASP.NET AJAX 控件工具包中众多控件中的一个。下面两张表详细列出了 ASP.NET AJAX 控件工具包中所有的控件扩展器和所有控件。

 

ASP.NET AJAX 控件工具包中的控件扩展器

AlwaysVisableControlExtender	能把控件固定在某一特定位置（如网页的左上角），即使用户滚动页面也是如此
AnimationExtender	强大而灵活的扩展器，可以单独或组合给大小调整、移动、淡出、颜色变化等添加动画
AutoCompleteExtender	根据用户的部分输入提供建议列表，列表内容完全由 Web 方法生成
CalendarExtender	显示一个弹出的日历，它可以被附加到文本框上，方便输入日期。用户选定某个日期后，该日期被插入到关联的控件中
CascadingDropDown	不必手工编码，就可以相应关联下拉列表
CollapsiblePanelExtender	展开或收叠页面上的面板。页面其余部分沿它们重新排列
ColorPickerExtender	显示一个弹出的颜色选择器，可以附加到文本框以方便选择颜色
ConfirmButtonExtender	截获 Button、LinkButton、ImageButton 控件的单击事件并显示一个确认消息。如果用户在确认框里选择取消操作，那么单击事件被取消
DragPanelExtender	使面板能够在页面上拖动
DropDownExtender	在鼠标移过的时候将几乎所有控件转变为下拉列表框内。比如，可以将它链接到一个 Label 控件。用户鼠标移动到它上面时，从列表中选择一个不同的条目（因此改变了标签中的文字），然后将鼠标移开（允许标签恢复到它本来的原始外观）
DropShadowExtender	为面板添加阴影效果。阴影可以是部分透明的。你可以控制其边界的大小弧度
DynamicPopulateExtender	用 Web 服务方法调用的结果替代某个控件的内容
FilteredTextBoxExtender	让你能够禁止输入某些字符到文本框。这意味着补充了验证，而不是代替它，因为恶意的用户可以篡改呈现的页面或禁用 JavaScript 对字符的过滤
HoverMenuExtender	这个扩展器能够在用户鼠标滑过控件时弹出内容
ListSearchExtender	让用户输入条目文本的前几个字母来搜索 ListBox 或 DropDownList 里面的内容。控件搜索条目并跳到匹配用户输入的第一个条目处
MaskedEditExtender	使用掩码限制用户能够输入文本框的内容。（掩码是一个定义固定长度文本模式的字符串，它提供提示字符帮助用户输入值。例如，电话号码掩码可能在文本框里显示(   )      -     。随着用户的输入，占位符被有效的数字字符取代，而非数字字符则被拒绝。）你可以结合 MaskedEditValidator 使用 MaskedEditExtender，确保用户不能篡改 js 代码并输入无效的值
ModalPopupExtender	让你能够创建模态对话框的效果，它可以把页面变暗、禁用控件并在最前面显示一个叠加面板
MultiHandleSliderExtender	能将一个TextBox 转化为一个滑动控件。这个滑动控件拥有超出标准 ASP.NET 服务器端等效控件的功能。最引人注目的是，它支持一个滑动轨道有多个锚点。这在使用滑动控件来标识一个值域时非常有用！
MutuallyExclusiveCheckBoxExtender	允许给多个 CheckBox 控件关联一个“键值”。当用户单击某个按这种方式扩展的复选框时，具有相同“键值”的复选框将自动取消或选中
NumericUpDownExtender	给文本框提供可配置的上下箭头按钮（在右边），这些按钮增大或减小文本框中的数值或日期
PagingBulletedListExtender	附加到一个 BulletedList 并让它能够支持客户端的分页功能，这样一个很长的列表可以分解为多个较小的区段
PasswordStrength	附加到文本框上，随着用户的输入，它评估文本框值的密钥强度，一般用作密码创建框的指导
PopupControlExtender	提供可显示在任意控件旁边的弹出内容
ResizableControlExtender	允许用户通过控件右下角可配置的手柄调整控件的大小
RoundedCornersExtender	围绕任意控件显示一个整洁、专业的外观
SliderExtender	把文本框转换为一个图形滑块，允许用户拖动轨道上的指针选择一个数值
SlideShowExtender	附加到一个 image 元素上，并让它显示一组图片。图片通过一个 Web 服务方法提供，幻灯片可以一直循环显示，也可以通过你创建的“播放”、“暂停”、“前进”、“后退”按钮控制
TextBoxWatermarkExtender	能够在 TextBox 控件为空时自动修改背景色并提供特定文字。例如，文本框可能包含写在淡蓝背景上的浅灰文字 EnterValue。光标进入文本框或在文本框中输入内容后，这些文字就会消失
ToggleButtonExtender	把普通的 ASP.NET 复选框变成图片复选框
UpdatePanelAnimationExtender	可以使用与 AnimationExtender 相同的动画。不过，它设计为配合 UpdatePanel 使用，并在更新进行时或面板被刷新时自动执行这些动画
ValidatorCalloutExtender	扩展 ASP.NET 验证控件的客户端逻辑，以便验证控件使用弹出验证提示指向含有非法输入的控件

 

ASP.NET AJAX 控件工具包中的控件

Accordion	这个控件堆叠多个内容面板，并允许用户每次只看到其中的一个。单击某个面板时，该面板展开，而其他面板收起（页头可见）。它的其他特性包括自动的淡入淡出效果以及对控件的大小进行限制（此时，如果控件的内容可见，较大的内容区域会出现滚动条）。
AsyncFileUpload	与 FileUpload Web 控件相似，但它异步执行工作，用户可以继续和页面交互（显然，页面回发或导航到新页面会中断异步文件的传输）。可以被配置为文件上传过程中显示其他控件。通常，第二个控件（通过 ThorbberID 属性）会显示一个简单的动画提示用户上传正在进行
ComboBox	这个控件受到了 Windows 组合列表框的启发，它提供一个下拉列表框并允许用户输入任意文本。
Editor	这个特别值得注意的强大控件提供了 HTML 编辑的能力，具有完整的命令工具栏。用户可以在 3 个模式间切换：Html（显示标记）、Design（和文字处理器相似，显示正确呈现的 HTML 预览）、Preview（和 Design 相似，但不能编辑）
NoBot	这个控件执行数项检查以识别是否某个自动程序（bot）正在访问页面。如果 NoBot 确认当前是自动程序正在访问页面，请求就会被拒绝。这项技术主要用于防止程序偷窃内容或者向博客提交垃圾内容，但可以被绕开。例如，NoBot 强制浏览器执行一段使用 HTML DOM 并提交结果的 JavaScript 计算，它的目的是捕获访问页面的非浏览器应用程序。NoBot 还拒绝那些表单回发特别迅速或在特定间隔时间内回传次数特别多的请求。这两种行为都暗示当前是一个程序而不是一个人在进行工作
Rating	允许用户在一组星号上滑动鼠标，当期望个数的星号被显示后设置等级
ReorderList	创建一个可滚动的模板列表，允许用户通过拖放对条目进行重新排序
Seadragon	让用户能够放大一个原本非常大的图片的特定部分。背后，这些图片由一系列更小的条幅组成，它们由 Web 服务器托管。需要通过免费的 Deep Zoom Composer（http://tinyurl.com/26wjeqt）工具来生成 Seadragon 图片。特别值得一提的是 Silverlight 内置了非常强大的缩放图片功能。
TabContainer	模拟 Windows 中的页签。每个页签有一个页头，用户通过单击页头在页签中切换

 

详细的教程示例可参考这里：http://www.asp.net/ajaxlibrary/act.ashx

 

总结

       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 的文档，或者钻研这方面的书籍。