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();
}
}
運行剛才創建的頁面,效果如下:
是不是很簡單,那就在項目里試試這個工具包吧。