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();

    }

}

運行剛才建立的頁面，效果如下：

是不是很簡單，那就在項目裡試試這個工具包吧。