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的C...