以組件的思想重新審視ASP.NET AJAX客戶端開發

在進入主題之前，我想和大家一起再來看一下本文章系列***篇中的一個Demo：ASPNETAJAXTest。我現在將其中的客戶端代碼重新貼在這里。

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:ScriptReferencePath="~/ajax.js"/＞  
Scripts＞  
＜Services＞  
＜asp:ServiceReferencePath="~/SayHelloService.asmx"/＞  
Services＞  
asp:ScriptManager＞  
＜div＞  
＜inputid="btnSayHello"type="button"value=
"SayHello"onclick="btnSayHello_onClick()"/＞  
＜divid="result"＞div＞  
＜/div＞  
＜/form＞  
＜/body＞  
＜/html＞ 

ajax.js:

//單擊btnSayHello時調用的JS函數  
functionbtnSayHello_onClick(){  
SayHelloService.SayHello(OnSucceeded,OnFailded);  
}  
//成功時的回調函數  
functionOnSucceeded(reusltText){  
$get("result").innerHTML=reusltText;  
}  
//失敗時的回掉函數functionOnFailded(error){  
$get("result").innerHTML="調用失敗。錯誤信息："+error.get_message();  
} 

這是一種我們很熟悉的JavaScript編程模式：以DOM操作為基礎。在這種編程模式下，所有頁面元素被看成一個樹狀的DOM元素集合，不論是取得數據還是改變頁面元素的屬性，都要使用相應的DOM操作。例如我們要取得某個文本框中的值，則首先使用 document.getElementById（在ASP.NET AJAX框架里可以縮寫為$get）方法取得這個文本框的DOM引用，然后獲取其value屬性的值。

這種編程模式，很容易給我們造成困惑，例如文本框、復選框、提交按鈕、普通按鈕的DOM表示都是“input”元素，另外還要使用如innerHTML這樣不是很直觀的名字設置div或span的值。其實對于開發人員，尤其是長期從事服務器端開發的人員來說，我們更希望將文本框看做TextBox，將復選框看做CheckBox，將按鈕看做Button，將div或span看做Label，而且，我們更希望使用label1.text這樣的語句設置div中的文本，而不是使用innerHTML。

幸運的事，ASP.NET AJAX的開發人員顯然考慮到了這一點，現在ASP.NET AJAX框架允許我們使用類似服務器端那種組件式的編程模式來進行客戶端編程。

【編輯推薦】

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