jquery ui modal dialog - 提交按钮如何提交并返回模态MVC3答案

【问题标题】：jquery ui modal dialog - submit button how to submit and return back to the modal MVC3jquery ui modal dialog - 提交按钮如何提交并返回模态MVC3
【发布时间】：2012-08-15 08:09:31
【问题描述】：

我有一个快速编辑 jquery 对话框，允许我的用户更改一些客户详细信息。表单很棒，但是在提交表单后，我无法弄清楚如何关闭模式对话框并返回到仍在后台的视图。

我在 quickedit 上的 http 帖子执行所有数据库更新等，但目前只返回 quickedit 表单的部分视图。我需要它来关闭模式并返回到调用对话框的页面（不重新加载它......），或者如果不可能的话，只需返回到模式对话框。

这是我的 http 邮政编码：

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

代码原样返回更新的对象，但不在 jquery UI 模式中..

非常感谢任何帮助。

Javascript 调用 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");
    });
});

【问题讨论】：

请在您使用 AJAX 调用此控制器操作的位置显示您的 javascript 客户端代码。
@Html.ActionLink(Html.DisplayFor(modelItem => item.FullName).ToString(), "QuickEdit", "Roles", new { id = item.usrid }, new { @class= "openDialog", dialog_id = "productDetail", dialog_title = "快速编辑" })

标签： jquery asp.net-mvc-3 jquery-ui http-post

【解决方案1】：

如果数据有效并且您可以保存编辑，我将返回一个新的局部视图，其中仅包含一些 javascript 代码来关闭对话框，如下所示：

[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);
}

以及局部视图CloseDialog：

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

您可以自定义操作/视图以传入对话框 html 元素的 id 或仅依赖 css 类 dialog 就像我的示例中一样。

【讨论】：