AJAX 之 PageMethod

之前使用 Asp.Net 時，一直使用 UpdatePanel。這個實在是好用。
但是，我卻誤解了，誤以為使用 Ajax 一定會降低頻寬。

我寫了一個範例 , 一個使用傳統的 UpdatePanel，一個使用 PageMethod。
可以使用 fiddler 之類的工具，查到ajax 所使用的 request 及 response 內容。

大小差別如附圖。

使用 UpatePanel 的版本，Request (244 bytes)及 Response(648 bytes) 的內容竟然包山包海，根本無法將傳輸的資料量降低。

竟然還有 __VIEWSTATE!? 

原來，asp.net ajax team 當初設計 UpdatePanel 的目的，在於簡化開發的過程。因此對於傳回的 request 內容 ，幾乎等同於未 ajax 的版本。相同地， Response 也是幾乎等同於未 ajax 的版本。只不過不必自己塞到不同的 html control 內了。

 

相反地，使用 PageMethod 是一個相當經清的方法。

1. 將 ScriptManager 的 EnablePageMethods 屬性設寫 true
2. 在 code behind 程式加上這一段
   

       [WebMethod]
       [ScriptMethod]
       public static string GetCurrentTime()
       {
         return DateTime.Now.ToString();
       }

3. 最後，要寫 javascript，讓 button click 時呼叫

function Button2_onclick() {
  PageMethods.GetCurrentTime(ShowTime);
}

function ShowTime(value)
{
  $get("Label2").innerHTML = value;
}

這樣的好處是，傳輸的資料可直接控制。Requet 0 bytes，Response 27 bytes。
Response 的內容為 {"d":"8/4/2008 3:20:09 PM"}。夠精簡吧。 不過這樣一來，資料的內容要塞到 html control 的功夫可不小啊。範例中的simple case，簡直不可能發生。
想想當要顯示一個客戶資料到一個 DetailView 要花多少的javascript程式碼啊!!!