如何在MVC中从jquery调用控制器？

Question

我想通过返回数量的Jquery从视图中调用我的控制器。 在调试时，结果变量将返回未定义状态。 请有人更正我的代码。

视图：

<script type="text/javascript">
$(function () {
    $('.icon-delete').click(function () {
        debugger;
        var v = 'e8a6bdf4-1da6-41e0-8423-86ffacf71703';
       var result= GetCollectionCount(v);
        var answer = confirm('Do you want to delete this record?');
        if (answer) {
            $.post(this.href, function () {
                window.location.reload(); //Callback
            });
            return false;
        }
        return false;
    });
});

function GetCollectionCount(id) {
    $.ajax({
        type: 'POST',
        contentType: "application/json;charset=utf-8",
        url: '/AdminNew/CollectionCount',
        dataType: 'json',
        data: { "id": id },
        //traditional: true,
        success: function (ajaxresult) {
            //alert(ajaxresult);
            return ajaxresult;
        },
        failure: function (ajaxresult, status) {
            console.log(ajaxresult)
        }
    });
}

Answer 1

在调试时，结果变量将返回未定义状态。

这是正常现象，也是AJAX的工作方式。 AJAX中的第一个A代表异步 。 这意味着$.ajax函数不会返回任何内容。 它用于触发对服务器的AJAX请求，并且可以使用此AJAX调用的结果的唯一单个位置是success回调内部。 在您的示例中，您似乎正在尝试立即使用这些结果。

Answer 2

问题是GetCollectionCount正在向服务器发出异步请求。 也就是说，其余代码将继续执行，而不会等待请求完成。

您需要将依赖于请求的代码放置在成功请求后执行的回调中：

$(function () {
    $('.icon-delete').click(function () {
        debugger;
        var v = 'e8a6bdf4-1da6-41e0-8423-86ffacf71703';
        GetCollectionCount(v);
    });
});

function GetCollectionCount(id) {
    $.ajax({
        type: 'POST',
        contentType: "application/json;charset=utf-8",
        url: '/AdminNew/CollectionCount',
        dataType: 'json',
        data: { "id": id },
        //traditional: true,
        success: function (ajaxresult) {
            var answer = confirm('Do you want to delete this record?');
            if (answer) {
              $.post(this.href, function () {
                window.location.reload(); //Callback
              });
              return false;
            }
            return false;
        },
        error: function (ajaxresult, status) {
            console.log(ajaxresult)
        }
    });
}

Answer 3

您应该尝试这样的事情：

$(function () {
    $('.icon-delete').click(function () {
        debugger;
        var v = 'e8a6bdf4-1da6-41e0-8423-86ffacf71703';
        GetCollectionCount(v);
    });
});

function GetCollectionCount(id) {
    $.ajax({
        type: 'POST',
        contentType: "application/json;charset=utf-8",
        url: '/AdminNew/CollectionCount',
        dataType: 'json',
        data: { "id": id },
        //traditional: true,
        success: getCollectionSuccess,
        error: errorCallback
    });
}

function getCollectionSuccess(ajaxResult){
    var answer = confirm('Do you want to delete this record?');
        if (answer) {
            $.post(this.href, function () {
                window.location.reload(); //Callback
            });
            return false;
       }
}

function errorCallback(errorMsg, status){
    console.log("Error Message : "+errorMsg+" Error code : "+status);
}

Answer 4

也许将async设置为false可以解决@Darin提到的问题：

function GetCollectionCount(id) {
$.ajax({
    // ... your settings

    async: false,

    success: function (ajaxresult) {
        //alert(ajaxresult);
        return ajaxresult;
    },
    failure: function (ajaxresult, status) {
        console.log(ajaxresult)
    }
});

}