Question

我有一个带有一些饼图的javascript代码的视图。这个视图有一个动作方法，我在运行一些查询，将结果转换为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>

然后在js侧执行client期间，您已初始化ChartData变量。无论如何，这种方式有多重缺点，根本无法扩展。 ajax电话似乎对我来说好多了。

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

1 个答案: