如何将 ViewBag 中的 C# 2D 数组解析为 javascript 2D 数组答案

【问题标题】：How to Parse a C# 2D Array in a ViewBag to a javascript 2D Array如何将 ViewBag 中的 C# 2D 数组解析为 javascript 2D 数组
【发布时间】：2013-09-24 05:39:03
【问题描述】：

我将 ViewBag 中的 C# 2D 数组传递给我的 View，我想将其解析为 Javascript 2D 数组，以将其用作谷歌图表的来源。我试过了：

 var tab = @Html.Raw(@ViewData["tabComplet"]);
 var data = google.visualization.arrayToDataTable(tab);

但它不起作用，有人有想法吗？

【问题讨论】：

Pass C# ASP.NET array to Javascript array的可能重复
或this one，或this one，或this one...
什么都没有，它在 jquery 文件中显示错误“Unexpected token ”，因此这意味着该数组无法用作谷歌图表的来源
这就是你的控制台所说的，你的 HTML 源代码（查看源代码）会显示一些东西，即使它不是有效的 javascript
顺便说一下，ViewBag 和 ViewData 是 not the same thing

标签： javascript asp.net arrays google-visualization

【解决方案1】：

在GitHub 上查找整个项目或观看youtube video

在控制器中，添加以下代码

            // prepare a 2d array in c#
            ArrayList header = new ArrayList { "Task Name", "Hours"};
            ArrayList data1 = new ArrayList {"Work", 2};
            ArrayList data2 = new ArrayList { "Eat", 2 };
            ArrayList data3 = new ArrayList { "Sleep", 2 };
            ArrayList data = new ArrayList {header, data1, data2, data3};
            // convert it in json
            string dataStr = JsonConvert.SerializeObject(data, Formatting.None);
            // store it in viewdata/ viewbag
            ViewBag.Data = new HtmlString(dataStr);

在 _Layout.cshtml 中，添加 Google 脚本

@*google chart*@
<script type="text/javascript" src="https://www.google.com/jsapi">   </script>

最后，在视图中添加以下代码

<script>    
    var data = JSON.parse('@ViewBag.Data');
    console.log(data);
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var chartData = google.visualization.arrayToDataTable(data);

        var options = {
            title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(chartData, options);
    }
</script>

<p>Use this area to provide additional information.</p>

i will show chart in there. but the data will come from viewdata instead of calling jQuery Ajax request.
<div id="piechart" style="width: 900px; height: 500px;"></div>

【讨论】：