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

Question

我想通过我的代码在 google 图表中设置颜色，但不确定如何操作。我在 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}

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

Answer 1

只需使用JSON序列化：

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

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

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

Answer 2

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

@Model.MyPropertyName

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

myColor = '@Model.MyGreenColorProperty';

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

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

how to pass options to JavaScript in a cshtml page

javascript

c#

asp.net-mvc

google-visualization

razor