如何将变量从 Razor 传递给 JavaScript?

use*_*459 5 javascript c# charts

我有一个 C# 变量“值”,我想将它传递给 JavaScript Chartjs 数据对象。它呈现图表但不包括两个@p 值。请参阅下面的代码源:

.cshtml 文件:

@{
    int p1 = 43;
    int p2 = 45;


}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>     
    <div style="width: 400px;">
        <canvas id="lineChart" width="400" height="400"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="main.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

javascript文件:

var chart = document.getElementById("lineChart");

var data = {
    labels: [2012, 2013, 2014, 2015, 2016, 2017],
    datasets: [
        {
            label: "My Chart Label",
            fill: false,
            lineTension: 0.1,
            data: ['(@p1)', '(@p2)', 50, 48, 47, 52]
        }
    ]
};

var lineChart = new Chart(chart,
    {
        type: 'line',
        data: data
    }
);
Run Code Online (Sandbox Code Playgroud)

我该如何编写它才能使其正常工作?

Sha*_*han 7

像下面这样

看法:

@{
   var p1 = 43;
   var p2 = 45
}


<input type="hidden" id="PassingToJavaScript1" value=@p1>
<input type="hidden" id="PassingToJavaScript2" value=@p2>
Run Code Online (Sandbox Code Playgroud)

JavaScript:

var p1 = document.getElementById('PassingToJavaScript1').value;
var p2 = document.getElementById('PassingToJavaScript2').value;
Run Code Online (Sandbox Code Playgroud)


Kum*_*esh 6

你可以做

<script type="text/javascript">
    var p1 = @p1, p2= @p2;
</script>
Run Code Online (Sandbox Code Playgroud)

并使用 p1、p2。

  var data = {
        labels: [2012, 2013, 2014, 2015, 2016, 2017],
        datasets: [
            {
                label: "My Chart Label",
                fill: false,
                lineTension: 0.1,
                data: [p1, p2, 50, 48, 47, 52]
            }
        ]
    };
Run Code Online (Sandbox Code Playgroud)

在这种情况下,您不必使用隐藏的 html 字段,您可以扩展代码以使用更多字段,例如

var tempObj ={
                   tempData: "",
                   otherData:"",
                   moreData: ""
             }
Run Code Online (Sandbox Code Playgroud)