如何将变量从Razor传递到JavaScript？

Question

如何将变量从Razor传递到JavaScript？

5

我有一个C#变量“value”，我想传递到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>

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
    }
);

如何编写代码使其正常运行？

- user3062459

1

可能是在JavaScript中使用Razor的重复问题。 - Samvel Petrosov

1

可能是将服务器端MVC变量传递到JavaScript的重复问题。 - Dayan

1

抱歉，您能否编辑您的答案，将@p1和@p2两个变量加入进去？ - user3062459

1

将p作为数据属性添加到lineChart元素中，例如data-p属性，并使用jQuery获取其值：$('#lineChart').data('p') - rraszewski

3个回答

7

以下是一些示例

视图：

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


<input type="hidden" id="PassingToJavaScript1" value=@p1>
<input type="hidden" id="PassingToJavaScript2" value=@p2>

JavaScript：

var p1 = document.getElementById('PassingToJavaScript1').value;
var p2 = document.getElementById('PassingToJavaScript2').value;

- Shan

1

抱歉，您能否编辑您的答案，将@p1和@p2两个变量加入进去？ - user3062459

3

使用一个隐藏字段来保存值，然后从JavaScript中读取隐藏字段的值。

例如：

@{
    int p = 43;

}

<!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>
        <input type="hidden" id="someId" value="@p" />
    </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>

JS

var chart = document.getElementById("lineChart");
var hiddenFieldValue = document.getElementById("someId").value;

var data = {
    labels: [2012, 2013, 2014, 2015, 2016, 2017],
    datasets: [
        {
            label: "My Chart Label",
            fill: false,
            lineTension: 0.1,
            data: ['(hiddenFieldValue)', 45, 50, 48, 47, 52]  // Not really sure how to format the data but you get main idea...
        }
    ]
};

var lineChart = new Chart(chart,
    {
        type: 'line',
        data: data
    }
);

- George Findulov

1

抱歉，您能否编辑您的答案使其包含两个变量@p1和@p2？ - user3062459

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kumar Nitesh · Accepted Answer

您可以做：

<script type="text/javascript">
    var p1 = @p1, p2= @p2;
</script>

并且使用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]
            }
        ]
    };

在这种情况下，您无需使用隐藏的HTML字段，而且您可以扩展您的代码以使用更多的字段，例如：

var tempObj ={
                   tempData: "",
                   otherData:"",
                   moreData: ""
             }