MVC 4 Ajax 表单发布操作始终发布第一次尝试发布的值

Question

我正在尝试创建简单的 CRUD 应用程序。我有一个填充行的部分视图。在每一行中都有一个编辑链接，我正在打开一个 jquery 对话框。在这个对话框中，我加载了另一个局部视图来编辑相应的行。在确定按钮上，我发布表单（这是一个 ajax 表单）。

控制器然后返回另一个部分视图，该视图被假定为替换原始列表（列表部分视图），因为我提供了 updateTargetId（这是呈现列表的 div。

这里我面临两个问题，

1. 这是第一次（即第一次在会话中）我发布表单。当我打开另一条记录进行编辑时，表单已正确加载，但当我发布它时，表单始终具有第一次尝试发布的记录的值。
2. 即使发布成功后，列表也不会更新。我可以在提琴手中看到帖子响应。只有在我刷新浏览器后才会刷新列表。

我已尝试清除 modelState 但不起作用。我尝试调试 jquery 代码，发现当我执行 form.serialize 时有旧值，因此控制器总是获取这些值。

我认为它在某处缓存表单。然后我通过添加关闭缓存

$.ajaxSetup({ cache: 'false' });

在 document.ready 中。这也行不通。

这里是 jQuery 代码

this.bindOpenDialog = function () {
    $(".openDialog").click(function (e) {
        e.preventDefault();
        var height = $(this).attr("data-dialog-height");
        var width = $(this).attr("data-dialog-width");
        var data_postUrl = $(this).attr("data-postUrl");
        var data_returnUrl = $(this).attr("data-returnUrl");
        var data_updateTarget = $(this).attr("data-updateTarget");
        var data_form_id = $(this).attr("data-form-id");
        var callBack = $(this).attr("callBack");
        if (data_postUrl == '') {
            data_postUrl = this.href;
        }
        var div = $("<div></div>");
        div.addClass("ui-dialog")
        div.attr("id", $(this).attr("data-dialog-id"))
        var dialog = div.dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            height: height,
            width: width,
            modal: true,
            buttons: {
                'Save': function () {
                    var dialog = $(this);
                    var form = null;
                    if (data_form_id == '' || data_form_id == undefined) {
                        form = dialog.find('form').first();
                    }
                    else {
                        form = $("#" + data_form_id).first();
                    }

                    var req = $.post(data_postUrl, form.serialize(),
                        function (responseText, textStatus) {
                        }, "html");
                    req.success(function (data) {
                        if (callBack == '' || callBack == undefined) {
                            dialog.dialog('destroy');
                        }
                        else {
                            var cb = eval(callBack + "()");
                            dialog.dialog('destroy');
                        }
                    });
                    req.success(function (data) {
                        if (callBack == '' || callBack == undefined) {
                            thisDialog.dialog('destroy');
                        }
                        else {
                            var cb = eval(callBack + "()");
                            thisDialog.dialog('destroy');
                        }
                        //remove the form from the DOM.
                        //If I do not do this, it always posts the
                        // form which was posted for the first time.
                        $("#" + data_form_id).remove();
                    });
                    req.error(function (e) {
                        alert('error ' + e.toString())
                    });
                },
                'Cancel': function () {
                    var dialog = $(this);
                    dialog.dialog('destroy');
                }
            }

        });
        dialog.load(this.href);
    }
);

有没有人遇到过这个问题？

我的另一个观察是 jQuery 没有更新目标。我还在 Ajax 表单上设置了 OnSuccess 事件，它不会触发。

---

我的另一个观察是 jQuery 没有更新目标。我还在 Ajax 表单上设置了 OnSuccess 事件，它不会触发。

Answer 1

我不确定这是否是最好的方法，但是当我在 javascript 中销毁对话框后从 DOM 中删除表单时。我认为 jquery 并没有杀死表单实例

现在我的 javascript 看起来像

req.success(
            function (data) {
                if (callBack == '' || callBack == undefined) {
                    thisDialog.dialog('destroy');
                }
                else {
                    var cb = eval(callBack + "()");
                    thisDialog.dialog('destroy');
                }
                //remove the form from the DOM.
                //If I do not do this, it always posts the form which was posted for the first time.
                $("#" + data_form_id).remove();
            }
        );

如果有更好的方法，有人可以建议吗？

问候，马赫什

Answer 2

Mark 方法返回部分视图（用于编辑和列表）以使用属性进行编辑和重建解决方案：

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

Answer 3

好的，我想分享一个学习，我正在使用 Ajax.BeginForm。我在 jquery 对话框中打开这个表单。此对话框具有确定和取消按钮。在确定单击时，我正在发布我的 ajax 表单。这就是它不更新 div 的原因。我使用提交按钮发布此表单，它有效。

所以要学习的是，如果您使用的是 Ajax.Begin 表单，那么您必须使用提交按钮发布表单，以便更新目标并在 OnComplete 事件上运行脚本。

如果您使用任何其他按钮提交表单，则无法利用此优势。在这种情况下，您需要通过 javascript 来完成。

希望这对某人有所帮助。

（我将此标记为答案以引起对这篇文章的关注。）