Can't use returned list from ajax call

Question

I'm trying to get a list with an AJAX call to a C# method and display its items with jQuery, but I'm not able to do it. Here is what I got:

public string test()
{
    return "test ok";            
}

$.ajax({
    type: "POST",
    url: "Computer/test",
    success: function (data) {
        alert(data);
    },
    error: function () {
        alert("error");
    }
});

This works as expected and i get an alert with 'test ok' string. However if i try to return a list i'm unable to traverse it in jquery.

public List<string> testList()
{
    List<string> test = new List<string>;
    test.Add("test1");
    test.Add("test2");
    return test;
}

$.ajax({
    type: "POST",
    url: "Computer/testList",
    dataType: "json",
    success: function (data) {
        var list = data.d;
        $.each(list, function (index, item) {
            alert(item);
        });
    },
    error: function (xhr) {
        alert(xhr.responseText);               
    }
});

With this code I get the following error:

System.Collections.Generic.List`1[System.String]

Hope you can help me, thanks.

score 11 · Accepted Answer · edited May 23 '17 at 12:09

11

Use Json on server side with JsonRequestBehavior.AllowGet, check out the reason why we have to use JsonRequestBehavior at Why is JsonRequestBehavior needed?:

public JsonResult testList()
{
    List<string> test = new List<string>;
    test.Add("test1");
    test.Add("test2");
    return Json(test,JsonRequestBehavior.AllowGet);
}

You JS:

$.ajax({
    type: "POST",
    url: "Computer/testList",
    dataType: "json"
})
.done(function(data){
   var list = data;
   $.each(list, function (index, item) {
       alert(item);
   });
})
.fail(function(xhr){
    alert(xhr.responseText); 
});

success and error are deprecated, use .done and fail instead

edited May 23 '17 at 12:09

Community

1
1

answered Nov 02 '13 at 00:39

Khanh TO

48,509
13
99
115

He is using settings object and defines properties success and error. Those are not deprecated. What is deprecated are methods jqXHR.success() and jqXHR.error() on jqXHR object. This is a return value of `$.ajax()` – Lost_Cause Nov 02 '13 at 04:22
@Lost_Cause: yes, I think I need to reword that. `.done` is prefered to `success`. http://stackoverflow.com/questions/8840257/jquery-ajax-handling-continue-responses-success-vs-done – Khanh TO Nov 02 '13 at 04:48

score 1 · Answer 2 · answered Nov 02 '13 at 00:30

1

Change your controller action to return Json:

public JsonResult testList()
{
    List<string> test = new List<string>;
    test.Add("test1");
    test.Add("test2");
    return Json(test);
}

answered Nov 02 '13 at 00:30

Lost_Cause

96
2

score 1 · Answer 3 · answered Nov 02 '13 at 00:30

Try using a return type of ActionResult that returns JSON data via the Json() method, like this:

public ActionResult testList()
{
    List<string> test = new List<string>;
    test.Add("test1");
    test.Add("test2");

    return Json(test);
}

Note: In your jQuery .ajax() call you will not need the data.d syntax anymore either, so your jQuery will look like this:

$.ajax({
    type: "POST",
    url: "Computer/testList",
    dataType: "json",
    success: function (data) {
        var list = data;
        $.each(list, function (index, item) {
            alert(item);
        });
    },
    error: function (xhr) {
        alert(xhr.responseText);               
    }
});

score 0 · Answer 4 · answered Nov 02 '13 at 03:47

0

First of all use JsonResult in your C# code. JsonResult are more reliable here in ASP.NET MVC to return the data.

Simply use dictionary in c# to return collection of KeyValuePair

answered Nov 02 '13 at 03:47

Anirudha Gupta

9,073
9
54
79

Can't use returned list from ajax call

4 Answers4