如何使用Javascript和Razor编写干净的代码

我正在编写一个ASP.NETMVC页面，我正在使用服务器上的数据创建一个Google图表。x轴是日期。y轴是该值。有两行数据正在绘制以进行比较。以下是相关代码：

@model IEnumerable<Tuple<DateTime,int,int>>


<div id="chart_div_2" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var arr = [['Year', 'Sales', 'Expenses']];

        //Using the Razor Model to create a Javascript array.
        var arr2 = [
            @foreach(var row in Model)
            {
                @:["@row.Item1.ToString("MMM d")", @row.Item2, @row.Item3],
            }
        ];

        for (var i = 0; i < arr2.length; i++)
        {
            arr.push(arr2[i]);
        }

      var data = google.visualization.arrayToDataTable(arr);
      var chart = new google.visualization.LineChart(document.getElementById('chart_div_2'));
      chart.draw(data);

    }
</script>

@model IEnumerable
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var arr=['年度'，'销售额'，'费用']；
//使用Razor模型创建Javascript数组。
var arr2=[
@foreach（模型中的var行）
{
@：[“@row.Item1.ToString（“MMM d”），@row.Item2，@row.Item3]，
}
];
对于（变量i=0；i

首先，这段代码确实有效。以这种方式创建arr2确实可以将Razor模型变成我可以使用的东西。然而，我的鼻子说代码气味。它说，把两种语言razor和Javascript放在一起，它们有一些类似的基于C的编程流语法，可能会让下一个来阅读它的人感到困惑

有没有更好的方法写这个

然而，我的鼻子说代码气味

哦，是的，很臭，我能感觉到

有没有更好的方法写这个

当然。不要像混合使用这两种语言、编写循环之类的东西那样手动构建JSON。使用JSON序列化程序：

@model IEnumerable<Tuple<DateTime,int,int>>

<div id="chart_div_2" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var arr = @Html.Raw(
            Json.Encode(
                new object[] { new[] { "Year", "Sales", "Expenses" } }
                .Concat(
                    Model.Select(x => new object[] 
                    { 
                        x.Item1.ToString("MMM d"), 
                        x.Item2, 
                        x.Item3
                    })
                )
            )
        );

        var data = google.visualization.arrayToDataTable(arr);
        var chart = new google.visualization.LineChart(document.getElementById('chart_div_2'));
        chart.draw(data);
    }
</script>

@model IEnumerable
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var arr=@Html.Raw(
Json.Encode(
新对象[]{new[]{“年”、“销售”、“费用”}
康卡特先生(
Model.Select（x=>newobject[]
{ 
x、 第1项ToString（“MMM d”），
x、 项目2，
x、 项目3
})
)
)
);
var data=google.visualization.arrayToDataTable（arr）；
var chart=new google.visualization.LineChart（document.getElementById（'chart_div_2'））；
图表绘制（数据）；
}

这将生成与您相同的代码标记，但整个模型操作和编码是在服务器上完成的。您还可以编写自定义HTML帮助程序，以便将代码简化为：

public static class ChartExtensions
{
    public static IHtmlString ToChartData(
        this IEnumerable<Tuple<DateTime, int, int>> model, 
        params string[] titles
    )
    {
        return new HtmlString(
            Json.Encode(
                new object[] { titles }
                .Concat(
                    model.Select(x => new object[] 
                    { 
                        x.Item1.ToString("MMM d"), 
                        x.Item2, 
                        x.Item3 
                    })
                )
            )
        );
    }
}

公共静态类扩展
{
公共静态IHtmlString数据(
这个可数模型，
参数字符串[]标题
)
{
返回新的HtmlString(
Json.Encode(
新对象[]{titles}
康卡特先生(
model.Select（x=>newobject[]
{ 
x、 第1项ToString（“MMM d”），
x、 项目2，
x、 项目3
})
)
)
);
}
}

在你看来：

@model IEnumerable<Tuple<DateTime,int,int>>

<div id="chart_div_2" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var arr = @Model.ToChartData("Year", "Sales", "Expenses");
        var data = google.visualization.arrayToDataTable(arr);
        var chart = new google.visualization.LineChart(document.getElementById('chart_div_2'));
        chart.draw(data);
    }
</script>

@model IEnumerable
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var arr=@Model.ToChartData（“年度”、“销售额”、“费用”）；
var data=google.visualization.arrayToDataTable（arr）；
var chart=new google.visualization.LineChart（document.getElementById（'chart_div_2'））；
图表绘制（数据）；
}

使用JSON序列化程序是什么意思？谷歌图表需要一个二维数组，而不是JSON。

[[“年”、“销售”、“费用”]

是JSON和二维数组。如果你序列化一组集合，那么你会得到一个JSON格式的2D数组。我不确定我是否理解你的意思。二维数组看起来像[[“Aug 1”，1，1]，“Aug 2”，2，3]]，但是使用IEnumerable为模型创建的“JSON二维数组”看起来像[{“Item1”：“\/Date（1343797200000）\/”，“Item2”：1，“Item3”：1}，{“Item1”：“\/Date（1343797200000）\/”，“Item2”：2，“Item3”：3}。假设我创建了一个JSON对象，如何将其转换为Google函数所需的2D数组？