感謝張子陽先生先?。ㄈ恼洠﹚ww.tracefact.net/Asp-Net/AutoCompleteExtender.aspx

引言

Ajax Control Toolkit 是一個(gè)豐富的控件集，可以為我們提供許多很炫也很實(shí)用的頁面功能。編寫一個(gè)Asp.Net Ajax控件是比較耗費(fèi)精力的，不僅需要有一定的javascript腳本編寫能力，還需要了解微軟的Ajax Library。如果我們急需一些效果，那么可以直接使用Ajax Control Toolkit 所提供的一些功能。但是如果想要完全明白它是如何運(yùn)作的，還是需要認(rèn)真地學(xué)習(xí)一下如何編寫一個(gè)Asp.Net Ajax控件。我個(gè)人覺得Asp.Net Ajax控件能夠較好地將以前的編寫的javascript特效也融合到了.Net控件中，這樣既利于javascipt代碼的重用，更便于日后的使用， 而不是一定要在控件中使用Ajax方式與服務(wù)端進(jìn)行一次通信往來。

在Ajax Control Toolkit中包含了兩類控件，其中一類后綴為Extender，也就是“擴(kuò)展”的意思，這類控件可以對(duì)現(xiàn)有Asp.Net的能力進(jìn)行擴(kuò)充，來實(shí)現(xiàn)一些 更華麗的效果。這篇文章簡(jiǎn)單介紹一下Ajax Control Toolkit中的AutoCompleteExtender如何使用，顧名思義，它可以實(shí)現(xiàn)一個(gè)常見的效果：AutoComplete（自動(dòng)匹配）。

編寫WCF Service代碼

在進(jìn)行AutoComplete時(shí)，是將客戶端文本框中輸入的值與服務(wù)器端的數(shù)據(jù)相比較，這樣就需要在服務(wù)端創(chuàng)建一個(gè)方法，它能夠接受來自客戶端文 本框輸入的字符串，并且針對(duì)此字符串對(duì)數(shù)據(jù)庫或者其他數(shù)據(jù)源中的數(shù)據(jù)進(jìn)行查找，然后將匹配的結(jié)果以字符串?dāng)?shù)組的形式返回給客戶端，最后客戶端將獲得的結(jié)果 以列表形式顯示在輸入文本框的下面。盡管前面的描述只有短短的幾句話，但是卻暗含了這樣幾個(gè)問題需要注意：

1. 由于每次客戶端輸入時(shí)都要進(jìn)行一個(gè)查找和匹配的過程，因此要查找的數(shù)據(jù)源如果不大的話，應(yīng)該盡量緩存在服務(wù)端內(nèi)存中，而不是每次查找匹配都去訪問實(shí)際的存儲(chǔ)位置，比如說數(shù)據(jù)庫。
2. 有可能用戶輸入的字符串會(huì)返回極大量的結(jié)果，比如30個(gè)，為了提升服務(wù)端查找的效率，也為了不在客戶端顯示極長(zhǎng)的列表，可以限制返回的結(jié)果數(shù)目。
3. AutoComplete是為了根據(jù)用戶輸入的字符判斷用戶的意圖，然后返回可能的結(jié)果。如果用戶只輸入一個(gè)字符，比如a，就開始進(jìn)行查找匹配，對(duì)于用戶來說意義不大，而且也會(huì)加重服務(wù)端負(fù)擔(dān)，因?yàn)榇藭r(shí)往往會(huì)返回極長(zhǎng)的列表。

了解了上面3個(gè)問題，我們現(xiàn)在在站點(diǎn)下創(chuàng)建一個(gè)Ajax-Enabled WCF Service，起名為AutoCompleteService，然后在App_Code中修改AutoCompleteService.cs：

// 上面的特性省略
public class AutoCompleteService
{
    private static string[] cityArray;  // 將數(shù)據(jù)值緩存在靜態(tài)字段中

    public string[] getListFromDatabase() {
        if (cityArray != null && cityArray.Length > 0)
            return cityArray;

        // 這里通常是由數(shù)據(jù)庫獲取
        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();
    }
}

這里我們使用一個(gè)靜態(tài)字段緩存了數(shù)據(jù)源中的結(jié)果，以符合上面所說的第1條。接下來我們看一下GetCityList()方法，它接受兩個(gè)參 數(shù)：prefixText，代表客戶端文本框中已經(jīng)輸入的值；而count表示返回的結(jié)果數(shù)目。第2個(gè)參數(shù)體現(xiàn)了我們前面所說的第2點(diǎn)。方法的實(shí)現(xiàn)沒有什 么好說的，無非是遍歷集合，返回與prefixText相匹配的結(jié)果。這里要特別說明的是：因?yàn)檫@個(gè)方法要與aspx頁面上的 AutoCompleteExtender控件協(xié)作，所以方法的簽名必須為：public string[] XXXXX(string prefixText, int count)，其中XXXX代表任意合法的方法名稱，但是參數(shù)的類型和名稱則必須完全一致。

Web頁面實(shí)現(xiàn)

Web頁面的實(shí)現(xiàn)就更為簡(jiǎn)單了，因?yàn)槲覀兪褂肁jax Control Toolkit中的現(xiàn)成控件，所以不需要自己編碼，只需要對(duì)控件的屬性進(jìn)行設(shè)置一下就可以了。因?yàn)槲覀円褂肳eb服務(wù)，所以需要首先在ScriptManager中對(duì)服務(wù)進(jìn)行一下注冊(cè)：

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/AutoCompleteService.svc" />
    </Services>
</asp:ScriptManager>

接著我們?cè)陧撁嫱戏乓粋€(gè)Asp.Net Textbox控件，以及一個(gè)AutoCompleteExtender控件，并向下面這樣對(duì)AutoCompleteExtender控件設(shè)置屬性：

輸入城市(拼音)
<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和通常的沒有任何區(qū)別，所以我們只要看下AutoCompleteExtender就可以了。我們?cè)O(shè)置了這樣幾個(gè)屬性：

• TargetControlID：因?yàn)樗且粋€(gè)Extender擴(kuò)展控件，相當(dāng)于是擴(kuò)展了現(xiàn)有控件的功能，所以這個(gè)TargetControlID說明了它要對(duì)哪個(gè)控件進(jìn)行擴(kuò)展，此處為TextBox1。
• ServicePath：指明了要使用的服務(wù)，注意這里只需寫名稱，而無需指定全路徑。
• ServiceMethod：服務(wù)的方法名稱，即是上面所指定的GetCityList。
• MinimumPrefixLength：當(dāng)文本框中輸入的字符串小于這個(gè)長(zhǎng)度時(shí)，不進(jìn)行匹配，可以看到，這個(gè)可以滿足我們一開始所說到的第3條。
• CompletionSetCount：返回的最大的匹配數(shù)，也就是GetCityList的count參數(shù)的值。
• EnableCaching：?jiǎn)⒂镁彺?，將之前匹配的結(jié)果緩存起來。

接下來運(yùn)行頁面，應(yīng)該可以看到這樣的結(jié)果：

總結(jié)

在這篇文章中，實(shí)現(xiàn)了當(dāng)今Web頁面中很常見的一個(gè)AutoComplete功能，我們首先分析了實(shí)現(xiàn)的過程中可能會(huì)存在的問題，隨后借助Ajax Control Toolkit中的AutoCompleteExtender控件輕松地進(jìn)行了實(shí)現(xiàn)。

感謝閱讀，希望這篇文章能給你帶來幫助！