Wow! ASP.NET AJAX Client Templates!

2008-11-25 12:54 PM

前陣子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>

補充幾個重點:

MicrosoftAjaxTemplates.debug.js可由Asp.Net AjaxPreview 3取得，debug.js是易讀的原始碼版本，方便學習及偵錯，js則是可用於正式環境的壓縮版，能大幅減少網路傳輸。
注意到了嗎? jQuery可以跟ASP.NET AJAX相輔相成，在jQuery的網頁初始函數$(function())中$create(Sys.UI.DataView)建立將Table的TBody部分設定成DataView。
var people = [ { }, { } ]的簡要寫法才剛介紹過，目的要建出一個由Object組成的Array當成Data Source。在實際運用上，當然不會是用Javascript Hardcoding資料源，資料源多半會由WCF、Web Service或ADO.NET Data Service以JSON方式傳過來。
一開始先將tbody設為隱藏，等set_data(相當於Server-Side的DataBind())後再顯示出來。
Bind資料的語法是{{ object_property_name }}。
有沒有看到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

# 2008-11-25 08:16 PM by River

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

# 2009-06-08 04:01 AM by maxi

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

# 2009-07-18 12:31 PM by Jones

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

# 2010-06-11 02:40 AM by ola

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

# 2010-06-11 05:40 AM by Jeffrey

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

# 2010-06-24 12:53 AM 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 就紅不起來了。

# 2011-04-12 05:08 AM by 小口

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

# 2011-04-12 07:57 AM 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 )