Client AJAX applications in SharePoint 2010-saving data to SharePoint

This article is part of the SharePoint 2010 client Ajax application family. The ASP.net ajax template is a brand new and compelling client technology that allows developers to quickly build Ajax-friendly interactive applications that are easy to maintain. Because the asp.net ajax template and SharePoint 2010 support the OData protocol, the combination of the two will be a powerful combination. This article will focus on how to save data back to SharePoint using the online binding syntax of the ASP.net AJAX template.

One-way, two-way online binding

The read-only template syntax {{[Field name]}} We used earlier is not only a simple string connection, but also a preferred solution for replacing the traditional JSON-to-HTML approach. However, the real sparkle of asp.net ajax templates is to save the data back to SharePoint (or any OData provider it uses). This syntax, called online binding, contains two forms: bidirectional and one-way data binding. Let's take a look at bidirectional data binding first.

In order to achieve bidirectional data binding, we simply place an INPUT element on the page and set its value to {Binding [field name]}. When it is displayed on the page, the template engine replaces the binding syntax with the current JSON object, which is the same as a one-way binding. However, when the user modifies the value, the template engine automatically updates the JSON object in the background memory.

We use the online bindings to rewrite the details pop-up page in the previous article:

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

This allows the user to modify the value of the field. But the impression is not impressive, because the user can not see the changes in the card. This problem can be solved by modifying the card title for one-way binding syntax:

<div id= "userstorieslist" class= "sys-template userstorybackground" xmlns:sys= "Javascript:sys" >
<div class= "Userstorycard" sys:style= {' Left: ' +x+ ' px;top: ' +y+ ' px; '}} '
<div class= "Userstorytitle"
<table border=0 cellpadding=0 CELLSPACING=0&G T;<TR><TD width= "100%" >{binding title}</td>
<td class= "Userstorybuttons" width= T　　
<a href= "#" onclick= "Javascript:opendialog (); return false;"　　　　　　　　　　　　　　　sys:command= "Select"
08　　　　　　　　　　　</a>
</td>
</tr></table>
One </div>
12 <div class= "userstorydescription" ><div>{binding description}</div>
</div>
;/div>

Note: The one-way online binding syntax looks the same as the bidirectional binding syntax. This is because asp.net ajax templates automatically use bidirectional binding when binding to form elements of the input class.

Now our pop-up window looks like this: