本文是SharePoint 2010用戶端AJAX應用系列的一部分。ASP.Net AJAX模板是一門全新的令人信服的用戶端技術,允許開發人員快速構建AJAX易於維護的互動式應用程式。由於ASP.Net AJAX模板和SharePoint 2010都支援oData協議,因此兩者結合在一起將是一個強大的組合。本文將重點介紹如何使用ASP.Net AJAX 模板的線上綁定文法將資料儲存回SharePoint。
單向、雙向的線上綁定
前面我們使用的唯讀模板文法{{ [欄位名] }}並不僅僅是一個簡單的字串串連,同時還是用於替代傳統JSON轉HTML方法的首選解決方案。然而,ASP.Net AJAX模板真正的閃光點在於將資料儲存回SharePoint(或者任何它所使用的oData提供者)。該文法稱為線上綁定,包含兩種形式:雙向和單向資料繫結。我們先來看一下雙向資料繫結。
為了實現雙向資料繫結,我們只需在頁面上放置一個INPUT元素並設定其值為{ binding [欄位名] }。當它顯示在頁面上時,模板引擎會使用當前的JSON對象替換該綁定文法,這一點和單向綁定是一樣的。但是當使用者修改了其中的值時,模板引擎會自動更新後台記憶體中的JSON對象。
我們使用線上綁定的方式對上一篇中的詳細資料彈出頁重新進行編寫:
1 <div id="userStoryDetails" class="sys-template">
2 <table class="ms-formtable" width="100%">
3 <tr>
4 <td class="ms-formlabel" width="190">標題:</td>
5 <td class="ms-formbody"><input type="text" sys:value="{ binding 標題 }" /></td>
6 </tr>
7 ......
這樣,使用者就可以修改欄位值了。但是給人的印象不深刻,因為使用者在卡片上看不到修改的結果。這個問題可以通過修改卡片標題為單向綁定文法來解決:
01 <div id="userStoriesList" class="sys-template userStoryBackground" xmlns:sys="javascript:Sys">
02 <div class="userStoryCard" sys:style="{{ 'left:'+X+'px;top:'+Y+'px;'}}">
03 <div class="userStoryTitle">
04 <table border=0 cellpadding=0 cellspacing=0><tr><td width="100%">{ binding 標題 }</td>
05 <td class="userStoryButtons" width="22">
06 <a href="#" onclick="javascript:openDialog(); return false;" sys:command="select">
07 <img alt="edit" src="/_layouts/images/edititem.gif">
08 </a>
09 </td>
10 </tr></table>
11 </div>
12 <div class="userStoryDescription"><div>{ binding 描述 }</div>
13 </div>
14 </div>
注意:單向線上綁定文法看起來和雙向繫結文法相同。這是因為ASP.Net AJAX模板在綁定到輸入類的表單元素時會自動使用雙向繫結。
現在我們的快顯視窗如下所示: