ASP.NET AJAX Templates - Data Binding與Master-Detail連動

【ASP.NET AJAX Templates系列】

• Wow! ASP.NET AJAX Client Templates!
• UpdatePanel招誰惹誰?
• WCF For Client Script
• 使用宣告法

先前的ASP.NET AJAX Templates介紹都集中在如何將資料反應到顯示元素上，記得嗎? 在Server Control Template中，我們可以寫Eval也可以寫Bind，當使用Bind時，更改Template裡的資料，會反應回原始的資料來源上，這在ASP.NET AJAX Client Templates也做得到!

進一步來說，ASP.NET AJAX Client Templates的Binding寫法有三種:

1. One-Way, One-Time:
   如同先前講過的{{ propName }}寫法，set_data時會將資料值寫入，之後就不再有任何互動。
2. One-Way:
   要寫成{binding propName}，set_data後，若當初提供資料來源的Javascript物件變動，該值亦會自動更新。 最主要應用於Master-Detail的情境。
3. Two-Way:
   一樣是寫成{binding propName}，但若同一屬性用在兩個HTML元素上，則更改其中一個，另一個也會跟著變化。

接下來，我們就將前述宣告式AJAX Templates的例子，做一些修改，改裝成Master-Detail形式，並透過Two-Way Binding加上酷炫的編輯功能。

首先，原本的Table維持不變，但要多加一個dataview:sys-key="dataViewObjName"的屬性，如此，便可利用這個變數名稱存取背後的Sys.UI.DataView物件。而這個物件，也將會是Detail View要Bind的對象。

我們建立一個<div>內包<fieldset>做為簡陋的Detail View展示：

    <div

    sys:attach="dataview"

    dataview:data="{binding selectedData, source={{ master }}}"

    class="sys-template" style="font-size: 9pt; width:300px;"

    >

    <fieldset>

    Person: {{Id}} {{Name}} <br />

    Score=<input type="text" value="{binding Score}" />

    </fieldset>

    </div>

值得注意的是，Score分數的部分，我們用了<input>，value則寫成{binding Score} [Updated: 目前版本的解析邏輯不佳，大括號內名稱前後不要插入空白]，如此，當數字內容修改，就會反映回來源物件的Score屬性。但原先Table中我們寫的是<td style="text-align: right;">{{Score.format("N2")}}</td>，這是One-Time式Binding，不會即時反應值的變化，因此得改成{binding Score}的格式，但這衍生另一個問題，原來我們對數字做了格式化，加上千位號以及限定小數兩位，binding表示法裡必須直指Score，而不能用Score.format("N2")。要解決這個問題，要造convert函數，其表示法為{binding propName, convert=convertFuncName}。在我們的範例裡，我們新增一個函數fmtNum:

    <script type="text/javascript">

        function fmtNum(value) 

        { return parseFloat(value).format("N2"); }

    </script>

並改寫成<td style="text-align: right;">{binding Score, convert=fmtNum}</td>

如上圖所示，按了Id欄位，下方Detail View就會即時顯示所選取項目的內容，而修改Score後，修改後的分數會立即回饋到上方的Master View。

很酷吧!!