Question

I am using a dialog box as such:

    <div id="dialog" title="Edit Information" style="overflow: hidden;">
    </div>


    $('#dialog').load("@Url.Action("EditInfo")",
                    function(response, status, xhr) {
                        $('#dialog').dialog('open');
    });

Once the user user clicks on submit in the dialog box I got to httppost as such

     [HttpPost]
     public ActionResult EditInfo(MicroInfo model)
     {
        if (ModelState.IsValid)
        {
            lbService.EditMicroInfoData(model);
            return View(model); // success 
        }

        return View(model); // problem           

     }

When it goes to

    return View(model) // success

, it does not goes not open in the dialog box but in a normal page. I like to open it back in the dialog box so the user can close the dialog box.

I am wondering if I should do this in a

      $.ajax( .... 

call

Answer 1

You could use an Ajax.BeginForm inside the partial that you are loading. So put the contents that you want to be loaded in the dialog inside a partial and also have your HttpPost controller action return this same partial view instead of returning an entire view.

Don’t forget to include the jquery.unobtrusive-ajax.js script to your page if you want the Ajax.BeginForm form to work.

As an alternative to using Ajax.BeginForm you could still use a normal Html.BeginForm and manually AJAXify it:

$(document).on('submit', '#dialog form', function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            // Here you could test the result of the controller action
            // and in case it is success close the modal
            // I would recommend you returning a Json result in this case
            // so that here you could test for it:
            if (result.success) {
                $('#dialog').dialog('close');
            } else {
                // a partial view was returned, probably an error =>
                 // refresh the dialog
                $('#dialog').html(result);
            }
        }  
    });
    return false;
});