我們來看一下使用組件思想重新編寫的這個應(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控件里增加了對PreviewScript.js的引用。這里要注意，客戶端組件的內(nèi)容并不包含在ASP.NET AJAX1.0正式版里，而是包換在ASP.NET AJAX Futures CTP部分。所以，要使用這些功能，首先要添加對Microsoft.Web.Preview.dll文件的引用，這個文件在ASP.NET AJAX Futures CTP的安裝目錄里，然后要在頁面中添加對PreviewScript.js文件的引用。

第二個變化是這里的btnSayHello已經(jīng)沒有了onclick屬性，那么如何知道單擊這個按鈕的時候需要執(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)用失敗。錯誤信息："+error.get_message());} 

我們看到，應(yīng)用組件編程思想后，JavaScript發(fā)生了巨大的改變。不著急，我們一步一步解析這個文件。

最頂上是定義了兩個全局變量，這兩個變量將分別存儲對btnSayHello和result的引用。之所以要定義成全局變量，是方便在整個文件中調(diào)用兩個控件。

Sys.Application.add_init(onPageInit);的作用是告訴頁面當(dāng)頁面初始化時執(zhí)行名為onPageInit的函數(shù)。

onPageInit是一個自定義函數(shù)，主要完成客戶端控件的創(chuàng)建、初始化工作。以下面兩行代碼為例：

btnSayHello=new Sys.Preview.UI.Button($get("btnSayHello"));  
btnSayHello.initialize(); 

***行我想大多數(shù)人一看就知道是什么意思，因?yàn)槟莻€“new”實(shí)在太親切了，這正是創(chuàng)建一個Button的實(shí)例，并將其賦給btnSayHello變量。其中Sys.Preview.UI.Button是Button的完全限定名，而大多數(shù)控件的構(gòu)造函數(shù)都需要一個參數(shù)，用來指出這個控件要關(guān)聯(lián)到的DOM 元素。而第二行是必須的，在實(shí)例化一個控件后，***馬上調(diào)用initialize方法，避免一些奇怪的情況發(fā)生。

btnSayHello.add_click(btnSayHello_onClick); 

上面這行代碼是將控件的單擊事件與btnSayHello_onClick這個函數(shù)關(guān)聯(lián)起來。這里我要專門說一下ASP.NET AJAX客戶端控件的屬性及事件的設(shè)置方法。

ASP.NET AJAX框架規(guī)定，在獲取一個控件的屬性時，應(yīng)使用“控件名.get_屬性名()”這種方法，而設(shè)置時則是“控件名.set_屬性名()”。為一個控件的某個事件添加監(jiān)聽函數(shù)時，應(yīng)該用“控件名.add_事件名()”，移除時用“控件名.remove_事件名()”。這是ASP.NET AJAX強(qiáng)制執(zhí)行的命名規(guī)范，所有的客戶端控件都遵從這個規(guī)則，以后我們在開發(fā)自己的客戶端組件時，也應(yīng)該遵從這個規(guī)則。

知道了以上知識，很多代碼就很好理解了。例如“l(fā)blResult.set_text(resultText);”就是將lblResult控件的text屬性設(shè)置為resultText。剩下的代碼我就不解釋了，應(yīng)該沒問題了。

【編輯推薦】

1. 淺談ASP.NET MVC框架
2. 介紹ASP.NET MVC中的MvcAjaxPanel
3. ASP.NET MVC框架拯救UpdatePanel
4. 用ASP.NET MVC源代碼尋找解決方案
5. ASP.NET MVC框架的ActionInvoker