jQuery 对话框弹出将 Json 返回到新页面而不是当前页面

Question

我有一个 MVC 应用程序，我正在尝试插入某些对象的属性。为此，我通过 jQuery 对话框制作了一个模态弹出窗口。我不希望它干扰用户正在执行的其他操作，所以我制作了一个 Ajax.BeginForm。我希望当我进行插入时，它会在返回 PartialView() 时关闭，但它会全屏打开弹出视图，而不是关闭对话框。有朋友建议返回Json，但还是在弹出的url（/AddDept）上返回，而不是返回到当前的url（不重新加载）。

基本视图应该是动态的，这一点至关重要，因此您可以在任何页面上打开对话框，而不是在提交时重新加载。

我已阅读其他类似问题，但无法解决我的问题。

如果可能，请帮助我实现正确的功能。代码如下：

JS：

<script>
            $(document).ready(function () {
                var url = "";
                $("#dialog-alert").dialog({
                    title: 'Error encountered!',
                    autoOpen: false,
                    resizable: false,
                    width: 350,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true
                });

                if ('@TempData["msg"]' != "") {
                    $("#dialog-alert").dialog('open');
                }

                $("#lnkServer").on("click", function (e) {
                    url = $(this).attr('href');
                    $('#dialog-edit').dialog({ title: "Add a new Server" });
                    $("#dialog-edit").dialog('close');
                    $("#dialog-edit").dialog('open');
                    return false;
                });

                $("#lnkIssType").on("click", function (e) {
                    url = $(this).attr('href');
                    $('#dialog-edit').dialog({ title: "Add a new Issue Type" });
                    $("#dialog-edit").dialog('close');
                    $("#dialog-edit").dialog('open');
                    return false;
                });

                $("#lnkUser").on("click", function (e) {
                    url = $(this).attr('href');
                    $('#dialog-edit').dialog({ title: "Add a new User" });
                    $("#dialog-edit").dialog('close');
                    $("#dialog-edit").dialog('open');
                    return false;
                });

                $("#lnkDept").on("click", function (e) {
                    url = $(this).attr('href');
                    $('#dialog-edit').dialog({ title: "Add a new Department" });
                    $("#dialog-edit").dialog('close');
                    $("#dialog-edit").dialog('open');
                    return false;
                });

                $("#dialog-edit").dialog({
                    autoOpen: false,
                    resizable: false,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        //$(".ui-dialog-titlebar-close").hide();
                        $(this).load(url);
                    }
                    //buttons: {
                    //    "Cancel": function () {
                    //        $(this).dialog("close");
                    //    }
                    //}
                });
            });

        function onSuccess() {
            $("#dialog-edit").dialog('close');
        }
    </script>

表格：

<div id="container">
        @using (Ajax.BeginForm("AddDept", new AjaxOptions { OnSuccess = "onSuccess" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <div>
                <fieldset>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Department_Name)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Department_Name, htmlAttributes: new { @class = "form-control text-box single-line input-properties", placeholder = "Collections" })
                    </div>
                    <div class="editor-label">
                        @Html.ValidationMessageFor(model => model.Department_Name)
                    </div>

                    <input type="submit" value="Submit" class="btn btn-default btn-add-properties" />
                </fieldset>
            </div>
        }
    </div>

控制器：

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult AddDept([Bind(Include = "Department_Name")] Department @dept)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    db.Departments.Add(@dept);
                    db.SaveChanges();
                    TempData["Msg"] = "Data has been saved successfully";
                    return Json(TempData["Msg"]);
                    //return Redirect(System.Web.HttpContext.Current.Request.UrlReferrer.PathAndQuery);
                }
            }
            catch
            {
                TempData["Msg"] = "Probably the record already exists. If not, contact Georgi Georgiev, RA Dept.";
                return Json(TempData["Msg"]);
            }
            return Json(@dept);
            }

Answer 1

我的问题可能是由于我的 Ajax.BeginForm 弹出视图依赖于控制器中的不同 ActionResult 与背景视图相比。

无论如何，事实证明通过 Ajax 进行 POST 可以解决问题。

这是我所做的（在布局视图中）：

$("#dialog-edit").dialog({
                    autoOpen: false,
                    resizable: false,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        //$(".ui-dialog-titlebar-close").hide();
                        $(this).load(url);
                    },
                    buttons: [{
                        text: "Submit",
                        "class": "btn-add-properties",
                        click: function () {
                            var form = $('form', this);
                            $.post(form.prop('action'),
                                   form.serialize(),
                                   function (response) {
                                       alert("success");
                                   })
                                   .fail(function () {
                                       alert("error");
                                   });
                            $("#dialog-edit").dialog('close');
                        }
                    }]
                });

ajax post是对话框按钮下的功能。