如何在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 。

要進行更深入的了解，請參見以下答案： 在JavaScript中使用Razor

Answer 2

您可以通過以下方式在頁面上任何位置（包括腳本內）從模型訪問屬性：

@Model.MyPropertyName

考慮到這一點，您的JavaScript可能看起來像這樣：

myColor = '@Model.MyGreenColorProperty';

請注意@Model周圍的單引號...這非常重要，如果該值不被引號引起來，則將不起作用。