[AjaxControlToolkit]AutoCompleteExtender-無腦開發自動完成

[AjaxControlToolkit]AutoCompleteExtender-無腦開發自動完成

「自動完成」的功能可以說是踏入AJAX的第一個入口,因為是標準的非同步查詢server端資料,

以往可能要自己在javascript動動手腳,但使用AjaxControlToolkit的AutoCompleteExtender真的好寫到爆掉,

所以順手寫了個範例,方便之後給小朋友看。


Source Code下載 (VS2008):AjaxToolkitSample.rar

 

簡單說,我們要有幾個東西,

aspx上

1.一個ScriptManager (我還是偏向用ToolkitScriptManager,因為都參考AjaxControlToolkit了,不用白不用)

2.一個TextBox

3.一個AutoCompleteExtender。

web service,也就是asmx上,要有撈資料的webmethod。

 

這邊我用了兩組textbox來當範例,

第一組是不管打了什麼字,後面都會接3個亂數字母,

第二組則是簡單的縣市字串自動完成範例,

有需要的只需要根據傳入method的typing string當條件,對資料來源作filter即可。

 

aspx

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>    
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" CompletionSetCount="10" 
        EnableCaching="true" MinimumPrefixLength="2" ServiceMethod="GetMyList" ServicePath="AutoCompleteSourceService.asmx">
        </cc1:AutoCompleteExtender>
        
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" TargetControlID="TextBox2" CompletionSetCount="7" 
        EnableCaching="true" MinimumPrefixLength="1" ServiceMethod="GetMyFilterList" ServicePath="AutoCompleteSourceService.asmx">
        </cc1:AutoCompleteExtender>
        
    </div>
    </form>
</body>
</html>

AutoCompleteExtender的屬性解釋:

  • TargetControlID:針對哪一個textbox
  • CompletionSetCount:要顯示的清單個數
  • EnableCaching:是否使用Cache
  • MinimumPrefixLength:輸入幾個字會觸發「自動完成」的動作
  • ServicePath:使用哪個web service檔案
  • ServiceMethod:使用該service上哪個Method

 

 

.asmx.cs

會發現註解上寫著一行:

// 若要允許使用 ASP.NET AJAX 從指令碼呼叫此 Web 服務,請取消註解下一行。

// [System.Web.Script.Services.ScriptService]

我們這邊由於要給client端呼叫,所以要使用[System.Web.Script.Services.ScriptService]

using System.Collections.Generic;
using System.Web.Services;
/// <summary>
/// AutoCompleteSourceService 的摘要描述
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要允許使用 ASP.NET AJAX 從指令碼呼叫此 Web 服務,請取消註解下一行。
[System.Web.Script.Services.ScriptService]
public class AutoCompleteSourceService : System.Web.Services.WebService {
        #region Constructors (1)  public AutoCompleteSourceService () {

        //如果使用設計的元件,請取消註解下行程式碼 
        //InitializeComponent(); 
    }

        #endregion Constructors  #region Methods (3)  // Public Methods (3) 

    /// <summary>
    /// Gets my filter list.
    /// </summary>
    /// <param name="prefixText">The prefix text.</param>
    /// <param name="count">The count.</param>
    /// <returns></returns>
    [WebMethod]
    public string[] GetMyFilterList(string prefixText, int count)
    {
        IList<string> list=new string[]{"台北","基隆","高雄","台中","台南","彰化","桃園","台東"};
        List<String> returnlist = new List<string>(list.Count);
        for (int i = 0; i < list.Count; i++)
        {
            if (list[i].Contains(prefixText))
            {
                returnlist.Add(list[i]);
            }
            
        }
        return returnlist.ToArray();
    }

    /// <summary>
    /// Gets my list.
    /// </summary>
    /// <param name="prefixText">The prefix text.</param>
    /// <param name="count">The count.</param>
    /// <returns></returns>
    [WebMethod]
    public string[] GetMyList(string prefixText, int count)
    {
        char c1, c2, c3;
        if (count == 0)
            count = 10;
        List<String> list = new List<string>(count);
        Random rnd = new Random();
        for (int i = 1; i <= count; i++)
        {
            c1 = (char)rnd.Next(65, 90);
            c2 = (char)rnd.Next(97, 122);
            c3 = (char)rnd.Next(97, 122);
            list.Add(prefixText + c1 + c2 + c3);
        }
        return list.ToArray();
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }

        #endregion Methods  }

 

 


畫面:

textbox1

textbox2

最後,自動完成清單的List是可以套Css的。


或許您會對下列培訓課程感興趣:

  1. 2019/7/27(六)~2019/7/28(日):演化式設計:測試驅動開發與持續重構 第六梯次(台北)
  2. 2019/8/16(五)~2019/8/18(日):【C#進階設計-從重構學會高易用性與高彈性API設計】第二梯次(台北)
  3. 2019/9/21(六)~2019/9/22(日):Clean Coder:DI 與 AOP 進階實戰 第二梯次(台北)
  4. 2019/10/19(六):【針對遺留代碼加入單元測試的藝術】第七梯次(台北)
  5. 2019/10/20(日):【極速開發】第八梯次(台北)

想收到第一手公開培訓課程資訊,或想詢問企業內訓、顧問、教練、諮詢服務的,請洽 Facebook 粉絲專頁:91敏捷開發之路