|
默認(rèn)情況下,.NET Framework僅自帶了最基本的Ajax控件,如UpdatePanel,UpdateProgress等,如果你想讓現(xiàn)有ASP.NET應(yīng)用程序Ajax化,最簡(jiǎn)單的方法就是利用Ajax控件工具箱中的擴(kuò)展控件,但Visual Studio默認(rèn)并沒有附帶Ajax工具箱,你需要從這里下載,將其添加到Visual Studio工具箱中之后就可以在ASP.NET應(yīng)用程序中使用了,注意,本文是針對(duì).NET Framework 3.5而非4.0的。
1、自動(dòng)完成擴(kuò)展(AutoComplete)
這是我最喜歡的一個(gè)ASP.NET TextBox控件的擴(kuò)展控件,當(dāng)用戶在文本框中輸入字符時(shí),它以下拉列表形式顯示所有有效的值讓用戶選擇,被選中的值自動(dòng)填充到TextBox控件中,這個(gè)控件在很多ASP.NET應(yīng)用程序中都得到了應(yīng)用,圖1顯示了一個(gè)簡(jiǎn)單的示例。
圖 1 自動(dòng)完成控件運(yùn)行效果
這個(gè)控件在提供搜索功能時(shí)用得最多,它可以為用戶提供搜索建議,下拉列表中的內(nèi)容通過一個(gè)Web服務(wù)進(jìn)行暴露。
2、動(dòng)畫擴(kuò)展(Animation)
如果你想使用ASP.NET Ajax制作一個(gè)很花俏的網(wǎng)站,那你應(yīng)該嘗試一下動(dòng)畫控件,它可以節(jié)省開發(fā)人員創(chuàng)建動(dòng)畫需要的大量時(shí)間,它可以作為任何ASP.NET控件的擴(kuò)展。
使用動(dòng)畫擴(kuò)展可以輕松創(chuàng)建褪色,移動(dòng),改變大小和著色等許多效果,當(dāng)目標(biāo)控件觸發(fā)下列事件時(shí)可以調(diào)用這些動(dòng)畫效果。
• OnLoad
• OnClick
• OnMouseOver
• OnMouseOut
• OnHoverOver
• OnHoverOut
圖2顯示了一個(gè)DIV標(biāo)簽中目標(biāo)控件被點(diǎn)擊時(shí)的示例動(dòng)畫效果。
圖 2 動(dòng)畫控件運(yùn)行效果
3、拾色器擴(kuò)展(Colorpicker)
它可以作為TextBox控件的擴(kuò)展控件,點(diǎn)擊TextBox控件時(shí),彈出顏色拾取面板,用戶可以在這個(gè)窗口中進(jìn)行顏色選擇,如圖3所示。
圖 3 顏色拾取控件
如果沒有這個(gè)擴(kuò)展控件,我不知道自己創(chuàng)建這樣一個(gè)控件會(huì)有多大的難度,這也是我將其列在10大控件之中的原因,我也承認(rèn)在ASP.NET應(yīng)用程序中使用這個(gè)控件的時(shí)候很少。
4、模態(tài)彈出擴(kuò)展(Modalpopup)
這是一個(gè)幾乎適用于所有ASP.NET服務(wù)端容器控件的擴(kuò)展,它允許你以一種平滑的方式顯示服務(wù)器控件,它允許你給目標(biāo)控件編寫服務(wù)端代碼,但客戶端代碼更快,用戶體驗(yàn)更好,不過總歸逃不脫要編寫服務(wù)端代碼,這個(gè)擴(kuò)展為這種情況提供了極大的便利。
這個(gè)控件讓彈出效果更平滑,更清爽,用戶體驗(yàn)更豐富,當(dāng)然你還可以提供服務(wù)端代碼,圖4顯示了一個(gè)簡(jiǎn)單的示例。
圖 4 模態(tài)彈出控件示例
5、可折疊面板擴(kuò)展(CollapsiblePanel)
當(dāng)你的網(wǎng)頁大部分由控件和文本內(nèi)容組成時(shí),聰明的人會(huì)將它們分組放在不同面板下,在分組頂部使用可折疊面板擴(kuò)展,增加頁面的層次感,這是一個(gè)ASP.NET面板的擴(kuò)展控件,它非常有用,是使用最廣泛的擴(kuò)展控件之一,圖5顯示了一個(gè)簡(jiǎn)單的可折疊面板擴(kuò)展示例。
圖 5 可折疊面板示例
6、動(dòng)態(tài)填充擴(kuò)展(Dynamic Populate)
這是一個(gè)非常有用功能強(qiáng)大的擴(kuò)展控件,它為改變使用Ajax的控件中的HTML內(nèi)容提供了方便,控件的HTML內(nèi)容修改由TargetControlID控制,內(nèi)容填充由PopulateTriggerControlId觸發(fā),HTML內(nèi)容應(yīng)該由Web服務(wù)提供。
當(dāng)你創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁時(shí),這個(gè)擴(kuò)展很有用,你不必一開始就加載所有內(nèi)容,而是根據(jù)上下文環(huán)境進(jìn)行顯示和隱藏,需要時(shí)才顯示動(dòng)態(tài)內(nèi)容,因此這樣可以極大地減少頁面大小,提高頁面性能。
7、幻燈效果擴(kuò)展(Slide Show)
這個(gè)擴(kuò)展實(shí)際上是一個(gè)ASP.NET圖像控件,借助它可以輕松創(chuàng)建出幻燈片播放效果,你需要做的是通過WebMethod提供幻燈顯示的圖像,它提供了下一頁,上一頁,播放/停止按鈕和標(biāo)題標(biāo)簽,圖6顯示了一個(gè)簡(jiǎn)單的幻燈顯示效果示例。
圖 6 幻燈顯示效果擴(kuò)展
8、選項(xiàng)卡控件(Tabs)
嚴(yán)格來說,它不能算作一個(gè)擴(kuò)展,因?yàn)檫x項(xiàng)卡是一個(gè)獨(dú)立的控件,在開發(fā)ASP.NET網(wǎng)頁時(shí)最讓我頭痛的就是創(chuàng)建選項(xiàng)卡,必須結(jié)合使用JavaScript和HTML,選項(xiàng)卡的優(yōu)點(diǎn)是讓頁面變得更美觀,讓導(dǎo)航變得更平滑,允許.NET開發(fā)人員按一定邏輯將項(xiàng)目進(jìn)行分組,有TabContainer的選項(xiàng)卡控件是一個(gè)容器,它可以包含多個(gè)TabPanels,即子選項(xiàng)卡,圖7顯示了一個(gè)簡(jiǎn)單的選項(xiàng)卡示例。
圖 7 選項(xiàng)卡控件示例
9、HTML編輯器控件(HTML Editor)
和選項(xiàng)卡控件一樣,HTML編輯器也是一個(gè)獨(dú)立的控件,它為最終用戶提供了豐富的HTML文本編輯功能,現(xiàn)在你在網(wǎng)頁上見到的HTML編輯器功能都已經(jīng)非常強(qiáng)大了。
在后臺(tái)編輯文章或來訪者發(fā)表評(píng)論的地方,都可以使用HTML編輯器,當(dāng)然你可以限制提交的內(nèi)容,如后臺(tái)編輯時(shí)通常可以是全HTML格式的內(nèi)容,而評(píng)論則只能是純文本的內(nèi)容,圖8顯示了一個(gè)簡(jiǎn)單的HTML編輯器示例。
圖 8 HTML編輯器控件
10、列表搜索擴(kuò)展(ListSearch)
這個(gè)擴(kuò)展可以是一個(gè)列表框控件,也可以是一個(gè)下拉列表控件,用戶輸入字母就可以搜索列表框或下拉列表中的內(nèi)容,圖9顯示了一個(gè)簡(jiǎn)單的列表搜索擴(kuò)展示例。
圖 9 列表搜索擴(kuò)展
小結(jié)
毫無疑問,Ajax控件工具箱擴(kuò)展讓我們的ASP.NET Web應(yīng)用程序變得更豐富多彩,提供更好的用戶體驗(yàn),所有Ajax控件工具箱擴(kuò)展中的CSS和動(dòng)畫都可以自定義,也就是說,你可以發(fā)揚(yáng)Hack精神,將頁面效果和用戶體驗(yàn)做到極致。
NET技術(shù):盤點(diǎn)ASP.NET Ajax工具箱的10大頂級(jí)控件,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。