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

}