使用 Razor C# 将对象动态添加到 JavaScript 数组答案

【问题标题】：Dynamically add objects to javascript array with Razor C#使用 Razor C# 将对象动态添加到 JavaScript 数组
【发布时间】：2014-03-09 21:55:10
【问题描述】：

好的，我正在使用 C# 中的 MVC4，我必须用视图模型中的元素填充一个 javascript 数组。我正在尝试动态填充 Chart.js 饼图。这是我的示例代码：

<script src="~/Scripts/Chart.js"></script>
<script type="text/javascript">

    var data = [
        {
            value: 30,
            color: "#F38630"
        },
        {
            value: 50,
            color: "#E0E4CC"
        },
        {
            value: 100,
            color: "#69D2E7"
        }
        ]
    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Pie(data);
    //Get context with jQuery - using jQuery's .get() method.
    var ctx = $("#myChart").get(0).getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx);
    new Chart(ctx).Pie(data, options);
</script>

我希望能够在 for 循环中向 data 数组添加元素。我尝试像这样使用 .push

数据.push([{ 值：30，颜色：“#F38630” }]);

但它会完全阻止图表的创建。知道我该怎么做：

foreach (var item in Model.List) {

data.add(item.value)

}

【问题讨论】：

您将一个 arrya 传递给 data.push()，它只需要实际对象（否则您将获得一个数组数组）。试试data.push({ value: 30, color: "#F38630" });。
谢谢，这有助于将对象添加到数组中！！

标签： c# javascript arrays asp.net-mvc-4 razor

【解决方案1】：

你可以比这更棒。

创建您自己的基本类型来代表您的值/颜色对。

public class MyType 
{
    public string Value {get;set;}
    public string Color {get;set;}
}

在您的剃须刀（或后面的代码）中为该类型创建一个数组：

@{
    var values = new List<MyType>();
    // populate with some values.

    JavaScriptSerializer js = new JavaScriptSerializer();
    string json = js.Serialize(keyValues.ToArray());
}

然后在你的 Javascript 中：

<script type="text/javascript">

    var data = @json; // TADA!!

    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Pie(data);

    //... etc.

</script>

如果您在序列化该列表时遇到任何问题，我建议使用 Json.Net 来改进 C# 原生序列化程序。

【讨论】：

哈哈，没问题，只要检查它生成的 JSON 的形状以确保它是正确的，有时需要一些摆弄。
虽然这可行，但我还是用单引号将@json Razor 语句括起来：var data = '@json';。这避免了 VS 中的 Razor/JavaScript 语法错误以及 data 为 null 时的运行时错误。

【解决方案2】：

您的data 是一个数组（请参阅括号[]）。

现在你尝试向数组中添加一个包含单个对象的数组：

[{ value...

只需将其更改为对象{} 即可。

{ value ... }

【讨论】：