How to pass variables from Razor to JavaScript?

Question

I have one C# variable "value" that I want to pass into JavaScript Chartjs data object. It renders the chart but does not include the two @p values. See code source below:

cshtml file:

@{
    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 file:

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

How can I write it so that it works?

Possible duplicate of [Using Razor within JavaScript](https://stackoverflow.com/questions/4599169/using-razor-within-javascript) — Samvel Petrosov, May 23 '17 at 18:50
Possible duplicate of [passing server side mvc variables to javascript](https://stackoverflow.com/questions/14822000/passing-server-side-mvc-variables-to-javascript) — Dayan, May 23 '17 at 18:59
Sorry, can you edit your answer for two variables @p1 and @p2? — user3062459, May 23 '17 at 19:08
Add p as a *data* attribute to lineChart element, e,g, *data-p* attrribute and get its value using jQuery : $('#lineChart').data('p') — rraszewski, May 23 '17 at 19:09

Kumar Nitesh · Accepted Answer · 2017-05-23T19:09:58.770

9

You can do

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

and use 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]
            }
        ]
    };

In this case you don't have to use hidden html fields and you can expand your code to use more field like

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

edited May 23 '17 at 19:09

answered May 23 '17 at 19:00

Kumar Nitesh

1,634
15
18

1

One thing to add in is that any "@" that are part of the _static_ javascript code ( as used in JSON+LD for schema.org) would need to be escaped as `{ "@@Key": "Value" }` – Mad Myche May 23 '17 at 19:31

Shan · Answer 2 · 2017-05-23T19:12:42.063

7

Something like below

View:

@{
   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;

edited May 23 '17 at 19:12

answered May 23 '17 at 18:54

Shan

578
5
18

1

Sorry, can you edit your answer for two variables @p1 and @p2? – user3062459 May 23 '17 at 19:08

score 3 · Answer 3 · answered May 23 '17 at 18:57

Use a hidden field which will hold the value and then read the hidden field's value from JavaScript.

Example:

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

Sorry, can you edit your answer for two variables @p1 and @p2? — user3062459, May 23 '17 at 19:08

How to pass variables from Razor to JavaScript?

3 Answers3