MVC5通过Jquery Ajax返回对象的通用列表

时间:2015-05-12 14:44:42

标签: c# jquery ajax asp.net-mvc

我正在尝试通过jQuery Ajax检索对象列表

我有一个像这样的控制器方法:

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

继承我正在尝试返回的Dropdown课程

public class clsDdl
{
    public string id { get; set; }
    public string value { get; set; }
    public string status { get; set; }
    public string attributes { get; set; }
}

我视图中的代码如下所示

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

我的控制器动作正在被击中。但警报始终是“未定义”。 我也试过

 success: function (data) {
                 var result = data.d;
                 for (var i = 0; i < result.length; i++) {
                 alert(result[i].attributes);
                 }

也没有成功。我究竟做错了什么 ?

提前致谢...

1 个答案:

答案 0 :(得分:4)

<强> 1 您正从服务器返回JSON。 您必须将Ajax请求中的dataType设置为json

  1. contentType - &gt;数据发送到服务器

  2. dataType - &gt;从服务器

  3. 返回的数据

    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

    你要回来了

    return new Json(new {list = retval}, JsonRequestBehavior.AllowGet);
    

    success: function(result)

    您可以访问以下列表: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);
          }
    }
    

    编辑根据Aivan Monceller的评论,你可以这样做:

    当您发送GET时,您不需要

    contentType: "application/json; charset=utf-8",
    

    所以你可以这样写Ajax:

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