SharePoint 2010中的客户端AJAX应用——保存数据至SharePoint

本文是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模板在绑定到输入类的表单元素时会自动使用双向绑定。

现在我们的弹出窗口如下所示：