jquery - 处理 jquery ui 对话框中表单中的错误

Question

我正在使用 jquery ui 对话框并显示表单:

$("#detailView").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    width: 1000,
    modal: true,
    buttons: {
        'Close': function () {
            closeModalPopup();
        }
    }
});

我的表单中有一个按钮(不是对话框按钮)。当我单击此按钮时，我使用下面的代码将 ajax 发送到服务器:

 $('.button').live('click', function () {

    $.post('/MyController/Update', $("#myForm").serialize(), function (data) {

        if (data == "Update Complete") {
            closeModalPopup();
        }
        else {
            $("#detailView").html(data);
        }
    }, "html");
});

如果发布成功，我会返回“更新完成”，它会关闭 jquery ui 对话框。

问题是，当它失败并且我有错误时，我在 Controller 操作中执行此操作:

        if (!validationResult.IsValid)
        {
            validationResult.AddToModelState(ModelState, null);
            return PartialView("DetailContent", hireRequest);
        }
        else
        {
            return Content("Update Complete");
        }

这个应该在javascript回调中点击“else”情况并在对话框中显示新内容，但似乎发生的是部分结果的内容显示在完整的底层页面上(与我想要的模式对话框相反)

对这里出了什么问题有什么建议吗？

Answer 1

您可能应该在 #detailView 容器中创建另一个容器(例如 DIV)作为 AJAX 调用的目标，这样 JQuery 创建的模式对话框就不会被覆盖。