如果客户端验证失败，如何在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();
        });