ASP.NET開發之AjaxControlToolKit的妙用(一)
撰文：吳俊毅
時間：2009/12/19
哈嘍~各位好，筆者因為工作的關係需要快速的完成許多應用程式，由於時間有限，快速開發成為重要課題，以往習慣Hot Code寫程式未免過於緩慢不符經濟效益也過於辛苦，有時客戶希望在網頁上增加一些特效，此方面目前首選應該是jQuery，jQuery對於在網頁上快速選取物件並加入CSS與特殊功能的能力非常強，他自行開發的(Wrapper)使控制HTML的能力更強，重點是效能也不會太差。不過ASP.NET上的開發jQuery需要注意的細節較多，有時會使ASP.NET的Server Site控制項失去回應伺服器事件回應的處理，當時筆者選擇以與.NET相容度較高之Ajax Control ToolKit來進行開發。
OK~我們進入今天的主題吧。當時的情形是~突然間客戶希望TextBox有一個自動完成的功能，這個自動完成並不是IE的自動完成，而是需要到資料庫去撈符合開頭字母的資料，當時筆者當然與許多資深的工程師相同就是寫Ajax用XMLHTTP去後端撈吧，在input下面秀出個DIV將符合的資料秀出來，不過基本上作法當然還有很多種！不過重點是時間有限，還有其他工作要完成，筆者只有20分鐘處理這件事，後來筆者想到Ajax Control ToolKit中有提供一個AutoCompleteExtender元件，筆者立刻將他參考進來。並透過Ajax Control ToolKit的擴充項功能掛在需要這個功能的TextBox上，這就如同使用jQuery去選擇該input相同，如下圖：
當選擇加入擴充項後會出現如下視窗：
選擇AutoCompeteExtender後在該TextBox會出現Extender屬性，如下圖：
圖中為該AutoCompleteExtender元件可設定之屬性，同樣也可以在原始檔中編輯，也有安裝Intellisence必要的項目到IDE工具中，如圖中可以設定CompletionInterval (顯示下拉的時間間隔)，與completionSetCount (最多顯示在下拉中的數量)等，功能相當多，通常會透過WebService取資料，透過智慧標籤的 Add autocomplete page method.功能即可快速的加入該Web Service Method。
上面的動作會在目前Extender所在的Web Page的CS檔中增加一個Web Service Method，如下：
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey)
{
return default(string[]);
}
預設的MinimumPrefixLength為3，表是當輸入到超過3個字母時才呼叫Web Service，以免使用者只輸入一個字母時就執行Web Service導致緩慢，非常人性的設計，您可以自由設定，這時原始當應該像這樣：
還有當中有一個UseContentKey 記得一定要設為true，才可以方便傳入其他的附加參數或做一些其他的判斷，因為筆者要到資料庫抓出相符的資料，使用傳入的PrefixText作為SQL 要Like的條件即可，接下來的程式碼就非常的簡單筆者就不再熬敘了^_^
做到這裡，哇~剛好20分鐘ㄝ
註：
時間：2009/12/19
哈嘍~各位好，筆者因為工作的關係需要快速的完成許多應用程式，由於時間有限，快速開發成為重要課題，以往習慣Hot Code寫程式未免過於緩慢不符經濟效益也過於辛苦，有時客戶希望在網頁上增加一些特效，此方面目前首選應該是jQuery，jQuery對於在網頁上快速選取物件並加入CSS與特殊功能的能力非常強，他自行開發的(Wrapper)使控制HTML的能力更強，重點是效能也不會太差。不過ASP.NET上的開發jQuery需要注意的細節較多，有時會使ASP.NET的Server Site控制項失去回應伺服器事件回應的處理，當時筆者選擇以與.NET相容度較高之Ajax Control ToolKit來進行開發。
OK~我們進入今天的主題吧。當時的情形是~突然間客戶希望TextBox有一個自動完成的功能，這個自動完成並不是IE的自動完成，而是需要到資料庫去撈符合開頭字母的資料，當時筆者當然與許多資深的工程師相同就是寫Ajax用XMLHTTP去後端撈吧，在input下面秀出個DIV將符合的資料秀出來，不過基本上作法當然還有很多種！不過重點是時間有限，還有其他工作要完成，筆者只有20分鐘處理這件事，後來筆者想到Ajax Control ToolKit中有提供一個AutoCompleteExtender元件，筆者立刻將他參考進來。並透過Ajax Control ToolKit的擴充項功能掛在需要這個功能的TextBox上，這就如同使用jQuery去選擇該input相同，如下圖：
當選擇加入擴充項後會出現如下視窗：
選擇AutoCompeteExtender後在該TextBox會出現Extender屬性，如下圖：
圖中為該AutoCompleteExtender元件可設定之屬性，同樣也可以在原始檔中編輯，也有安裝Intellisence必要的項目到IDE工具中，如圖中可以設定CompletionInterval (顯示下拉的時間間隔)，與completionSetCount (最多顯示在下拉中的數量)等，功能相當多，通常會透過WebService取資料，透過智慧標籤的 Add autocomplete page method.功能即可快速的加入該Web Service Method。
上面的動作會在目前Extender所在的Web Page的CS檔中增加一個Web Service Method，如下：
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey)
{
return default(string[]);
}
預設的MinimumPrefixLength為3，表是當輸入到超過3個字母時才呼叫Web Service，以免使用者只輸入一個字母時就執行Web Service導致緩慢，非常人性的設計，您可以自由設定，這時原始當應該像這樣：
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"
DelimiterCharacters="" Enabled="True" ServiceMethod="GetCompletionList"
ServicePath="" TargetControlID="TextBox1" UseContextKey="True">
</cc1:AutoCompleteExtender>
還有當中有一個UseContentKey 記得一定要設為true，才可以方便傳入其他的附加參數或做一些其他的判斷，因為筆者要到資料庫抓出相符的資料，使用傳入的PrefixText作為SQL 要Like的條件即可，接下來的程式碼就非常的簡單筆者就不再熬敘了^_^
做到這裡，哇~剛好20分鐘ㄝ
註：
留言
張貼留言