Wow! ASP.NET AJAX Client Templates!

   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>

<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>

# River said on 25 November, 2008 08:16 PM

謝謝您常常發表許多文章在您的 Blog 上學習到了許多。

非常同意您的說法  "ASP.NET AJAX也漸漸會向"Pure AJAX"的目標挺進。"

所以最近也在看 Javascript Template 的應用。找了許多, 最後才找到了一個 trimpath.template 的方案。

才剛剛 完成而已，又看到這個消息~  真是晴天霹靂呀~

我想我最後還是會換成 Asp.net ajax 的版本吧。

# maxi said on 08 June, 2009 02:00 AM

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

# Jones said on 18 July, 2009 10:29 AM

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

# ola said on 11 June, 2010 12:40 AM

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

# Jeffrey said on 11 June, 2010 03:40 AM

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

# Adaming said on 23 June, 2010 10:54 PM

哈，還是用 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 就紅不起來了。

# 小口 said on 12 April, 2011 05:08 AM

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

# Jeffrey said on 12 April, 2011 07:57 AM

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

你的看法呢?

標題 (必要的) 

姓名 (必要的) 

你的URL (選擇性的)

意見 (必要的) 

Remember Me?

(提醒: 因快取機制，您的留言幾分鐘後才會顯示在網站，請耐心稍候)

CAPTCHA / 驗證碼 :

5 + 3 =

搜尋