SharePoint 2010中的客户端AJAX应用——对话框显示详细信息页

SharePoint 2010中的客户端AJAX应用——对话框显示详细信息页2011-01-11 博客园 SunmoonfireASP.Net AJAX模板是一门全新的引人注目的客户端技术，允许开发者快速构建AJAX易于维护的交互式应用程序。由于ASP.Net AJAX模板和SharePoint 2010都支持oData协议，因此两者结合在一起将是一个强大的组合。

SharePoint 2010 之所以可以带给人们Web 2.0的外观和感觉很大一部分要归功于其弹出式模式对话框的使用。为了进一步丰富上一篇中的AJAX应用，我们在每张卡片上挂接一个操作，打开一个对话框以便对该卡片做更细致的处理。在之前的使用SharePoint 2010模式对话框一文中，我们学习了如何在模式对话框中打开远端的页面，以及如何响应对话框确定或取消事件。本文中的模式对话框会更进一步，基于本地的HTML内容打开对话框。

首先，我们在前文中做好的索引卡上添加一个编辑图标。我们将在其上挂接打开模式对话框的操作：

1 <div class="userStoryTitle">
2     {{ 标题 }}
3     <span class="userStoryButtons">
4         <a href="#" onclick="javascript:openDialog（）; return false;">
5             <img src="/_layouts/images/edititem.gif" />
6         </a>
7     </span>
8 </div>

为了先简单测试一下打开对话框的效果，同时也复习一下前面学习的模式对话框的使用，我们编写如下的打开对话框代码：

1 function openDialog（） {
2     var options = {
3         url: "http://www.cnblogs.com/Lists/UserStories/DispForm.aspx？Id=1",
4         width: 800,
5         height: 600,
6         title: "User Story",
7     };
8     SP.UI.ModalDialog.showModalDialog（options）;
9 }

显然硬编码的URL中的参数id不是最佳做法，这里只是作为示范。结果看起来像这样：

这是一个非常有用的技术，允许我们在不离开现有的SharePoint网页的情况下打开一个对话框，使用户可以直接浏览另一个网页。然而，在这里我们希望我们的应用程序中编辑的信息是在浏览器的内存里（通过ASP.Net AJAX模板存储数据）。该showModalDialog（）函数可以支持这一方案，但要稍微复杂一些。