Ajax Control Toolkit使用实例 （1） AutoCompleteExtender

Ajax Control Toolkit简介

Ajax Control Toolkit是一个丰富的控件集，你可以使用它来创建响应度高、互操作性强的带有Ajax特性的Web应用程序。Ajax Control Toolkit包含了40多种控件，包括AutoComplete、CollapsiblePanel、ColorPicker、MaskedEdit、Calendar、Accordion、HTML Editor Extender和Watermark等控件。

 

获取Ajax Control Toolkit

我们可以通过以下几种方式获取：

1.对于Visual Studio 2008的用户，我们可以去Ajax Control Toolkit官网上下载工具包（.NET 3.5或.NET 4.0版本）；

2.使用Visual Studio 2010的用户，通过Nuget获取安装包即可；如果你还没有使用Nuget的话，赶紧装一个吧。

   PS：安装Nuget的方法很简单，点击本文中的Nuget链接，即可进入Visual Studio Gallery 扩展库，下载Nuget插件并安装即可。

   使用Nuget获取Ajax Control Toolkit的操作界面见下图：

Ajax Control Toolkit相关的资源

1.Ajax Control Toolkit官方主页：http://ajaxcontroltoolkit.codeplex.com/

2.控件集使用示例：http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx

使用Ajax Control Toolkit扩展服务器控件

如何将程序集添加至工具箱，请大家自行查阅相关资料，这里不再赘述，添加后的工具箱列表如下所示：

下面说一下怎么使用工具包来扩展我们的服务器控件：

 

添加 AutoCompleteExtender 相关的扩展控件

AutoCompleteExtender 是一个可以附件到任何一个TextBox上的扩展控件，当用户在TextBox中键入关键词时，会弹出一个与之关联的弹出层，并在其中展示以当前关键词为前缀的条目列表，用户可以通过方向键从列表中选择相应条目。类似于百度搜索框的智能匹配。

首先，我们从工具箱中拖出一个TextBox控件到页面上，然后我们从 Ajax Control Toolkit 工具列表中拖出 ToolkitScriptManager 和 AutoCompleteExtender 控件，最后我们修改 AutoCompleteExtender 的属性 TargetControlID 使之与刚才拖入的TextBox关联。

这里要注意的是，三个控件的摆放一定要遵循我下面这样的摆放顺序：

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1"
     MinimumPrefixLength="1" ServiceMethod="GetDataList" ServicePath="AutoCompleteService.asmx"
     UseContextKey="True" CompletionInterval="500">
</asp:AutoCompleteExtender>

这里有一些比较重要的客户端属性，作一下特别说明：

属性名称	说明
MinimumPrefixLength	最短前端匹配长度，即用户键入的关键词长度大于等于此值时才进行前端匹配检索
ServiceMethod	服务方法名，获取弹出层展示数据的方法
ServicePath	服务路径
CompletionInterval	自动完成匹配的时间间隔，以毫秒计，这里一般应不小于500毫秒

 

创建支持异步调用的Web服务

新建一个Web服务，这里名称为 AutoCompleteService.asmx ，并在其中添加响应方法，这里方法名为 GetDataList。

注意方法的返回值一定要是 string 类型数组，还有方法签名中的参数类型一定要是如下顺序：

/// <summary>
/// AutoCompleteService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class AutoCompleteService : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod]
    public string[] GetDataList(string prefixText, int count, string contextKey)
    {
        string[] stringArr = new string[] { "高效E人", "财智软件", "DOIT.IM", "印象笔记","Dropbox","遨游浏览器" };
        return (from m in stringArr where m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase) select m).Take(count).ToArray();
    }
}

运行刚才创建的页面，效果如下：

是不是很简单，那就在项目里试试这个工具包吧。