注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

忘忧草的博客

品味人生--精通IT管理和技术

 
 
 

日志

 
 
 
 

Client Side AJAX Applications in SharePoint 2010-Modal Dialogs(转)  

2012-02-22 21:38:05|  分类: Moss2010 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

最近研究MOSS2010的弹出窗口JS脚本。无意中看到老外的一个博客,写的很好。特转发如下:

Modaling to Another Page

To get started let’s throw an edit icon onto the index cards we’ve built previously that will open a modal dialog:

 
1 <div class="userStoryTitle">
2     {{ Title }}
3     <span class="userStoryButtons" sys:command="select">
4         <a href="#" onclick="javascript:openDialog(); return false;">
5             <img src="/_layouts/images/edititem.gif" />
6         </a>
7     </span>
8 </div>

There’s nothing fancy going on here yet, just a call to an as yet unimplemented openDialog() function.  The result looks like this:

Client Side AJAX Applications in SharePoint 2010 - 忘忧草 - 忘忧草的博客

To open an AJAX modal dialog in SharePoint 2010 either specify a remote page to open, or specify an HTML element in the page.  Opening a remote page is a little easier.  The openDialog() function would look like this:

 
1 function openDialog() {
2     var options = {
3         url: "../../Lists/User%20Stories/DispForm.aspx?Id=1",
4         width: 800,
5         height: 600,
6         title: "User Story",
7     };
8     SP.UI.ModalDialog.showModalDialog(options);
9 }

Obviously hard coding an id in the url parameter isn’t exactly best practice, but it works for demonstration purposes.  The result looks like this:

Client Side AJAX Applications in SharePoint 2010 - 忘忧草 - 忘忧草的博客

This is a useful technique for opening existing SharePoint pages as in the example above or for opening pages as a dialog that a user might also navigate to directly.  However, in our application we want to edit information that is in-memory in the browser (which is where ASP.Net AJAX Templating stores its data).  The showModalDialog() function will support this scenario, but it’s slightly more complicated.

Modaling to Your Own Page

First we’ll need an HTML element that we’re going to pop up.  A first draft might looks like this:

 
1 <div id="userStoryDetails">
2     Hello World!
3 </div>

Since the options parameter that we passed to showModalDialog() supports an ‘html’ parameter instead of a ‘url’ parameter it might seem like we could simply retrieve the userStoryDetails element inside of openDialog and pass that to options.  However, there’s a problem with this approach.  By default SharePoint’s showModalDialog() function will destroy the DOM element that are passed to it.  The result is that the dialog can be opened once, but it fails each subsequent time it is opened.

To avoid this behavior we can cache the DOM element in a global variable rather than keeping it as a local variable scoped at the function level.  The code to will look like this:

 
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.showModalDialog(options);
16 }

With this code we can close and open the modal dialog multiple times.  The result looks like this:

Client Side AJAX Applications in SharePoint 2010 - 忘忧草 - 忘忧草的博客

The only thing we’re missing now is the ability to close the dialog and handle the results.

Goodbye World

Closing the dialog and handling results is also pretty simple.  It takes two steps.  First we’ll need to call commonModalDialogClose() in our popup code and next we’ll implement a callback method that SharePoint will call when the dialog has been closed. 

To call commonModalDialogClose() we can modify the code that we are going to pop up like this:

 
01 <div id="userStoryDetails">
02   <input
03     type="button"
04     value="OK"
05     onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Ok clicked'); return false;"
06     class="ms-ButtonHeightWidth"
07     target="_self"
08     />
09   <input
10     type="button"
11     value="Cancel"
12     onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel clicked'); return false;"
13     class="ms-ButtonHeightWidth"
14     target="_self"
15     />
16 </div>

Notice the first parmeter to commonModalDialogClose().  It’s a DialogResult.  This parameter is important because our callback method will need to differentiate the ways in which a user could close the dialog.  For instance when a user clicks the X in the upper right of the dialog SharePoint passes DialogResult.cancel for the first parameter. 

The second parameter to commonModalDialogClose() is simply passed through as the second parameter to our handler as we’ll see shortly.

To handle the results of closing the dialog we can pass a function to the dialogReturnValueCallback argument in the options parameter of showModalDialog.  The result would look like this:

 
01 function openDialog() {
02     var options = {
03         html: userStoryDetails,
04         width: 800,
05         height: 600,
06         title: "User Story",
07         dialogReturnValueCallback: onDialogClose
08     };
09     SP.UI.ModalDialog.showModalDialog(options);
10 }
11   
12 function onDialogClose(dialogResult, returnValue) {
13     if (dialogResult == SP.UI.DialogResult.OK) {
14         alert('goodbye world!');
15     }
16     if (dialogResult == SP.UI.DialogResult.cancel) {
17         alert(returnValue);
18     }
19 }

And now we can open and close SharePoint modal dialogs and handle the results.  If needed there are other adjustments we can make to modal dialogs through the options parameter.  For instance X, Y, allowMaximize, showMaximized and showClose.  The documentation is sparse, but hopefully this page on MSDN will eventually be updated with more details.

Summary

This post should provide everything needed for opening dialogs that look like the ones SharePoint uses.  And more importantly it will provide a foundation for the next post in the series in which we will edit user story information using a master-details view inside of a modal popup.

Client Side AJAX Applications in SharePoint 2010 - 忘忧草 - 忘忧草的博客Guest Author: Lee Richardson
http://rapidapplicationdevelopment.blogspot.com/

Lee Richardson is a Senior Software Engineer at Near Infinity Corporation, an enterprise software development and consulting services company based in Reston, Virginia. He is a Microsoft Certified Solution Developer (MCSD), a Project Management Professional (PMP), a Certified SCRUM master and has over ten years of experience consulting for the public and private sector. You can follow Lee on Twitter at @lprichar

  评论这张
 
阅读(425)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018