jquery - Ajax.BeginForm 在 chrome MVC 5 中不起作用

Question

我目前正在尝试在 MVC 5 中实现 Ajax 表单。

@using (Ajax.BeginForm("Requirement", "Purchase", null, new AjaxOptions { OnSuccess = "redirectionClick", OnFailure = "Retry", HttpMethod = "POST" }, new { id = "RequirementForm", autocomplete = "off" }))
{
   //Various input fields
   @Html.AntiForgeryToken()
   <input type="submit" value="Submit" class="btn btn-primary EqualSized" id="SubmitBtn" style="width:30%">
   <input type="button" value="Reset" id="Reset" class="btn btn-primary EqualSized" style="width:30%">
}

script标签下的函数:

function CloseModals() {
    $('.modal').modal('hide');
    $('body').removeClass('modal-open');
    $('div.modal-backdrop').remove();
}

function redirectionClick() {
    CloseModals();
    bootbox.alert("Saved Successfully!");
    $.ajax({
        url: "@Url.Action("Requirement", "Purchase")",
        async: false,
        success: function (result) {
            $('#PageData').html(result);
        }
    })
}

function Retry() {
    alert('Unknown Error, Please try submitting the form again!');
    $('#SubmitBtn').attr('disabled', false);
}

$('#SubmitBtn').click(function () {
    if ($('#RequirementForm').valid())
        $(this).attr('disabled', true);
});

还有我的 Controller :

[HttpPost]
[ValidateAntiForgeryToken]
public void Requirement(Requirement Details)
{
  //Logic
}

以上代码适用于 FireFox 和 IE，但不适用于 Chrome。我有什么遗漏的吗？

Answer 1

如果提交按钮被禁用，我认为它无法提交表单，您的点击处理程序将在提交处理程序之前触发。

尝试将您的点击处理程序更改为此

$('#SubmitBtn').click(function () {
    if ($('#RequirementForm').valid())
         $(this).prop('disabled', true).closest('form').submit();
});

另一种方法是处理表单上的提交，并在表单有效时禁用其中的按钮。您可以使用 onbegin 或 Submit 事件来实现