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

ASP.Net AJAX模板是一门全新的引人注目的客户端技术，允许开发者快速构建AJAX易于维护的交互式应用程序。由于ASP.Net AJAX模板和SharePoint 2010都支持oData协议，因此两者结合在一起将是一个强大的组合。SharePoint 2010 之所以可以带给人们Web 2.0的外观和感觉很大一部分要归功于其弹出式模式对话框的使用。为了进一步丰富上一篇中的AJAX应用，我们在每张卡片上挂接一个操作，打开一个对话框以便对该卡片做更细致的处理。在之前的使用SharePoint 2010模式对话框一文中，我们学习了如何在模式对话框中打开远端的页面，以及如何响应对话框确定或取消事件。本文中的模式对话框会更进一步，基于本地的HTML内容打开对话框。首先，我们在前文中做好的索引卡上添加一个编辑图标。我们将在其上挂接打开模式对话框的操作：12标题345678查看原图（大图）为了先简单测试一下打开对话框的效果，同时也复习一下前面学习的模式对话框的使用，我们编写如下的打开对话框代码：1functionopenDialog()2varoptions=3url:/Lists/UserStories/DispForm.aspx?Id=1,4width:800,5height:600,6title:UserStory,7;8SP.UI.ModalDialog.showModalDialog(options);9显然硬编码的URL中的参数id不是最佳做法，这里只是作为示范。结果看起来像这样：查看原图（大图）这是一个非常有用的技术，允许我们在不离开现有的SharePoint网页的情况下打开一个对话框，使用户可以直接浏览另一个网页。然而，在这里我们希望我们的应用程序中编辑的信息是在浏览器的内存里（通过ASP.Net AJAX模板存储数据）。该showModalDialog()函数可以支持这一方案，但要稍微复杂一些。模式对话框方式打开本地HTML内容首先，我们需要一个HTML元素用于弹出。作为用来测试的一个初稿，我们使用如下的html内容：12HelloWorld!3由于我们传递给showModalDialog()的options参数支持一个html参数来替代url参数，因此猜测可能看起来我们只需要简单地在openDialog中获取到userStoryDetails元素并作为选项传递即可。然而，这一做法有一个问题。默认SharePoint的 showModalDialog()函数将销毁传递给它的DOM元素。结果是对话框只可以打开一次，再次打开就会失败。为了避免这种行为，我们可以在一个全局变量中缓存该DOM元素，而不是放在函数层中作为一个局部变量。代码如下所示：01varuserStoryDetails;0203Sys.onReady(function()04userStoryDetails=document.getElementById(userStoryDetails);05.06);0708functionopenDialog()09varoptions=10html:userStoryDetails,11width:600,12height:300,13title:UserStory,14;15SP.UI.ModalDialog.showModalDialog(options);16有了这个代码，我们就可以多次关闭和打开模式对话框了。结果如下所示：查看原图（大图）接下来我们来处理对话框操作完成后的结果。在前面的文章中我们也介绍过做法。首先在对话框的代码中调用commonModalDialogClose()，然后在主窗口中实现回调函数，以便SharePoint在关闭弹窗时调用。修改我们的userStoryDetails内容，增加调用commonModalDialogClose()的代码如下：01020814请注意commonModalDialogClose()第一个参数，是一个DialogResult。这个参数非常重要，因为我们的回调函数将通过此方法，区分不同的对话框关闭方式。例如，当用户点击在右上角的X时，SharePoint会传递DialogResult.cancel作为第一个参数。commonModalDialogClose()的第二个参数会直接作为回调函数的第二个参数进行传递。为了关闭对话框时对结果进行处理，我们可以为showModalDialog函数的options参数中增加一个dialogReturnValueCallback参数。结果如下：01functionopenDialog()02varoptions=03html:userStoryDetails,04width:800,05height:600,06title:UserStory,07dialogReturnValueCallback:onDialogClose08;09SP.UI.ModalDialog.showModalDialog(options);101112functiononDialogClose(dialogResult,returnValue)13if(dialogResult=SP.UI.DialogResult.OK)14alert(_)/拜拜!);1516if(dialogResult=SP.UI.DialogResult.cancel)17alert(returnValue);1819现在我们可以打开和关闭SharePoint模式对话框并处理结果。如果需要，我们还可以对模式对话框的options中的其他参数进行调整。例如的 X，Y，allowMaximize，showMaximized和showClose。这方面的文档很少，希望MSDN上的这个页面在不久的将来能够更新。接下来，我们要正式进行对话框内容的编写。显示selectedData为了可以显示当前选定的项目，我们将需要将弹出对话框中的HTML绑定到当前选中的列表项。下面是一个最简单的例子：1 标题 注意其中sys-template类的使用。在上一篇博文中我们说过，任何dataView依附的元素都需要加上这个类。用于在页面加载时将该元素设为display:none，dataView显示时会将其设回到display:block。接下来，我们需要第二个dataView对象来绑定对话框中显示的HTML内容。1detailsDataView = Sys.query(#userStoryDetails).dataView().get(0);注意，我们并没有像第一个dataView那样设置dataProvider或fetchOperation。原因是我们将绑定其data属性到主dataView的selectedData属性，如下所示：1$create(Sys.Binding,2source:dataView,3path:selectedData,4target:detailsDataView,5targetProperty:data6);selectedData 是DataView的一个特殊属性，代表当前选定的项目。现在离我们完成主-子关系的应用场景已经非常接近了。剩下的主要任务就是告诉主DataView 什么时侯更新 selectedData。我们可以通过在主DataView的模板中的某个元素上添加sys:command=select来完成该任务。添加到打开该模式对话框的按钮上应该最合乎逻辑：12345现在，我们完成了如下所示的逻辑：查看原图（大图）显示主项对应的详细信息 到目前为止，我们所显示的信息过于单薄了。在后面的博文中，我们会实现对字段内容的编辑和保存功能。本文中，我们仅仅再多加些只读字段。01020304标题:05标题060708点数:09点数10111213创建于14String.format(0:yyyy-M-ddh:mtt,创建时间)15161820212223关于上面的详细信息视图，有两处需要注意。其一，我们可以显示像点数这样的没有在主dataView出现过的字段（假设在列表中有这个字段）。之所以可以，是因为主dataView实际上默认情况下是下载了列表的所有字段。关于如何从相关的列表中获取数据也是我们在将来博文中要讨论的一个话题。其二，我们处理日期时间的方式是如此简单。String.format是AJAX库提供的一个方法，可以用于格式化SharePoint提供的酷似C#/VB中的日期格式，使其变成读者可以接受的格式。以下是我们做好的新的详细信息视图：查看原图（大图）下面是至今为止整个应用程序的源代码：001002003004005006007008009010011012.sys-template013014display:none;015016.userStoryBackground017018background-image:url(Images/corkboard.png);019width:695px;020height:397px;021022.userStoryCard023024border:1pxsolid#777777;025width:206px;026height:124px;027cursor:move;028background-image:url(Images/blankcard.png);029margin:4px;030031.userStoryDescription032033padding:5px;034line-height:1.2;035036.userStoryTitle037038font-weight:bold;039padding:2px5px0px5px;040041.userStoryButtons042043position:absolute;044right:0px;045padding:2px2px00;046047.userStoryButtonsimg048049border:0none;050051052053054055056057058059Sys.require(060Sponents.dataView,061Sponents.openDataContext,062);063vardataContext;064vardataView;065varuserStoryDetails;066vardetailsDataView;067068069Sys.onReady(function()070userStoryDetails=document.getElementById(userStoryDetails);071072dataContext=Sys.create.openDataContext(073serviceUri:/_vti_bin/ListData.svc,074mergeOption:Sys.Data.MergeOption.appendOnly075);076077dataView=Sys.query(#userStoriesList).dataView(078dataProvider:dataContext,079fetchOperation:UserStories,080feachParameters:orderby:标题,081autoFetch:true,082rendered:onRendered083).get(0);084085detailsDataView=Sys.query(#userStoryDetails).dataView().get(0);086087$create(Sys.Binding,088source:dataView,089path:selectedData,090target:detailsDataView,091targetProperty:data092);093);094functiononRendered()095$(.userStoryCard).draggable(096stop:onDragStop097);098099functiononDragStop(event,ui)100varuserStoryCard=ui.helper0;101varselectedUserStoryJsonObject=dataView.findContext(userStoryCard).dataItem;102varnewX=ui.position.left;103varnewY=ui.position.top;104Sys.Observer.setValue(selectedUserStoryJsonObject,X,newX);105Sys.Observer.setValue(selectedUserStoryJsonObject,Y,newY);106dataContext.saveChanges();107108109functionopenDialog()110varoptions=111html:userStoryDet