使用AutoCompleteExtender实现文本框自动匹配
引言
Ajax Control Toolkit 是一个丰富的控件集,可以为我们提供许多很炫也很实用的页面功能。编写一个Asp.Net Ajax控件是比较耗费精力的,不仅需要有一定的javascript脚本编写能力,还需要了解微软的Ajax Library。如果我们急需一些效果,那么可以直接使用Ajax Control Toolkit 所提供的一些功能。但是如果想要完全明白它是如何运作的,还是需要认真地学习一下如何编写一个Asp.Net Ajax控件。我个人觉得Asp.Net Ajax控件能够较好地将以前的编写的javascript特效也融合到了.Net控件中,这样既利于javascipt代码的重用,更便于日后的使用,而不是一定要在控件中使用Ajax方式与服务端进行一次通信往来。
在Ajax Control Toolkit中包含了两类控件,其中一类后缀为Extender,也就是“扩展”的意思,这类控件可以对现有Asp.Net的能力进行扩充,来实现一些更华丽的效果。这篇文章简单介绍一下Ajax Control Toolkit中的AutoCompleteExtender如何使用,顾名思义,它可以实现一个常见的效果:AutoComplete(自动匹配)。
编写WCF Service代码
在进行AutoComplete时,是将客户端文本框中输入的值与服务器端的数据相比较,这样就需要在服务端创建一个方法,它能够接受来自客户端文本框输入的字符串,并且针对此字符串对数据库或者其他数据源中的数据进行查找,然后将匹配的结果以字符串数组的形式返回给客户端,最后客户端将获得的结果以列表形式显示在输入文本框的下面。尽管前面的描述只有短短的几句话,但是却暗含了这样几个问题需要注意:
- 由于每次客户端输入时都要进行一个查找和匹配的过程,因此要查找的数据源如果不大的话,应该尽量缓存在服务端内存中,而不是每次查找匹配都去访问实际的存储位置,比如说数据库。
- 有可能用户输入的字符串会返回极大量的结果,比如30个,为了提升服务端查找的效率,也为了不在客户端显示极长的列表,可以限制返回的结果数目。
- AutoComplete是为了根据用户输入的字符判断用户的意图,然后返回可能的结果。如果用户只输入一个字符,比如a,就开始进行查找匹配,对于用户来说意义不大,而且也会加重服务端负担,因为此时往往会返回极长的列表。
了解了上面3个问题,我们现在在站点下创建一个Ajax-Enabled WCF Service,起名为AutoCompleteService,然后在App_Code中修改AutoCompleteService.cs:
// 上面的特性省略
public class AutoCompleteService
{
private static string[] cityArray; // 将数据值缓存在静态字段中
public string[] getListFromDatabase() {
if (cityArray != null && cityArray.Length > 0)
return cityArray;
// 这里通常是由数据库获取
cityArray = new string[]{
"Baotou",
"Beihai",
"Beijing",
"Boao",
// ...省略若干
};
return cityArray;
}
[OperationContract]
public string[] GetCityList(string prefixText, int count) {
string[] cityArray = getListFromDatabase();
List<string> findCity = new List<string>(count);
int i = 0; int j = 0;
while (i < cityArray.Length && j < count) {
string pre = cityArray[i].Substring(0, prefixText.Length).ToLower();
if (pre.Equals(prefixText.ToLower())) {
findCity.Add(cityArray[i]);
j++;
}
i++;
}
return findCity.ToArray();
}
}
这里我们使用一个静态字段缓存了数据源中的结果,以符合上面所说的第1条。接下来我们看一下GetCityList()方法,它接受两个参数:prefixText,代表客户端文本框中已经输入的值;而count表示返回的结果数目。第2个参数体现了我们前面所说的第2点。方法的实现没有什么好说的,无非是遍历集合,返回与prefixText相匹配的结果。这里要特别说明的是:因为这个方法要与aspx页面上的AutoCompleteExtender控件协作,所以方法的签名必须为:public string[] XXXXX(string prefixText, int count),其中XXXX代表任意合法的方法名称,但是参数的类型和名称则必须完全一致。
Web页面实现
Web页面的实现就更为简单了,因为我们使用Ajax Control Toolkit中的现成控件,所以不需要自己编码,只需要对控件的属性进行设置一下就可以了。因为我们要使用Web服务,所以需要首先在ScriptManager中对服务进行一下注册:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/AutoCompleteService.svc" />
</Services>
</asp:ScriptManager>
接着我们在页面拖放一个Asp.Net Textbox控件,以及一个AutoCompleteExtender控件,并向下面这样对AutoCompleteExtender控件设置属性:
输入城市(拼音)
<span id="autoBox">
<asp:TextBox ID="TextBox1" runat="server" Width="160"></asp:TextBox>
</span>
<br /><br />
<ajaxControlToolkit:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"
ServicePath="AutoCompleteService.svc"
ServiceMethod="GetCityList"
MinimumPrefixLength="2"
CompletionSetCount="10"
EnableCaching="true"
TargetControlID="TextBox1"
>
</ajaxControlToolkit:AutoCompleteExtender>
TextBox和通常的没有任何区别,所以我们只要看下AutoCompleteExtender就可以了。我们设置了这样几个属性:
- TargetControlID:因为它是一个Extender扩展控件,相当于是扩展了现有控件的功能,所以这个TargetControlID说明了它要对哪个控件进行扩展,此处为TextBox1。
- ServicePath:指明了要使用的服务,注意这里只需写名称,而无需指定全路径。
- ServiceMethod:服务的方法名称,即是上面所指定的GetCityList。
- MinimumPrefixLength:当文本框中输入的字符串小于这个长度时,不进行匹配,可以看到,这个可以满足我们一开始所说到的第3条。
- CompletionSetCount:返回的最大的匹配数,也就是GetCityList的count参数的值。
- EnableCaching:启用缓存,将之前匹配的结果缓存起来。
接下来运行页面,应该可以看到这样的结果:
总结
在这篇文章中,实现了当今Web页面中很常见的一个AutoComplete功能,我们首先分析了实现的过程中可能会存在的问题,随后借助Ajax Control Toolkit中的AutoCompleteExtender控件轻松地进行了实现。
感谢阅读,希望这篇文章能给你带来帮助!