将 json 数据从控制器传递到视图答案

【问题标题】：pass json data from controller to view将 json 数据从控制器传递到视图
【发布时间】：2015-03-18 05:22:56
【问题描述】：

局部视图：

var dataa;
    $.ajax({
        url: ServerUrl + '/Dashboard/GetData',
        type: 'POST',
        cache: false,
        dataType: 'text',
        async: true,
        error: function (xhr) {
            //alert('Error: ' + xhr.statusText);
        },
        success: function (result) {
            debugger;
            dataa = result;
            var chart = c3.generate({
                data: {
                    type: 'bar',
                    json: [
                        dataa
                    ],
                    keys: {
                        x: 'indicator',
                        value: ['total']
                    }
                },
                axis: {
                    x: {
                        type: 'category'
                    }
                },
                bar: {
                    width: {
                        ratio: 0.5
                    }
                }
            });
        }
    });

控制器Json代码

public string GetData()
{
return "{ 'indicator': 'X', 'total': 100 },{ 'indicator': 'Y', 'total': 200 },{ 'indicator': 'Z', 'total': 300 }";
}

当我使用上面的代码时，它不起作用，但如果我传递this JS Fiddle 链接中指定的 json 数据，它就会起作用。我是否从控制器错误地传递了 JSON 数据？

请帮忙。

【问题讨论】：

它无效（您返回一个字符串，而不是 json） - 它需要是 [{indicator: 'X", total: 100}, {...}]。您最好创建具有属性indicator 和total 然后return Json(myCollection); 的对象集合，这样它就有效了。
@StephenMuecke : 这是一个有效的字符串 return "{ \"indicator\": \"X\", \"total\": \"100\" },{ \"indicator\" : \"Y\", \"total\": \"200\" },{ \"指标\": \"Z\", \"total\": \"300\" }";
@StephenMuecke ：我只需要使用从控制器传递的硬编码 json 数据对其进行测试。请帮我做同样的事情
您需要对其进行测试。但它是一个字符串，而不是 json。使用 public JsonResult GetData() return Json(....) }` 返回有效的 json 数据。你的ajax选项也需要dataType: 'json',（不是'text'）

标签： jquery json asp.net-mvc controller c3

【解决方案1】：

您不会从方法 GetData 返回 JSON。这样做返回JSON

public JsonResult GetData()
   { 
       var data = new[] {
          new { indicator= "X", total = 100 },
          new { indicator= "Y", total = 200 },
          new { indicator= "Z", total = 300 }
       };

           return  Json(data,JsonRequestBehavior.AllowGet);
   }

然后像这样进行 ajax 调用：

 $.ajax({
         cache: false,
         type: "GET",
         url:URL,
         dataType: 'json',
         success: function (result)
         {
           console.log(result);
         },
         error: function (xhr, ajaxOptions, thrownError)
         {
          alert('Failed to retrieve data.');                    
         }
       });

【讨论】：

要修复的3个错误：需要return Json(data, JsonRequestBehavior.AllowGet);，ajax选项需要dataType: 'json',，在成功回调中需要data: { type: 'bar', json: dataa, ...
@StephenMuecke : 非常感谢...你们俩都是救生员
@111 : 如何从字典类型动态填充上述数据数组。我需要从数据库中获取数据并显示。
您可以为此使用 JavaScriptSerializer。参考：msdn.microsoft.com/en-us/library/…。 var jsSerializer = new JavaScriptSerializer(); var serialized = jsSerializer.Serialize(data);