如何在cshtml页面中将选项传递给JavaScript答案

【问题标题】：how to pass options to JavaScript in a cshtml page如何在cshtml页面中将选项传递给JavaScript
【发布时间】：2015-10-28 20:36:33
【问题描述】：

我想通过我的代码在谷歌图表中设置颜色，但不知道该怎么做。我在cshtml页面中有这个。

<script type="text/javascript">

    // Load the Visualization API and the piechart package.
    //google.load('visualization', '1.0', { 'packages': ['bar'] });
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    var visualization;
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawCharts);

    function drawCharts() {

                var titleName = "Rounding Eligible";


                $("#chartHeader").html(titleName);
                var options = {
                    'backgroundColor': 'transparent',
                    title: titleName,
                    subtitle: 'Range of ddd to ddd', seriesType: "bars",isStacked: true,
                    series:  {  0:{color:"#009add"} ,1:{color:"#009844"} ,2: {color:"#ef7521"} ,3: {color:"#89d2e6"},4:{color:"#82bc00"},5:{color:"#f19f53"},6:{color:"#0055b7"},@(Model.NumSeries) : { type: "line", visibleInLegend: false, color: "#FF0000"  }},
                    vAxis:{title: "Count", minValue:10}

                };
                // Create the data table.
                var data = google.visualization.arrayToDataTable(@Html.Raw(Model.ChartJson));
                var chart_div = document.getElementById('chartDiv');
                var chart = new google.visualization.ComboChart(chart_div);

                chart.draw(data, options);

                //setup a temp image to gold hold the chart
                createHiddenImage('hiddenCanvas1', 'chartDiv', chart.getImageURI());
            }
    </script>

我想做的是根据代码中的某些内容替换我的颜色 ( 0:{color:"#009add"} ,1:{color:"#009844"}) 并执行类似的操作

 isStacked: true,
series: 
 @foreach seriesvalue in @Model.seriesValues
{@Html.Raw(seriesvalue);},  
Axis:{title: "Count", minValue:10}

我不知道有什么方法可以做到这一点，最好只从模型中传递整个选项对象吗？基本上我不知道该怎么做。

【问题讨论】：

标签： javascript c# asp.net-mvc razor google-visualization

【解决方案1】：

只需使用 JSON 序列化：

series: @Html.Raw(JsonConvert.SerializeObject(Model.seriesValues))

您需要将seriesValues 设为Dictionary，并以您希望与每种颜色关联的数字作为键。

如需深入了解，请参阅此答案：Using Razor within JavaScript

【讨论】：

接近了，但我在文本中得到 {"0":"{color:\"#009add\"}"，而不是 {0:{color:" #009add"},
@BrianHanf：抱歉，这是 HTML 转义。你只需要在它周围添加Html.Raw()。查看我的更新。
有趣的是，我发现就在几分钟前并完成了测试，我正要来添加该注释。我还需要删除多余的 " 并将 \" 替换为 "，我将进行编辑以显示该更改
@BrianHanf：是的，如果你使用匿名对象而不是字符串来构造seriesValues，就不会出现这个问题。而不是"{color:\"#009add\"}"，你想要new {color = "#009add"}
@BrianHanf：我拒绝了您的编辑，因为这不是正确的方法。您希望您的 seriesValues 对象首先使用对象结构而不是字符串。然后你就不需要删除引号或任何东西了。

【解决方案2】：

您可以通过以下方式访问页面上任何位置（包括脚本中）的模型属性：

@Model.MyPropertyName

考虑到这一点，您的 javascript 可能看起来像这样：

myColor = '@Model.MyGreenColorProperty';

注意@Model 周围的单引号...这非常重要，如果值没有被引号包围，则将不起作用。

【讨论】：

我正在为每列构建一个颜色数组或列表，不知道单一颜色会有什么帮助，我错过了一步吗？
虽然这可能适用于特定情况，但这并不是一个普遍使用的好方法。如果您输出的值带有撇号，您将破坏整个脚本。如果您改用 JSON 序列化，则字符串值将自动在其周围加上引号，并且其中的任何引号都将被适当地转义。