How to call controller from jquery in MVC?

Question

I want to call my controller from view by Jquery which returns count. While debugging the result variable returns as undefined. Please someone correct my code.

View:

<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)
        }
    });
}

When you're debugging, do you see the ActionResult method being called? — emerson.marini
– emerson.marini, Commented Jul 23, 2013 at 12:58
Can we see what your controler build for the ajax response ? — Okazari
– Okazari, Commented Jul 23, 2013 at 13:02
[HttpGet] public JsonResult CollectionCount(string id) { FramesBusinessService.FramesBusinessSeviceClient client = new FramesBusinessService.FramesBusinessSeviceClient(); FramesBusinessService.Counts cnt = client.Ser_GetCountsForBrandDelete(new Guid(id)); string s = string.Empty; if (cnt.collectioncount > 0 && cnt.framescount > 0) { s = cnt.collectioncount.ToString() + "Collecttions " + cnt.framescount.ToString() +"Frames"; } }return Json(s,JsonRequestBehavior.AllowGet); } — Laxminarayan
– Laxminarayan, Commented Jul 23, 2013 at 13:06
1) Your call is ASYNC and result won't be equal to the request value 2) It doesnt appear you are event using result so what is the problem? — marteljn
– marteljn, Commented Jul 23, 2013 at 13:08

Darin Dimitrov · Accepted Answer · 2013-07-23 13:02:42Z

2

While debugging the result variable returns as undefined.

That's normal and is how AJAX works. The first A in AJAX stands for Asynchronous. This means that the $.ajax function doesn't return anything. It is used to trigger an AJAX request to the server and the only single place where you can use the results of this AJAX call is inside the success callback. In your example you seem to be attempting to use those results immediately.

answered Jul 23, 2013 at 13:02

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Okazari · Accepted Answer · 2013-07-23 13:10:46Z

You should try something like that :

$(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);
}

The problem may be in your controller. Can you link us your JSON response with firebug or something like that ?

marteljn · Accepted Answer · 2013-07-23 13:36:07Z

The problem is GetCollectionCount is making an Asynchronous request to the server. That is to say the rest of your code continues to execute and does not wait for the request to finish.

You need to place the code dependant on the request in a callback that is executed upon a successful request:

$(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)
        }
    });
}

My requirement is that I need to find out the count first, if count > 0 then it will not allow for delete and vice-versa.
@Laxminarayan also change failure to error in your ajax request. That may fire the error callback and give us a message. Also, you may want to post your routes and controller.

Amin Saqi · Accepted Answer · 2013-07-23 14:00:59Z

0

Maybe setting async to false gets away the problem @Darin mentioned:

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

    async: false,

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

}

answered Jul 23, 2013 at 14:00

Amin Saqi

19.1k9 gold badges52 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to call controller from jquery in MVC?

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Related