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

希望這對其他人有幫助。