jQuery 对话框 + ajax - 第二次提交时表单数据重复，奇怪的行为？答案

【问题标题】：jQuery dialog + ajax - Form data duplicate at the 2nd submission, weird behavior?jQuery 对话框 + ajax - 第二次提交时表单数据重复，奇怪的行为？
【发布时间】：2011-10-11 05:36:17
【问题描述】：

我正在使用带有 jquery 对话框 n $.ajax 的 MVC 3。

我得到了 1 个视图 (Index.cshtml)，其中包含一个“生成按钮”和如下脚本：

    // Once generate is clicked, call GenerateList action
    $('#generate').click(function () {
        $.ajax({
            async: false,
            url: '/Shop/GenerateList',
            type: 'GET',
            success: function (result) { getShopListFood(result); }
        });
    });

getShopListFood 只是一个返回部分视图的控制器操作：

   // Function to generate shopListFood items based on shopListID
    public ActionResult GetShopListFood(int shopListID)
    {
        var shopListFood = (from f in dbEntities.SHOPLISTFOODs where f.ShopListID == shopListID select f).ToList();
        return PartialView("_ShopList", shopListFood);
    }

然后在局部视图中，我创建一个对话框来加载另一个局部视图，即创建新数据库实例的表单： var $createdialog = $('').load('/Shop/GetShopListFoodForm').dialog({ 自动打开：假，标题：'添加新项目'，模态：真 });

    $createdialog.dialog("option", "buttons", {
        "Cancel": function () {
            $createdialog.dialog('close');

        },
        "Submit": function () {

            var frm = $('#formData');
            $.ajax({
                async: false,
                url: '/Shop/AddItem',
                type: 'POST',
                data: frm.serialize(),
                success: function (result) {
                    $('.shoplistfood').html(result);
                    $createdialog.dialog('close');
                }
            });

        }
    });

    $('#additem').button().click(function () {
        // Once clicked, create a dialog to load _ShopListFoodForm dialog
        //clear();
        $createdialog.dialog('open');

    });

但是，我遇到了一个非常奇怪的情况。第二次创建只会将数据复制为第一次。例如，我创建 ADD1 并提交，更新购物清单，然后在表单对话框中输入 ADD2 并提交，我得到另一个 ADD1 POST 到操作而不是 ADD2。

我一直在为我的应用程序中的许多其他模块使用某种方法，但从未遇到过这样的问题。我只是不知道出了什么问题！

希望我清楚自己的问题，并可以在这里得到一些帮助......

真的很感激......

【问题讨论】：

标签： ajax asp.net-mvc-3 jquery-dialog

【解决方案1】：

我通过改变流程以某种方式“解决”它。我将 ShopList 变成了一个视图，每次用户添加/删除项目时，我都会用另一个 _ShopList 部分视图刷新 div。

    $createdialog.dialog("option", "buttons", {
        "Cancel": function () {

            $createdialog.dialog('close');

        },
        "Submit": function () {

            var frm = $('#shopform');
            $.ajax({
                url: '/Shop/AddItem',
                type: 'POST',
                data: frm.serialize(),
                success: function (result) {
                    $('#shopfoods').html(result);
                    $createdialog.dialog('close');
                }
            });

        }
    });

这可行，尽管我不确定为什么会这样。只是分享我的方式，并希望在这里得到一些反馈......谢谢！

【讨论】：

【解决方案2】：

我遇到了同样的问题，经过几次试验和错误后，我意识到罪魁祸首是 jquery ui 对话框声明。对话对象在成功提交表单后重新加载的部分视图中被声明为全局变量。重新加载的局部视图将再次声明相同的全局变量，因此一团糟：您实际上再次提交了原始对象 - 仍在范围内。

我知道我晚了几年，但这可能对以后遇到同样问题的人有用。

【讨论】：