本系列文章其實算不上教程,只能算是在下的學習筆記。所有內容均取自ASP.NET開發隊的Joe Stagner所做的"How Do I?"系列視頻教程。在下面的講解裡我會列出所對應的視頻教程,有能力的朋友可以自行觀看,如果覺得聽不懂老外說啥,也可以來參考一下我的學習筆記。
本系列文章主要介紹Ajax.net的使用方式,重點介紹Ajax.net的工具包Ajax-Toolkit中各種控制項的使用方法。
這裡就不再重複什麼是Ajax.net以及它的光輝曆史了,我們直接開始。
第一步:安裝Ajax.net。
安裝Ajax.net很簡單,但安裝Ajax.net擴充包之前我們必須確保我們已經正確安裝了VS.Net 2005或Visual Web Developer 2005 Express Edition和.net Frameworks 2.0。
我們可以登入Ajax.net官方網站下載Ajax.net擴充包。地址:http://ajax.asp.net/downloads/default.aspx?tabid=47
下載完之後雙擊安裝,安裝後大家可以看一下更新文檔,看看Ajax.net究竟更新了什麼功能。
第二步:建立Ajax-Enabled網站
開啟Vs.Net2005,選擇建立網站,如果你已成功安裝Ajax.net擴充包,你會發現在項目模板裡會多了一項:Asp.net Ajax-Enabled Web Site。選擇它然後建立一個網站。
建立網站後你會發覺Ajax-Enabled網站會比一般網站多出了一個ScriptManager控制項。ScriptManager是Ajax.net一個很重要的控制項,它在一個頁面內只能出現一次(如果使用了Masterpage,那麼Masterpage使用了ScriptManger後,子頁面就不能再使用了),負責處理當前頁面所有Ajax.net組件和局部更新。它也可以指定我們所需的指令碼庫,提供更靈活的操作,更詳細的介紹請查看MSDN相關描述。
第三步:構建簡單的Ajax.net程式
我們可以先隨便拖兩個Label控制項和一個Button控制項進入設計視窗,然後編寫常規的Asp.net程式,例如輸出日期到兩個Label控制項上。
運行後我們能看到預期的效果,每次點擊Button,頁面都會重新整理,兩個Label上的時間都會發生改變。那麼我們怎麼利用Ajax.net使到功能一樣,但頁面卻不會重新整理呢。我們需要使用UpdatePanel控制項來完成。
從工具列裡拖出UpdatePanel控制項,然後把其中一個Label控制項和Button控制項拖進UpdatePanel範圍裡面,,然後運行。
我們可以發現,當我們再次點擊Button的時候,在UpdatePanel裡的Label控制項依然會改變顯示時間,而且頁面也不再重新整理了,但UpdatePanel外的Label控制項則沒有發生變化。這就是Ajax.net局部重新整理現象,在UpdatePanel範圍裡的控制項會根據邏輯進行相應的改變而不需通過重新請求頁面。而UpdatePanel以外的控制項雖然根據邏輯會改變值,但由於頁面沒有重新請求,它們的改變反映不出來,因此就沒有任何變化了。
我們也可以把Button拉出UpdatePanel而達到同樣的效果,但我們需要定義UpdatePanel的觸發條件。我們切換到HTML模式,填寫觸發代碼,如所示:
運行,效果與剛才一樣。
結束:
本節主要介紹了怎樣安裝Ajax.net擴充包以及如何建立一個簡單的Ajax.net網站,大家可以通過以上例子舉一反三,做出很多簡單的Ajax特效。
原始碼:http://download.csdn.net/source/521048