使用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时,是将客户端文本框中输入的值与服务器端的数据相比较,这样就需要在服务端创建一个方法,它能够接受来自客户端文本框输入的字符串,并且针对此字符串对数据库或者其他数据源中的数据进行查找,然后将匹配的结果以字符串数组的形式返回给客户端,最后客户端将获得的结果以列表形式显示在输入文本框的下面。尽管前面的描述只有短短的几句话,但是却暗含了这样几个问题需要注意:

  1. 由于每次客户端输入时都要进行一个查找和匹配的过程,因此要查找的数据源如果不大的话,应该尽量缓存在服务端内存中,而不是每次查找匹配都去访问实际的存储位置,比如说数据库。
  2. 有可能用户输入的字符串会返回极大量的结果,比如30个,为了提升服务端查找的效率,也为了不在客户端显示极长的列表,可以限制返回的结果数目。
  3. 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控件轻松地进行了实现。

感谢阅读,希望这篇文章能给你带来帮助!