MVC5 Returning a Generic List of Objects via Jquery Ajax
I am trying to retrieve a list of objects via jQuery Ajax
I have a controller Method like this:
[HttpGet]
public JsonResult GetAllStates(string listname = "")
{
clsDdl ddl = new clsDdl();
List<clsDdl> retval = new List<clsDdl>();
ddl.id = "1";
ddl.value = "Dropdown1";
ddl.status = "DDL Status";
ddl.attributes = "First Dropdown Text";
retval.Add(ddl);
//return retval;
return Json(new
{
list = retval
}, JsonRequestBehavior.AllowGet);
}
Heres my Dropdown class that I am trying to return
public class clsDdl
{
public string id { get; set; }
public string value { get; set; }
public string status { get; set; }
public string attributes { get; set; }
}
Code in my view looks like this
function LoadListItems (options) {
var listname = options.listname;
$.ajax({
type: "GET",
url: url,
data: JSON.stringify({
listname: listname
}),
contentType: "application/json; charset=utf-8",
async: true,
success: function (result) {
alert(result[0].value);
},
error: function (xhr, status, err) {
alert(err.toString(), 'Error - LoadListItemsHelper');
}
});
My controller action is being hit. But the alert is always 'Undefined'. I have also tried
success: function (data) {
var result = data.d;
for (var i = 0; i < result.length; i++) {
alert(result[i].attributes);
}
No Success there either. What am I doing wrong ?
Thanks in advance...
1. You are returning JSON from the server. You have to set dataType in Ajax request to json
contentType --> Data sending to server
dataType --> data returned from Server
What is content-type and datatype in an AJAX request?
$.ajax({
type: "GET",
url: url,
data: JSON.stringify({ listname: listname }),
contentType: "application/json; charset=utf-8",
//HERE
dataType: 'json',
success: function (result) {
alert(result[0].value);
},
error: function (xhr, status, err) {
alert(err.toString(), 'Error - LoadListItemsHelper');
}
});
2.
You are returning
return new Json(new {list = retval}, JsonRequestBehavior.AllowGet);
In success: function(result)
You can access the list like this: result.list[index]
success: function (result) {
for(var i =0; i < result.list.length; i++){
alert(result.list[i].value);
alert(result.list[i].status);
}
}
EDIT Based on Aivan Monceller 's comments you can do this:
As you are sending GET you don't need the
contentType: "application/json; charset=utf-8",
So you can write you Ajax like this:
$.ajax({
type: "GET",
url: url,
data: { listname: listname },
//HERE
dataType: 'json',
success: function (result) {
alert(result[0].value);
},
error: function (xhr, status, err) {
alert(err.toString(), 'Error - LoadListItemsHelper');
}
});