SharePoint2010中的客户端AJAX应用-对话框显示详细信息页.docVIP

　　ASP.Net AJAX模板是一门全新的引人注目的客户端技术，允许开发者快速构建AJAX易于维护的交互式应用程序。由于ASP.Net AJAX模板和SharePoint 2010都支持oData协议，因此两者结合在一起将是一个强大的组合。 　　SharePoint 2010 之所以可以带给人们Web 2.0的外观和感觉很大一部分要归功于其弹出式模式对话框的使用。为了进一步丰富上一篇中的AJAX应用，我们在每张卡片上挂接一个操作，打开一个对话框以便对该卡片做更细致的处理。在之前的使用SharePoint 2010模式对话框一文中，我们学习了如何在模式对话框中打开远端的页面，以及如何响应对话框确定或取消事件。本文中的模式对话框会更进一步，基于本地的HTML内容打开对话框。 　　首先，我们在前文中做好的索引卡上添加一个编辑图标。我们将在其上挂接打开模式对话框的操作： 1　div　class=userStoryTitle2　　　　　{{　标题　}}3　　　　　span　class=userStoryButtons4　　　　　　　　　a　href=#　onclick=javascript:openDialog();　return　false;5　　　　　　　　　　　　　img　src=/_layouts/images/edititem.gif　/6　　　　　　　　　/a7　　　　　/span8　/div  HYPERLINK /2010_08_24/1282634590_ddvip_1984.png \t _blank 　　查看原图（大图） 　　为了先简单测试一下打开对话框的效果，同时也复习一下前面学习的模式对话框的使用，我们编写如下的打开对话框代码： 1　function　openDialog()　{2　　　　　var　options　=　{3　　　　　　　　　url:　/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不是最佳做法，这里只是作为示范。结果看起来像这样：  HYPERLINK /2010_08_24/1282634592_ddvip_6240.png \t _blank 　　查看原图（大图） 　　这是一个非常有用的技术，允许我们在不离开现有的SharePoint网页的情况下打开一个对话框，使用户可以直接浏览另一个网页。然而，在这里我们希望我们的应用程序中编辑的信息是在浏览器的内存里（通过ASP.Net AJAX模板存储数据）。该showModalDialog()函数可以支持这一方案，但要稍微复杂一些。 　　模式对话框方式打开本地HTML内容 　　首先，我们需要一个HTML元素用于弹出。作为用来测试的一个初稿，我们使用如下的html内容： 1　div　id=userStoryDetails2　　　　　Hello　World!3　/div 　　由于我们传递给showModalDialog()的options参数支持一个html参数来替代url参数，因此猜测可能看起来我们只需要简单地在openDialog中获取到userStoryDetails元素并作为选项传递即可。然而，这一做法有一个问题。默认SharePoint的 showModalDialog()函数将销毁传递给它的DOM元素。结果是对话框只可以打开一次，再次打开就会失败。 　　为了避免这种行为，我们可以在一个全局变量中缓存该DOM元素，而不是放在函数层中作为一个局部变量。代码如下所示： 01　var　userStoryDetails;02　　03　Sys.onReady(function　()　{04　　　　　userStoryDetails　=　document.getElementById(userStoryDetails);05　　　　　...06　});07　　08　function　openDialog()　{09　　　　　var　options　=　{10　　　　　　　　　html:　userStoryDetails,11　　　　　　　　　width:　600,12　　　　　　　　　height:　300,13　　　　　　　　　title:　User　Story,14　　　　　};15　　　　　SP.UI.ModalDialog.showModalDialo