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

Question

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

我得到了 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({ 自动打开：假， title: '添加新项目', 模态：真 });

    $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。

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

希望我清楚地说明了问题，并能在这里得到一些帮助……

真的很感激…………

Answer 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');
                }
            });

        }
    });

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

Answer 2

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

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