如果客戶端驗證失敗，如何在ASP.NET MVC注冊表單上停止Ajax微調器

Question

我有一個MVC5注冊頁面，其中包含2種形式-一種通過Facebook注冊，另一種通過本地帳戶注冊。

我的問題是我在兩種表單中都添加了ajax進度指示器，但是我無法讓微調器在客戶端驗證失敗時停止旋轉。

以下代碼是我使用Facebook按鈕登錄的內容，當用戶單擊該按鈕時，該按鈕將替換為旋轉的ajax指示器：

    @using (Ajax.BeginForm("ExternalLogin", "Account", null, new AjaxOptions { LoadingElementId = "loader" }, new { id = "fbForm" }))
    {
        @Html.AntiForgeryToken()

        <p class="text-center">
            <button type="submit" id="Facebook" name="provider" value="Facebook" title="Log in using your Facebook account">Sign in with Facebook</button>
            <div id="fbLoader" style="display:none; text-align:center">
                <img src="/images/Ajaxloader.gif" height="31" width="31" />
            </div>
        </p>


    $(document).ready(function () {

        $('#fbForm').submit(function () {
            $('#fbForm button').hide();
            $('#fbForm #fbLoader').show();

            return true;
        });

    });

我已嘗試使用確切的代碼進行本地登錄注冊，並且在服務器端驗證失敗（例如，當存在帳戶名時）有效，但是對於客戶端驗證（例如，確認密碼不匹配，或密碼不夠長），Ajax微調器將啟動，但不會消失。

我嘗試添加Microsoft.jQuery.Unobtrusive.Ajax並使用OnBegin和OnSuccess來解決此問題，但是當我以所需的方式運行本地登錄名時，Facebook登錄名出現以下錯誤：

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&client_id=57560734…Igt2j28GIN_o6bk5MTZTtv_u8NxSzz1_NvnohC9-HqpzJMBrhxT737xJmNLCY4q_Gg0UORz5UH. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:44300' is therefore not allowed access. 

Answer 1

我通過將以下代碼用於本地表單來解決此問題：

        $("#btnSubmit").click(function (evt) {
            var options = {};
            options.beforeSend = function () {
                $('#localForm #btnSubmit').hide();
                $('#localForm #localLoader').show();
                $("#localForm").submit();
            };
            options.complete = function () {
                $('#localForm #btnSubmit').show();
                $('#localForm #localLoader').hide();
            };
            $.ajax(options);
            evt.preventDefault();
        });