Open and Close SharePoint Dialog Box or dlg and Refresh Parent Page

Dear All, 
If you are looking for close the ISDGL=1 Sharepoint dialog box on button click on C# here is the code for it

Add following script files in to ascx file for open popup!
<Sharepoint:ScriptLink runat="server" Name="SP.UI.Dialog.js" Localizable="false"  ID="s4" LoadAfterUI="true"/>

This script will set the properties of popup window
<script>
    function openPop_up(pageURL, title, dlgwidth, dlgHeight) {
        var options = {  
            url: pageURL,  
            title: title,
            allowMaximize: false,  
        showClose: true,  
        width: dlgwidth,
        height: dlgHeight,
        dialogReturnValueCallback: Function.createDelegate(null, function(result, returnValue) {  
            if (result == SP.UI.DialogResult.OK) {  
                if (returnValue == null) {  
                    SP.UI.Notify.addNotification('Operation successful');  
                    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);  
                } else {  
                    location.href = returnValue;  
                }  
            }  
        })  
    };  
    SP.UI.ModalDialog.showModalDialog(options);   
    }

</script>

for simple HTML Link in you ascx file 
<a class="btn btn-lg  btn-danger " onclick='openPop_up("Your URL",  'Upload /Download Payment', 800, 550)>Upload / Download Payment(s)</a>
 protected void btn_saveSchedule_Click(object sender, EventArgs e)

for asp:link 
use onclickclick instead of click



Add the following to your destination page close button code behind code

        {
//Your actions
Page.ClientScript.RegisterStartupScript(Page.GetType(), "saveSuccess",
         @"<script type='text/javascript'>
            ExecuteOrDelayUntilScriptLoaded(
                function() {
                    var args = {
                        arg1: '1',
                        arg2: '2'
                    };
                    SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, args);
                }, 'SP.UI.Dialog.js');
        </script>");
}



*************************************
A Complete Set of JS is below
*************************************

Sometimes, there is a requirement to open a SharePoint Application page as a popup with the new Modal Dialog Framework, which allows you to interact with the users in an unobtrusive way using just a few lines of JavaScript.

In real time projects, the requirements are you need to open internal or external pages inside an OOTB modal dialog of SharePoint 2013, as New Task Form, Custom Application page, or Upload File Form, and maybe you want to open the external pages and sites.

Basic syntax for SP Modal dialog box

1. var value = SP.UI.ModalDialog.showModalDialog(options);  

The options to create the modal dialog.

Example 

1. SP.UI.ModalDialog.showModalDialog(options);  
2. var options = {  
3.     title: " Title",  
4.     width: 400,  
5.     height: 600,  
6.     url: "/_layouts/newform.aspx"  
7. };  
8. SP.UI.ModalDialog.showModalDialog(options);   

Explain

Options Property	Description
title	The title of the Modal dialog.
url	Page URL or HTML
html	A string that contains the HTML of the page that appears in the dialog.
width	Modal dialog page width. If the width is not specified it will take autosize as true.
height	Modal dialog page width. If the width is not specified it will take autosize as true.
allowMaximize	A Boolean value that specifies whether the dialog can be maximized or not. It is true if the Maximize button is shown; else false.
showClose	The Close button appears on the dialog and it’s a Boolean value
autoSize	Dialog size (true/false).
dialogReturnValueCallback	A function pointer that specifies the return callback function.
args	An object that contains the data, that is passed to the dialog.

Example 1 

1. var options = {  
2.     url: ‘https: //gowtham.sharepoint.com/teams/lists/gvr/newform.aspx’,  
3.         title: ‘ModalDialog’,  
4.     allowMaximize: false,  
5.     showClose: true,  
6.     width: 800,  
7.     height: 330,  
8.     dialogReturnValueCallback: Function.createDelegate(null, function(result, returnValue) {  
9.         if (result == SP.UI.DialogResult.OK) {  
10.             if (returnValue == null) {  
11.                 SP.UI.Notify.addNotification('Operation successful');  
12.                 SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);  
13.             } else {  
14.                 location.href = returnValue;  
15.             }  
16.         }  
17.     })  
18. };  
19. SP.UI.ModalDialog.showModalDialog(options);   

Example 2

Sometimes, JS files do not load properly, so we have to load the files, as shown below. 

1. function openModelDialogPopup(strPageURL) {  
2.     var dialogOptions = {  
3.         url: ‘https: //gowtham.sharepoint.com/teams/lists/gvr/newform.aspx’,  
4.             title: ‘ModalDialog’,  
5.         allowMaximize: false,  
6.         showClose: true,  
7.         width: 800,  
8.         height: 330  
9.     };  
10.     SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', dialogOptions);  
11.     return false;  
12. }   

Example 3

Sometimes, when we close the Modal popup, we need to refresh the parent page, so try this code to refresh the parent page. 

1. SP.UI.ModalDialog.showModalDialog({  
2.             url: dialogUrl,  
3.             allowMaximize: dialogAllowMaximize,  
4.             showClose: dialogShowClose,  
5.             width: dialogWidth,  
6.             height: dialogHeight,  
7.             title: dialogTitle,  
8.             dialogReturnValueCallback: RefreshOnDialogClose //this value will refresh the Parent page.  
9.         }   

Example 4

Sometimes, when we close the Modal popup, we need to refresh the parent page, so try this code to refresh the parent page. 

1. var options = {  
2.     url: dialogUrl,  
3.     allowMaximize: dialogAllowMaximize,  
4.     showClose: dialogShowClose,  
5.     width: dialogWidth,  
6.     height: dialogHeight,  
7.     title: dialogTitle,  
8.     dialogReturnValueCallback: function(dialogResult) {  
9.         if (dialogResult != SP.UI.DialogResult.cancel) {  
10.             //When you click OK this will happen  
11.             SP.UI.ModalDialog.RefreshPage(dialogResult)  
12.         }  
13.     }  
14. }   

I hope, you enjoyed the blog.

Regards
3art Technology Experts
http://www.3art.tech