Client AJAX applications in SharePoint 2010-saving data to SharePoint

Source: Internet
Author: User
Tags json

This article is part of the SharePoint 2010 client Ajax application family. The 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 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 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 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>
One </div>
12 <div class= "userstorydescription" ><div>{binding description}</div>

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

Now our pop-up window looks like this:

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.