ASP.NET MVC jQuery AJAX 调用 Action 方法为时已晚？

Question

我在一个外部 Javascript 文件中有一些 jQuery 代码，它正在对我的控制器中的操作方法进行 ajax 调用。外部 Javascript 文件中的代码如下。 action 方法最终被调用，但是它没有被及时调用。当我在操作方法中设置断点时，直到提交按钮单击返回 false 后才会调用它。当 EmailExist 函数返回“isvalid”时，isvalid 是未定义的。

所以这不是最终调用 action 方法的问题，它只是不会因为任何原因而被调用 EmailExist 总是返回 undefined 并且在返回按钮单击之前不会调用 MVC Action 方法。有什么想法吗？

动作方法：

        [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult EmailExist(string email)
    {
        Account account = _generalService.GetAccountByEmail(email);

        bool exist = false;
        if (account != null)
            exist = true;

            return Json(new { indb = exist });
    }

Javascript：

$(document).ready(function() {
$("input[type=submit]").click(function() {

    var valid = true;

    // email - check required and valid

    var email = $("input[name='email']");
    var emailtrim = jQuery.trim(email.val());

    // email exists in db ajax request
    if (EmailExist(emailtrim)) {
        valid = false;
    }

    return valid;
})

function EmailExist(emailval) {

    var isvalid;

    // hit db
    $.ajax(
    {
    type: "POST",
    url: "/Account/EmailExist",
    data: { 'email': emailval },
    success: function(result) {

        if (result.indb) {
            isvalid = true;

        }
    },
    error: function(error) {
        alert(error);
    }
});

    return isvalid;
}

});

Answer 1

看起来您希望请求是同步的。要实现这一点，您需要将请求上的 async 选项设置为 false。默认设置是异步请求，以便在请求完成之前从 ajax 调用返回。或者，您可以重写代码，以便成功回调实际完成工作。后者对于 AJAX 来说更惯用——但有时可能更复杂。

$.ajax(
    {
    type: "POST",
    async: false,              // <- note addition
    url: "/Account/EmailExist",
    data: { 'email': emailval },
    success: function(result) {

        if (result.indb) {
            isvalid = true;

        }
    },
    error: function(error) {
        alert(error);
    }
});

或

$("input[type=submit]").click(function() {

    // email - check required and valid

    var form = $(this).parent('form');
    var email = $("input[name='email']");
    var emailtrim = jQuery.trim(email.val());

    SubmitIfNoEmailExists(form,emailtrim);

    return false;
});

function SubmitIfNoEmailExists(form,emailval) {

    // hit db
    $.ajax({
        type: "POST",
        url: "/Account/EmailExist",
        data: { 'email': emailval },
        success: function(result) {
            if (!result.indb) {
               form.submit();
            }
        },
        error: function(error) {
            alert(error);
        }
    });
}

编辑：根据您的 cmets，您可能还想考虑使用 jQuery validation plugin 作为您所有验证需求的解决方案。