Ajax Control Toolkit使用實例 (1) AutoCompleteExtender


Ajax Control Toolkit簡介

Ajax Control Toolkit是一個豐富的控件集,你可以使用它來創建響應度高、互操作性強的帶有Ajax特性的Web應用程序。Ajax Control Toolkit包含了40多種控件,包括AutoCompleteCollapsiblePanelColorPickerMaskedEditCalendarAccordionHTML Editor ExtenderWatermark等控件。

 

獲取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的操作界面見下圖:

installpackagegui

Ajax Control Toolkit相關的資源

1.Ajax Control Toolkit官方主頁:http://ajaxcontroltoolkit.codeplex.com/

2.控件集使用示例:http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx

使用Ajax Control Toolkit擴展服務器控件

如何將程序集添加至工具箱,請大家自行查閱相關資料,這里不再贅述,添加后的工具箱列表如下所示:

image

下面說一下怎么使用工具包來擴展我們的服務器控件:

 

添加 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();
    }
}
 

運行剛才創建的頁面,效果如下:

image

是不是很簡單,那就在項目里試試這個工具包吧眨眼


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM