前陣子CodePlex釋出了ASP.NET AJAX 4.0 Preview 3,本來我是渾然不覺的,直到在PDC 2008的課程影片裡看到神奇的示範...

這個新鮮玩意叫做ASP.NET AJAX Client Templates,簡單來說,就是把大家已經很熟悉的WebControl Template概念移至Client端以Javascript端實作。以下的語法對寫過一陣子程式的ASP.NET開發者應該不陌生:

   1:      <form id="form1" runat="server">
   2:      <div>
   3:      <asp:GridView ID="GridView1" runat="server" 
   4:          AutoGenerateColumns="False">
   5:          <Columns>
   6:              <asp:TemplateField HeaderText="NameEval">
   7:                  <ItemTemplate>
   8:                      <asp:Label ID="Label1" runat="server" 
   9:                      Text='<%# Eval("Name_Eval") %>'></asp:Label>
  10:                  </ItemTemplate>
  11:              </asp:TemplateField>
  12:              <asp:TemplateField HeaderText="NameBind">
  13:                  <ItemTemplate>
  14:                      <asp:Label ID="Label2" runat="server" 
  15:                      Text='<%# Bind("Name_Bind") %>'></asp:Label>
  16:                  </ItemTemplate>
  17:              </asp:TemplateField>
  18:              <asp:TemplateField HeaderText="NameFuncEval">
  19:                  <ItemTemplate>
  20:                      <asp:Label ID="Label3" runat="server" 
  21:       Text='<%# CvrtStr(Eval("Name_Func_Eval")) %>'></asp:Label>
  22:                  </ItemTemplate>
  23:              </asp:TemplateField>

在ASPX中穿插<%# ... %>就可以將動態內容注入到要顯示的結果中,十分直覺易寫。不過,將產生UI元素的邏輯儘可能由Server端抽離,移至Client端完成,看來應是未來的主流哲學,ASP.NET AJAX也漸漸會向"Pure AJAX"的目標挺進。換句話說,過去使用UpdatePanel,來回傳送大量ViewState、在Server端組合HTML送至Client更新局部內容的做法,將會慢慢被淘汰。(還為自己不懂Javascript也寫得出AJAX而沾沾自喜的朋友,要小心將來一夕變天)

ASP.NET AJAX Template的概念相同,先不要扯到太複雜的前後端結合,我用一個最簡單的例子示範一下:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
    <asp:ScriptReference Path="~/Inc/jQuery/jquery.js" />
    <asp:ScriptReference Path="~/MicrosoftAjaxTemplates.debug.js" />
    </Scripts>
</asp:ScriptManager>
<script type="text/javascript">
    $(function() {
        var dv = $create(Sys.UI.DataView, {}, {}, {}, $get("tbTemplate"));
        var people = [
            { Id: "A01", Name: "Jeffrey Lee", 
              Score: 32767, RecTime: new Date() },
            { Id: "A02", Name: "Fox Mulder",
              Score: 6242.25,
              RecTime: Date.parseInvariant("2008-11-05 12:00:50", 
              "yyyy-MM-dd HH:mm:ss") },
            { Id: "A03", Name: "Dana Scully",
                Score: 8391.66, RecTime: new Date(2008, 6, 15) }
            ];
        dv.set_data(people);
        $("#tbTemplate").show();
    });        
</script>
<table border="1" cellspacing="0" cellpadding="0" 
 style="font-size: 9pt; width: 300px;">
<thead>
    <tr><th>Id</th><th>Name</th><th>Score</th><th>Record Time</th></tr>
</thead>
<tbody id="tbTemplate" style="display:none; padding: 3px;">
    <tr>
        <td style="text-align: center;">{{Id}}</td>
        <td>{{Name}}</td>
        <td style="text-align: right;">{{Score.format("N2")}}</td>
        <td style="text-align: center;">
        {{RecTime.format("yyyy/MM/dd HH:mm:ss")}}</td>
    </tr>
</tbody>            
</table>

補充幾個重點:

  1. MicrosoftAjaxTemplates.debug.js可由Asp.Net AjaxPreview 3取得,debug.js是易讀的原始碼版本,方便學習及偵錯,js則是可用於正式環境的壓縮版,能大幅減少網路傳輸。
  2. 注意到了嗎? jQuery可以跟ASP.NET AJAX相輔相成,在jQuery的網頁初始函數$(function())中$create(Sys.UI.DataView)建立將Table的TBody部分設定成DataView。
  3. var people = [ { }, { } ]的簡要寫法才剛介紹過,目的要建出一個由Object組成的Array當成Data Source。在實際運用上,當然不會是用Javascript Hardcoding資料源,資料源多半會由WCF、Web Service或ADO.NET Data Service以JSON方式傳過來。
  4. 一開始先將tbody設為隱藏,等set_data(相當於Server-Side的DataBind())後再顯示出來。
  5. Bind資料的語法是{{ object_property_name }}。
  6. 有沒有看到Score.format("N2"), RecTime.format("yyyy/MM/dd HH:mm:ss"), Date.parseInvariant("2008-11-05 12:00:50","yyyy-MM-dd HH:mm:ss") ? 這些方便的格式化功能是ASP.NET AJAX Data Type Extension做的功德,大家可別放著不用自己DIY呀~~

是不是很簡潔有力呢? 至少對酷愛用Javascript處理前端邏輯的我來說,它十分迷人。關於ASP.NET AJAX Client Templates,微軟有份完整的Tutorial,但略為複雜,這陣子我會再試著用淺顯的例子展示一些神妙之處,敬請期待。


Comments

# by River

謝謝您常常發表許多文章在您的 Blog 上學習到了許多。 非常同意您的說法 "ASP.NET AJAX也漸漸會向"Pure AJAX"的目標挺進。" 所以最近也在看 Javascript Template 的應用。找了許多, 最後才找到了一個 trimpath.template 的方案。 才剛剛 完成而已,又看到這個消息~ 真是晴天霹靂呀~ 我想我最後還是會換成 Asp.net ajax 的版本吧。

# by maxi

我是覺得把CODE內嵌到.aspx以後會引起很大的痛苦...

# by Jones

Code是在WCF中的。前台页面只是绑定.

# by ola

您好,我照著您的說明,在VS2010裡面開一個新的頁面,然後將程式碼貼上,但是在「dv.set_data(people);」這句卻一值出現「物件不支援此屬性或方法」,不知道您在測試時是否有發生同樣的問題,亦或是還要引用其他的檔案? 謝謝。

# by Jeffrey

to ola, MS目前在策略上傾向用jQuery解決前端的需求,因此另有jQuery Templates的提議(http://bit.ly/d4ZRWl),本文所提的屬於ASP.NET AJAX 4 Preview階段的設計,到後來是否做了修改? 我倒未再追蹤。不過,由你的錯誤訊息來看,可檢查一下~/MicrosoftAjaxTemplates.debug.js是否有正常載入執行?

# by Adaming

哈,還是用 jQuery 寫,又小又快又省 上例的 var people = XXX , 其實可以改用 jQuery 的 $.ajax() 抓後端的資料後,再自己寫code跑 for (var i in data) {} 的方式組出下面的 table 資料。 重點在於 ASP.NET AJAX 4.0 只是實驗品,用的人應該不會太多…還是好好學 jQuery 吧,跨語言又跨瀏覽器。 ASP.NET AJAX 4.0→又大又肥又麻煩 jQuery →小巧可愛很有力 jQuery : write less, do more. 微軟老是喜歡自創一堆跟非標準的玩具,自家的工具,如 IE6 又爛又打不死,但…沒有 IE6 ,Firefox 跟 Chrome 就紅不起來了。

# by 小口

小弟我寫過一陣子 asp.net 程式,對於跨瀏覽器的問題很是頭疼,所以 jQuery 的出現,似乎看見了屬光;不知 版主,可否使用 jQuery 實現同一範例?

# by Jeffrey

to 小口,微軟在Web Client端的開發重心已逐漸將轉移到jQuery,去年發表了一個基於jQuery的Templates Plugin,幾乎就是同樣的概念移到jQuery實現,關於jQuery Templates Plugin的使用,可參考我的系列筆記文章http://blog.darkthread.net/post-2010-12-05-jquery-templates-lab-1.aspx (第一篇筆記有提到ASP.NET Client Templates,事實上,{{ ... }}的語法還在jQuery版重現了呢 :P )

Post a comment