用戶端調用伺服器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional實現之小小比較

前幾天曾經發過一篇《ASP.NET AJAX(Atlas)和Anthem.NET——管中窺豹般小小比較》，Jeffrey Zhao說用ASP.NET AJAX中的UpdatePanel似乎不大好。我想了想確實如此，有些高射炮打蚊子的感覺。還有朋友希望我也能在比較中關照一下Ajax.NET Professional——同樣是個ASP.NET平台上非常優秀的Ajax架構。

種種要求下，形成此文。本文將比較在ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional這三個知名ASP.NET上Ajax架構中實現用戶端調用伺服器端方法的實現。用戶端調用伺服器端方法是每一個Ajax架構都必須考慮的問題，非常具有代表性。在程式編寫過程中，我也將拋棄掉某些架構中提供的“智能的”伺服器端控制項（例如ASP.NET AJAX的UpdatePanel），而完全用手工JavaScript和C#實現，力求創造出較為“公平”的比較環境。

由於本文側重於“比較”，而不是“介紹”，所以對於基礎知識都一筆帶過。有需要詳細瞭解程式實現，或是希望重現實驗結果的朋友，可以下載本文附帶的代碼。

 

程式要實現的功能

程式功能很簡單，卻也足夠典型：

1. 使用者點擊頁面上的某個<input>按鈕
2. 瀏覽器執行該按鈕的用戶端JavaScript事件處理函數
3. 該JavaScript事件處理函數調用某伺服器端方法
4. 伺服器端方法執行並返回目前時間
5. 用戶端JavaScript回呼函數執行，將伺服器端返回的時間顯示在頁面中一個<span>中

 

程式運行介面

由於這三個程式的介面、行為以及實現功能都完全一致，所以這裡僅以ASP.NET AJAX(Atlas)版本的為例。下面是程式初始化之後的介面：

點擊按鈕，上面介紹的5個步驟將依次執行，最終得到如所示的結果，顯示出伺服器端時間：

 

ASP.NET AJAX(Atlas)版本的實現代碼

首先是頁面的HTML部分，注意ASP.NET AJAX(Atlas)專屬的ScriptManager控制項：

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />

    <span id="result" />

</div>

然後是用戶端JavaScript部分，注意用PageMethods.GetServerTime()這樣的形式調用伺服器端方法：

function btnGetServerTime_onclick() {

    PageMethods.GetServerTime(cb_getServerTime);

}

function cb_getServerTime(result) {

    document.getElementById("result").innerHTML = result;

}

伺服器端代碼如下，注意方法必須為靜態，且添加[System.Web.Services.WebMethod]和[Microsoft.Web.Script.Services.ScriptMethod]兩個屬性：

[System.Web.Services.WebMethod]

[Microsoft.Web.Script.Services.ScriptMethod]

public static string GetServerTime()

{

    return DateTime.Now.ToString();

}

OK！

 

Anthem.NET版本的實現代碼

首先是頁面的HTML部分，沒什麼過多需要注意的：

<div>

    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />

    <span id="result" />

</div>

用戶端JavaScript部分，注意用Anthem_InvokePageMethod輔助函數調用伺服器端方法：

function btnGetServerTime_onclick() {

    Anthem_InvokePageMethod("GetServerTime", [], cb_getServerTime);

}

function cb_getServerTime(result) {

    document.getElementById("result").innerHTML = result.value;

}

最後是伺服器端代碼，注意Page_Load中要註冊一下（與ASP.NET AJAX中的ScriptManager有異曲同工之妙）。還有方法應用了[Anthem.Method]屬性：

[Anthem.Method]

public string GetServerTime()

{

    return DateTime.Now.ToString();

}

protected void Page_Load(object sender, EventArgs e)

{

    Anthem.Manager.Register(this);

}

OK！

 

Ajax.NET Professional版本的實現代碼

頁面的HTML部分和Anthem.NET版本的完全一致：

<div>

    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />

    <span id="result" />

</div>

用戶端JavaScript部分倒於與ASP.NET AJAX得有幾分神似，注意“ASP.ajaxpro_aspx”這個東西為本ASP.NET頁面編譯後的類名：

function btnGetServerTime_onclick() {

    ASP.ajaxpro_aspx.GetServerTime(cb_getServerTime);

}

function cb_getServerTime(result) {

    document.getElementById("result").innerHTML = result.value;

}

伺服器端代碼類似Anthem.NET版本的實現方式，同樣需要在Page_Load中註冊，且需要為方法應用一個屬性——不過這裡是[AjaxPro.AjaxMethod]：

[AjaxPro.AjaxMethod]

public string GetServerTime()

{

    return DateTime.Now.ToString();

}

protected void Page_Load(object sender, EventArgs e)

{

    AjaxPro.Utility.RegisterTypeForAjax(this.GetType());

}

OK！

 

實現方式比較

用圖表說話吧，我也同樣不再評論了：

 

原始碼下載

這個是我進行本次實驗所用到的程式原始碼：3ASPNETAJAXFrameworksTest.zip