Wow! ASP.NET AJAX Client Templates!
8 |
前陣子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
# 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 )