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.

Answer 1

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

Answer 2

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

Answer 3

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