How can I trigger a JQuery dialog to close from an MVC partial view's controller?

Question

I have a partial view that is rendered inside of a JQuery dialog. I can easily open and close the dialog using javascript, but I can't seem to get the dialog closed from within the partial view's controller.

I thought I could just use a JavascriptResult:

return new JavaScriptResult { Script = "$(\"#popupDiv\").dialog(\"close\");" };

But that just displays the javascript in the browser.

What is the poper way to signal my JQuery dialog to close from within a controller action?

Answer 1

You mention partial view and javascript result, so I guess this partial view is invoked using AJAX. If this is the case you could close the dialog in the success callback:

$.ajax({
    url: '/someaction',
    success: function(result) {
        $('#popupDiv').dialog('close');
    }
});

Then you can have your controller action return a Json result indicating the success or failure of this action. Then inside the success callback you could test this value and close the dialog if everything went fine and show an error message if there was some problem:

return Json(new { success = true });

and then:

success: function(result) {
    if (result.success) {
        $('#popupDiv').dialog('close');
    } else {
        alert('Oops something went wrong, sorry');
    }
}