Unable to close the modal dialog from c#

Question

I have created one custom action. On clicking custom action, I am opening an application page as a modal dialog. The page will allow users to add the data of fields.

I have placed two buttons in the page, 1. Save , 2. Cancel. I want to add such a functionality that if Save is clicked then the form should be closed and the parent page should be refreshed. And if the cancel button is clicked then the page should be closed without refreshing.

I referred this MSDN Link to show the modal dialog.

My code for showing the page as modal dialog is:

var options = {
url:  _spPageContextInfo.webAbsoluteUrl + '/_layouts/15/xx/Pages/Page.aspx',
tite: 'Edit Properties',
allowMaximize: false,
showClose: true,
width: 800,
height: 600,                             
};             
SP.UI.ModalDialog.showModalDialog(options);

My code for closing the page without refreshing the page is:

protected void btnCancel_Click(object sender, EventArgs e)
{
    HttpContext context = HttpContext.Current;
    Regex regEx = new Regex("[?&]IsDlg=1");
    string currentUrl = Page.Request.RawUrl;
    if (regEx.IsMatch(currentUrl))
    {
        context.Response.Write("<script type='text/javascript'>window.frameElement.commitPopup();</script>");
        context.Response.Flush();
        context.Response.End();
    }
}

When I click on the cancel button I am getting the following error in the console of the browser.

Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed.

What am I missing?

Answer 1

In the options add

dialogReturnValueCallback: DialogCallback

and add the callback function where you refresh the page when you want.

The complete code:

var options = {
   url:  _spPageContextInfo.webAbsoluteUrl + '/_layouts/15/xx/Pages/Page.aspx',
   tite: 'Edit Properties',
   allowMaximize: false,
   showClose: true,
   width: 800,
   height: 600,  
   dialogReturnValueCallback: DialogCallback                          
};             
SP.UI.ModalDialog.showModalDialog(options);


DialogCallback = function (result, returnValue) {
    if (result == SP.UI.DialogResult.OK) {
        //uncomment the row blow to refresh the page
        //SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
    }
}

Update:

Apart from that I use my own buttons and usually use SPLongOperation

protected void yourButton_Click(object sender, EventArgs e)
    {
        try
        {
            string returnURL = "";//your return url
            string endscript = "try{window.frameElement.commonModalDialogClose(0, 0);}catch (error){window.location.href = '" + returnURL + "';}";
            using (SPLongOperation ctx = new SPLongOperation(this.Page))
            {
                ctx.TrailingHTML = "";
                ctx.LeadingHTML = "";
                ctx.Begin();



                ctx.EndScript(endscript);
            }

        }
        catch (ThreadAbortException ex)
        {
        }
        catch (Exception ex)
        {
            throw;
        }
    }

Answer 2

Try

Context.Response.Clear()

before writing anything to it. This would ensure that ONLY your javascript is in the response. otherwise you could deliver a malformed html-page.

Answer 3

What has worked for me is to create a blank page with script on the page using a content editor webpart. I am using the fancybox jQuery plugin but I get a similar behavior when I try to close the box through the Save button.

On my blank page, as I have mentioned earlier, I added a content editor webpart and put my script to close the box. Something along the lines of:
<script type="text/javascript">window.frameElement.commitPopup();window.close();</script>

On your Save button, the action is to just redirect to your new blank page.