如何正确地将json传递给视图

Question

我有一个视图，其中包含一些用于饼图的 javascript 代码。这个视图有一个 action 方法，我在其中运行一些查询并将结果转换为 json 以便用一些东西填充饼图。

问题是我不知道（并且无法从此处的其他问题中理解）如何正确地将 json 从操作返回到视图，并在视图中以某种方式实际处理数据。

目前，我在浏览器中给了我一个 json 字符串而不是视图。

我的项目中没有 json 中数据的模型。

这是我认为的所有代码：

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">




      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Accumulated experience',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
</script>



<div id="piechart" style="width: 1000px; height: 600px;"></div>

这是我的控制器：

 public ActionResult experiencePieChart()
        {
            //some queries
            var json = JsonConvert.SerializeObject(perclist);
            return Json(json, JsonRequestBehavior.AllowGet);
        }

Answer 1

您的控制器方法应该返回JsonResult，只需按以下方式更改它的签名：

public JsonResult experiencePieChart()
{
    var perclist = ...
    //some queries
    return Json(perclist, JsonRequestBehavior.AllowGet);
}

然后在您的 js 代码中您可以调用它

$(document).ready(function()
{
    $.get("/YourController/experiencePieChart",ShowPieChart,"json").fail(ShowPieChartFail);
});

当然，你需要定义 ShowPieChart 函数来渲染该图

function ShowPieChart(chartData){
    // this code will be executed after result is returned asynchronously
    // chartData contains JSON representation of perclist variable
}

如果您只想在每次刷新页面时进行数据传输，您可以存储图表所需的数据。在您的 .cshtml 中，您只需添加

<script type="text/javascript">
    var ChartData = @Html.Raw(Json.Encode(@Model.MyData))
</script>

然后在client 一侧执行js 期间，您将初始化ChartData 变量。无论如何，这种方式有多个缺点并且根本不可扩展。与ajax 通话对我来说似乎好多了。