Question

I have a quick edit jquery dialog that allows my users to change some customer details. The form is great, but after the form submit I cant work out how to get the modal dialog to close and return back to the view still in the background.

my http post on quickedit performs all of the database updates etc, but currently only returns a partial view of the quickedit form. I need it to either close the modal and return back to the page that called the dialog (without reloading it…) or just drop back to the modal dialog if that isn’t possible.

here is my http post code:

        [HttpPost, ActionName("QuickEdit")]
    public ActionResult QuickEdit(newUser usrdet)
    {
        db.Entry(usrdet).State = EntityState.Modified;
        db.SaveChanges();
        return PartialView(usrdet);
    }

The code as it is returns back the updated object, but not in a jquery UI modal..

Any help greatly appreciated.

Javascript to invoke the ui:

<script type="text/javascript">
$.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();
        $("<div></div>")
  .addClass("dialog")
  .attr("id", $(this).attr("dialog-id"))
  .appendTo("body")
  .dialog({
      title: $(this).attr("dialog-title"),
      close: function () { $(this).remove() },
      modal: true,
      width: 706,
      height: 600
  })
  .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

Answer 1

In case the data was valid and you could save the edits, i would return a new partial view which just contains some javascript code to close the dialog like this:

[HttpPost, ActionName("QuickEdit")]
public ActionResult QuickEdit(newUser usrdet)
{
    if (ModelState.IsValid) {
        db.Entry(usrdet).State = EntityState.Modified;
        db.SaveChanges();
        return PartialView("CloseDialog");
    }
    return PartialView(usrdet);
}

And the partial view CloseDialog:

<script type="text/javascript">
    $(".dialog").dialog("close");
</script>

You can customize the action/view to pass in the id of the dialogs html element or just rely on the css class dialog like in my example.