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对象。

我们使用在线绑定的方式对上一篇中的详细信息弹出页重新进行编写：

<div id="userStoryDetails" class="sys-template">
 <table class="ms-formtable" width="100%">
    <tr>
      <td class="ms-formlabel" width="190">标题:</td>
      <td class="ms-formbody"><input type="text" sys:value="{ binding 标题 }" /></td>
    </tr>
......

这样，用户就可以修改字段值了。但是给人的印象不深刻，因为用户在卡片上看不到修改的结果。这个问题可以通过修改卡片标题为单向绑定语法来解决：

<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><tr><td width="100%">{ binding 标题 }</td>
          <td class="userStoryButtons" width="22">
              <a  href="#" onclick="javascript:openDialog(); return false;"  sys:command="select">
                <img alt="edit" src="/_layouts/images/edititem.gif">
              </a>
          </td>
          </tr></table>
     </div>
          <div class="userStoryDescription"><div>{ binding 描述 }</div>
     </div>
</div>

注意：单向在线绑定语法看起来和双向绑定语法相同。这是因为ASP.Net AJAX模板在绑定到输入类的表单元素时会自动使用双向绑定。

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

当页面上任何带有双向绑定的字段失去焦点后，其他单向绑定的元素会自动反映出变化。

保存到SharePoint

至此我们已经做的很不错了，但只要用户刷新页面值就会恢复。这是因为我们并没有将值持久存储到SharePoint中。好在这是非常容易做的。调用dataContext.saveChanges()即可。

我们希望保存发生在用户点确定按钮时。假设我们在调用SP.UI.ModalDialog.showModalDialog时为dialogReturnValueCallback指定了onDialogClose函数，则我们的代码应该是这样的：

function onDialogClose(dialogResult, returnValue) {
	if (dialogResult == SP.UI.DialogResult.OK) {
		dataContext.saveChanges();
	}
}

正是这样！值现在保存回SharePoint了。刷新页面可以看到，值确实已经更新了。整个过程在幕后发生了什么呢？

批处理

如果我们打开Fiddler监视HTTP流，然后再点确定，我们会看到一个发送到 _vti_bin/ListData.svc/$batch 的POST。该POST的Body如下：

--batch_6a0f-e242-9a9d
Content-Type: multipart/mixed;boundary=changeset_cdf6-cbaf-1c73


--changeset_cdf6-cbaf-1c73
Content-Type: application/http
Content-Transfer-Encoding: binary

MERGE http://sp2010u/_vti_bin/listdata.svc/UserStories(8) HTTP/1.1
If-Match: W/"4"
Host: sp2010u
Accept: application/json
Accept-Charset: utf-8
Content-Type: application/json;charset=utf-8

{"__metadata":{"uri":"http://sp2010u/_vti_bin/listdata.svc/UserStories(8)",
 "etag":"W/\"4\"",
"type":"Microsoft.SharePoint.DataService.UserStoriesItem"},
 "内容类型ID":"0x010800C0435A81F6FE924EB7BC2FF2687623C3",
"标题":"Story No.8 UPDATE!",
"前置......

"描述":"Where is the stop of bus No. 332? ",
"X":237,
"Y":20,
"点数":"3",

......

"路径":"/Lists/UserStories"}
--changeset_cdf6-cbaf-1c73--
--batch_6a0f-e242-9a9d--

ASP.Net AJAX模板持续跟踪了所有JSON对象的所有变更，当调用saveChanges()时通过挂接到一个大JSON上批量将他们发送回去。这意味着我们可以编写较少的代码就可以实现健壮的，高性能的应用程序。相当强大啊！

还原变更

现在，我们的应用程序唯一剩下没有完成的功能就是在用户点了取消时恢复变更，不幸的是没有找到一种优雅的方式实现这一功能。我们所能做的只能是调用dataView.fetchData()重新从服务器上获取所有数据。所以，最终我们的onCloseDialog如下所示：

 

function onDialogClose(dialogResult, returnValue) {
	if (dialogResult == SP.UI.DialogResult.OK) {
		dataContext.saveChanges();
	}
	if (dialogResult == SP.UI.DialogResult.cancel) {
		dataView.fetchData();
	}
}

总结

到目前为止，我们已经看到，在页面上显示多个列表项时，模板是一种更易于维护的方式。我们也看到了主项和详细信息页的方式，可以简化用户的工作，并使用户界面更简洁。在本文中，我们还学习了在线绑定功能，实现了批量保存数据回SharePoint。

 

参考资料

Client Side AJAX Applications in SharePoint 2010 - Part7:Live Bindings