jquery ui模式对话框 - 提交按钮如何提交并返回模态MVC3

时间:2012-08-15 08:09:31

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

我有一个快速编辑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");
    });
});

1 个答案:

答案 0 :(得分:0)

如果数据有效并且你可以保存编辑,我会返回一个新的局部视图,它只包含一些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