Using Razor inside Javascript (not MVC)

Question

I'd like to know if in my case I can use razor inside javascript!

<html>
    <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    </head>

    <body>
        <!--Div that will hold the pie chart-->
        <div id="chart_div"></div>
    </body>
</html>

This is just a basic code from Google that will show a pie chart with static values and I would like to add some variables to the numbers in the chart so that they can change based on data on my page.

data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

Basically this is the part that matters in that case, I would like to swap the numbers in this code to razor variables like for example @number or something, is this possible?

While searching around for some answers I found that adding in the javascript code would make it allow razor but I couldnt make it work, when I did that the chart didnt even show up, just by adding <text>, not even any razor code.

Or if you have experience with Google Charts API and know how to do this in a better way overall!

As a guide, never use injected values into JavaScript code, except for the most trivial info. It bypasses all the advantages of separate JS files (bundling, caching, TypeScript etc). Instead just inject values into the DOM (e.g. data- attributes) or worst case just inject a few global vars for your scripts to pickup. — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 13, 2017 at 15:39
Know anywhere specifically where I can read and learn about this? @goneCoding — Pontus Svedberg
– Pontus Svedberg, Commented Jan 13, 2017 at 15:43
Just imparting experience. Learned the hard way over the years of lot of things you shouldn't do as they make maintenance harder :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 13, 2017 at 16:10

Maxim Kuzmin · Accepted Answer · 2017-01-13 15:20:17Z

3

Yes you can use razor inside of the <script> tag.

<script type="text/javascript">
  data.addRows([
    ['@someRazorString', @someRazorNumber]
  ]);
</script>

also, you can render any .net object using

@{
var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
<text>
    <script type="text/javascript">
        var someJsObjectOrArray = @Html.Raw(JsonConvert.SerializeObject(Model.someDotNetObjectOrArray, jsonSerializerSettings)));
    </script>
</text>
}

answered Jan 13, 2017 at 15:20

Maxim Kuzmin

2,63421 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pontus Svedberg Over a year ago

oh, why didn't I just try it haha? Well, Thanks anyway!

Collectives™ on Stack Overflow

Using Razor inside Javascript (not MVC)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related