Несколько постов по клику, чтобы отправить форму с помощью диалога jquery и asp mvc3

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/