Question

我使用以下表格：

    @using (Ajax.BeginForm("SaveItem", "ItemsController", null, new AjaxOptions() { OnSuccess = "onFormSubmit" }, new { id = "itemSaveForm" }))
{ // form fields below

}

以及用于管理此问题的javascript代码：

  function onFormSubmit(content) {
        $("#dialog-form").dialog("close");
        $("#form-data").html(""); //empty form

        $.post('@Url.Action("GetItemRow", "ItemsController")', { id: id, adm:true }, function (data) {
           // update logic.. ignore
            }

        });
    }

这是我用来提交的jquery对话框脚本：

 $(function () {
        $("#dialog:ui-dialog").dialog("destroy");

        $("#dialog-form").dialog({
            autoOpen: false,
            height: 255,
            width: 420,
            modal: true,
            buttons: {
                "Add": function () {
                    var bValid = true;
                    $("#itemSaveForm").submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {

            }
        });
    });

每次我按对话框中的添加按钮...我会收到多个提交。任何想法为什么？

Answer 1

我怀疑以下行是您问题的根源：

$("#itemSaveForm").submit();

如何使用普通的HTML表单：

@using (Html.BeginForm("SaveItem", "Items", FormMethod.Post, new { id = "itemSaveForm" }))   
{
    ...
}

然后在对话框中配置Add按钮，如下所示：

'Add': function () {
    var bValid = true;
    var form = $('#itemSaveForm');
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: onFormSubmit
    });
}

Answer 2

您需要return false;或e.preventDefault();或JS代码将处理提交，然后提交表单。

return false;

同时执行.preventDefault();和.stopPropgation()。

http://api.jquery.com/event.stopPropagation/ http://api.jquery.com/event.preventDefault/

使用jquery对话框和asp mvc3点击提交表单的多个帖子

2 个答案: