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

还有我的控制器：

[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 事件

Ajax.BeginForm 在 chrome MVC 5 中不工作

Ajax.BeginForm not working in chrome MVC 5

ajax

jquery

google-chrome

ajax.beginform

asp.net-mvc-5