詳解ASP.NET AJAX
我們來看一下使用組件思想重新編寫的這個(gè)應(yīng)用。首先看一下aspx頁面：
Default.aspx:
- DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞- ＜htmlxmlns="http://www.w3.org/1999/xhtml"＞
- ＜headrunat="server"＞
- ＜title＞UntitledPagetitle＞
- head＞
- ＜body＞
- ＜formid="form1"runat="server"＞
- ＜asp:ScriptManagerID="ScriptManager1"runat="server"＞
- ＜Scripts＞
- ＜asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="PreviewScript.js"/＞
- ＜asp:ScriptReferencePath="~/ajax.js"/＞
- Scripts＞
- ＜Services＞
- ＜asp:ServiceReferencePath="~/SayHelloService.asmx"/＞
- Services＞
- asp:ScriptManager＞
- ＜div＞
- ＜inputid="btnSayHello"type="button"value="SayHello"/＞
- ＜divid="result"＞div＞
- div＞
- form＞24body＞25html＞
這里有兩處變化，一是在ScriptManager控件里增加了對(duì)PreviewScript.js的引用。這里要注意，客戶端組件的內(nèi)容并不包含在ASP.NET AJAX1.0正式版里，而是包換在ASP.NET AJAX Futures CTP部分。所以，要使用這些功能，首先要添加對(duì)Microsoft.Web.Preview.dll文件的引用，這個(gè)文件在ASP.NET AJAX Futures CTP的安裝目錄里，然后要在頁面中添加對(duì)PreviewScript.js文件的引用。
第二個(gè)變化是這里的btnSayHello已經(jīng)沒有了onclick屬性，那么如何知道單擊這個(gè)按鈕的時(shí)候需要執(zhí)行何種代碼呢？答案在js文件里。
ajax.js:
- var btnSayHello;
- var lblResult;
- Sys.Application.add_init(onPageInit);
- function onPageInit()
- { btnSayHello=new Sys.Preview.UI.Button($get("btnSayHello"));
- btnSayHello.initialize();
- lblResult=new Sys.Preview.UI.Label($get("result"));
- lblResult.initialize(); btnSayHello.add_click(btnSayHello_onClick);
- }
- function btnSayHello_onClick(){
- SayHelloService.SayHello(OnSucceeded,OnFailded);
- }function OnSucceeded(resultText){
- lblResult.set_text(resultText);
- }function OnFailded(error){
- lblResult.set_text("調(diào)用失敗。錯(cuò)誤信息："+error.get_message());}
我們看到，應(yīng)用組件編程思想后，JavaScript發(fā)生了巨大的改變。不著急，我們一步一步解析這個(gè)文件。
最頂上是定義了兩個(gè)全局變量，這兩個(gè)變量將分別存儲(chǔ)對(duì)btnSayHello和result的引用。之所以要定義成全局變量，是方便在整個(gè)文件中調(diào)用兩個(gè)控件。
Sys.Application.add_init(onPageInit);的作用是告訴頁面當(dāng)頁面初始化時(shí)執(zhí)行名為onPageInit的函數(shù)。
onPageInit是一個(gè)自定義函數(shù)，主要完成客戶端控件的創(chuàng)建、初始化工作。以下面兩行代碼為例：
- btnSayHello=new Sys.Preview.UI.Button($get("btnSayHello"));
- btnSayHello.initialize();
***行我想大多數(shù)人一看就知道是什么意思，因?yàn)槟莻€(gè)“new”實(shí)在太親切了，這正是創(chuàng)建一個(gè)Button的實(shí)例，并將其賦給btnSayHello變量。其中Sys.Preview.UI.Button是Button的完全限定名，而大多數(shù)控件的構(gòu)造函數(shù)都需要一個(gè)參數(shù)，用來指出這個(gè)控件要關(guān)聯(lián)到的DOM 元素。而第二行是必須的，在實(shí)例化一個(gè)控件后，***馬上調(diào)用initialize方法，避免一些奇怪的情況發(fā)生。
- btnSayHello.add_click(btnSayHello_onClick);
上面這行代碼是將控件的單擊事件與btnSayHello_onClick這個(gè)函數(shù)關(guān)聯(lián)起來。這里我要專門說一下ASP.NET AJAX客戶端控件的屬性及事件的設(shè)置方法。
ASP.NET AJAX框架規(guī)定，在獲取一個(gè)控件的屬性時(shí)，應(yīng)使用“控件名.get_屬性名()”這種方法，而設(shè)置時(shí)則是“控件名.set_屬性名()”。為一個(gè)控件的某個(gè)事件添加監(jiān)聽函數(shù)時(shí)，應(yīng)該用“控件名.add_事件名()”，移除時(shí)用“控件名.remove_事件名()”。這是ASP.NET AJAX強(qiáng)制執(zhí)行的命名規(guī)范，所有的客戶端控件都遵從這個(gè)規(guī)則，以后我們?cè)陂_發(fā)自己的客戶端組件時(shí)，也應(yīng)該遵從這個(gè)規(guī)則。
知道了以上知識(shí)，很多代碼就很好理解了。例如“l(fā)blResult.set_text(resultText);”就是將lblResult控件的text屬性設(shè)置為resultText。剩下的代碼我就不解釋了，應(yīng)該沒問題了。
【編輯推薦】
