C# 使用Razor C向javascript数组动态添加对象#

好的，我正在使用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>

---

您的

数据

是一个数组（请参见括号

[]

）

现在，您尝试向阵列中添加具有单个对象的阵列：

[{ value...

只要将其更改为对象

{}

，您就可以了

{ value ... }

---

您的

数据

是一个数组（请参见括号

[]

）

现在，您尝试向阵列中添加具有单个对象的阵列：

[{ value...

只要将其更改为对象

{}

，您就可以了

{ value ... }

---

你可以比这更棒

创建自己的基本类型以表示您的值/颜色对

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

在razor（或代码隐藏）中，为该类型创建一个数组：

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

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

@{
var值=新列表（）；
//用一些值填充。
JavaScriptSerializer js=新的JavaScriptSerializer（）；
字符串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>

var data=@json；//多田！！
//获取要选择的画布元素的上下文
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myNewChart=新图表（ctx）.Pie（数据）；
//... 等

---

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

您甚至可以做得更好

创建自己的基本类型以表示您的值/颜色对

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

在razor（或代码隐藏）中，为该类型创建一个数组：

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

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

@{
var值=新列表（）；
//用一些值填充。
JavaScriptSerializer js=新的JavaScriptSerializer（）；
字符串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>

var data=@json；//多田！！
//获取要选择的画布元素的上下文
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myNewChart=新图表（ctx）.Pie（数据）；
//... 等

---

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

您正在将arrya传递到

数据中。push（）

，它只需要实际对象（否则您将得到一个数组）。尝试

data.push（{value:30，颜色：#F38630}）。谢谢，这对向数组中添加对象起到了作用！！您正在将arrya传递到
data.push（）
，它只需要实际的对象（否则您将得到一个数组）。尝试
data.push（{value:30，颜色：#F38630}）。谢谢，这对向数组中添加对象起到了作用！！哈哈，没问题，只要检查它生成的JSON的形状以确保它是正确的，有时需要做一些修改。虽然这是可行的，但我还是用单引号将
@JSON
Razor语句括起来：
var data='@JSON'。这避免了VS中的Razor/JavaScript语法错误，也避免了当
数据
为
null
时的运行时错误。哈哈，没问题，只需检查它生成的JSON的形状以确保它是正确的，有时需要一些修改。虽然这是可行的，我用单引号将
@json
Razor语句括起来：
var data='@json'。这避免了VS中出现Razor/JavaScript语法错误，也避免了当
data
为
null
时出现运行时错误。