在ASP.NET MVC 5中使用jQuery成功进行Ajax调用后提交表单

Question

我在Asp.net MVC 5项目中有一个具有“ Submit按钮的表单。 单击“ Submit按钮后，我要执行以下操作：

1. 在各个字段上使用jQuery执行客户端验证（必填字段已填写，电子邮件格式有效等）。 那部分工作正常。

2. 进行Ajax调用，该调用将通过从控制器调用一个操作并返回JSON响应来执行一些服务器端验证。 响应包含成功属性和包含错误列表的错误属性。

如果未发现错误，则Success属性将返回true，并且Errors属性将为null。 如果发现错误，则Success属性返回false，并且Errors属性包含相关错误的列表。

我从我的ApplicationForm控制器调用“ \\ ApplicationForm \\ Validate”操作，此部分工作正常。

3. 如果在第2部分中没有发现错误，我希望我的表单能够正常提交并调用'\\ ApplicationForm \\ Index'操作，以便可以将我的数据添加到我的数据库中。 我不能让这部分工作！！

Submit按钮的定义如下：

<div class="form-group">
  <div>
    <input type="button" id="btnApply" value="Apply" class="btn btn-primary" />
  </div>
</div>

我的JavaScript代码定义如下：

$('#AppllicationForm').submit(function () {
    if (!$(this).attr('validated')) {
        if ($(this).valid()) {
            $.ajax({
                type: "POST",
                data: $(this).serialize(),
                url: "/ApplicationForm/ValidateForm",
                dataType: 'json',
                success: function (response) {
                    $('validationSummary').show();
                    if (response != null && response.success) {
                        console.log('No Validation errors detected');
                        $('#ApplicationForm').attr('validated', true);
                        $('#ApplicationForm').attr('action', '/ApplicationForm/Index')
                            .submit();
                        return true;
                    }
                    else if (response != null && !response.success) {
                        console.log('Validation errors detected');
                        var errors = response['errors'];
                        displayValidationErrors(errors);
                        window.scrollTo(0, 0);
                    }
                    return false;
                },
                error: function (response) {
                    $('validationSummary').hide();
                    console.log(response);
                    return false;
                }
            });
        }
    }
    return false;
});

上面使用的是常规按钮，但我也尝试将其类型定义为Submit但无济于事。

我知道过去曾发布过类似的问题，但我找不到能真正帮助我解决问题的解决方案，因此请耐心等待，除非有实际问题，否则请勿将此问题标记为重复。实际解决我的问题。 非常感激！

可以从SO上的这篇文章中找到与我要实现的目标最接近的场景： 从ajax成功函数内部提交表单，该表单检查值

在这个阶段，我一直在尝试许多不同的事情，但是没有任何结果。 我或者没有在ValidateForm操作之后调用Index操作，或者调用了一个或另一个操作，或者调用了唯一的Index操作，或者我的模型被弄乱了，列表继续。

我显然不能正确执行此操作或缺少某些内容，但目前我仍然处于完全静止的状态。 我希望这是我想念的愚蠢的事情，希望有人能为我澄清这一点。

任何帮助将不胜感激。

Answer 1

试试看 ：

$('#btnApply').click(function (e) {
alert('submit');
e.preventDefault();
var form  = $('form'); // change selector your form
if (!form.attr('validated')) {
    if (form.valid()) {
        $.ajax({
            type: "POST",
            data: form.serialize(),
            url: "/ApplicationForm/ValidateForm",
            dataType: 'json',
            success: function (response) {
                console.log('response received.');
                if (response != null && response.success) {
                    console.log('No validation errors detected.');
                    form.attr('validated', true);
                    form.attr('action', '/ApplicationForm/Index')
                        .submit();
                } else if (response != null && !response.success) {
                    console.log('Validation errors detected.');
                    var errors = response['errors'];
                    displayValidationErrors(errors);
                    window.scrollTo(0, 0);
                }

            },
            error: function (response) {
                console.log(response);
                $('validationSummary').hide();
            }
        });
    }

}

}）;

Answer 2

请尝试一下：

    $('#btnApply').on('click', function (e) {
    e.preventDefault();
    var form = $( "#AppllicationForm" );
    if (!form.attr('validated')) {
        if (form.valid()) {
            $.ajax({
                type: "POST",
                data: $(this).serialize(),
                url: "/ApplicationForm/ValidateForm",
                dataType: 'json',
                success: function (response) {
                    $('validationSummary').show();
                    if (response != null && response.success) {
                        console.log('No Validation errors detected');
                        form.attr('validated', true);
                        form.submit();
                        return true;
                    }
                    else if (response != null && !response.success) {
                        console.log('Validation errors detected');
                        var errors = response['errors'];
                        displayValidationErrors(errors);
                        window.scrollTo(0, 0);
                    }
                    return false;
                },
                error: function (response) {
                    $('validationSummary').hide();
                    console.log(response);
                    return false;
                }
            });
        }
    }
    return false;
});

您的表单操作属性将为“ / ApplicationForm / Index”。 当您单击按钮时，您将进行验证，如果一切正常，请提交表单。

Answer 3

请检查以下解决方案：

  $('#btnApply').on('click', function (event) {
        if ($('form').valid()) {
            event.preventDefault();
            $.ajax({
                type: "POST",
                data: $(this).serialize(),
                url: "/ApplicationForm/ValidateForm",
                dataType: 'json',
                success: function (response) {
                    $('validationSummary').show();
                    if (response != null && response.success) {
                        console.log('No Validation errors detected');
                        $('#ApplicationForm').attr('validated', true);
                        $('form').submit(); // Here form will be submmited to Index action.
                        return true;
                    }
                    else if (response != null && !response.success) {
                        console.log('Validation errors detected');
                        var errors = response['errors'];
                        displayValidationErrors(errors);
                        window.scrollTo(0, 0);
                    }
                    return false;
                },
                error: function (response) {
                    $('validationSummary').hide();
                    console.log(response);
                    return false;
                }
            });
    });

并使用[HttpPost]属性装饰ValidateForm方法。

Answer 4

我以为自己会分享自己的解决方案，因为我最终受聘于时间有限且无力在此花费更多时间的问题，因此聘请了一名自由职业者来看看它。

它是如何解决的？ 他在第一个Ajax调用中添加了第二个。 烦人的（而且代价高昂！）部分是我确实尝试过此操作，但是我有一条重要的漏行，即var formValidated = $('#AppllicationForm').serialize(); 。

做出这些更改之后，我只需要重新调整我的一些逻辑，即应该显示和/或隐藏哪个div，但请注意这是相当标准的东西。

这是按预期工作的最终代码：

$('#AppllicationForm').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            type: "POST",
            data: $(this).serialize(),
            url: "/ApplicationForm/ValidateForm",
            dataType: 'json',
            success: function (response) {
                if (response != null && response.success) {
                    var formValidated = $('#AppllicationForm').serialize();
                    $.ajax({
                        url: '/ApplicationForm/Index',
                        data: formValidated,
                        type: 'POST',
                        success: function (result) {
                            $('#mainDiv').hide();
                            $('#Congrats').show();
                        }
                    });
                    return true;
                }
                else if (response != null && !response.success) {
                    var errors = response['errors'];
                    displayValidationErrors(errors);
                    window.scrollTo(0, 0);
                }
                return false;
            },
            error: function (response) {
                $('validationSummary').hide();
                return false;
            }
        });
    }
    return false;
});

希望这对其他人有帮助。