在JavaScript（而不是MVC）中使用Razor

我想知道如果在我的情况下，我可以在JavaScript内使用剃须刀！在JavaScript（而不是MVC）中使用Razor

<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>

这是谷歌只是一个基本的代码，将显示静态值的饼图，我想一些变量添加到数字的图表中，使他们能够基于我的页面上的数据。

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

基本上，这是在这种情况下重要的部分，我想换号码在此代码剃刀例如像@number什么的，这是可能的变量？

虽然搜索了一些答案，我发现在JavaScript代码中添加将允许剃须刀，但我无法使它工作，当我做了图表甚至没有显示，只需加入<text>，甚至没有任何剃须刀码。

或者如果您有使用Google Charts API的经验，并知道如何以更好的方式做到这一点！

来源

2017-01-13 Pontus Svedberg

作为指导任何.NET对象，*从未*使用注射值到JavaScript代码，除了最琐碎的信息。它绕过了单独的JS文件（捆绑，缓存，TypeScript等）的所有优点。相反，只需将值注入DOM（例如'data-'attributes）或者最糟糕的情况下，只需为脚本添加几个全局变量即可。 –

知道任何地方，特别是我可以阅读和了解这一点？ @goneCoding –

只是传授经验。经过多年的努力学习了很多你不应该做的事情，因为他们让维护变得更难:) –

是的，你可以在<script>标签内使用razor。

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

也可以渲染使用

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

来源

2017-01-13 15:20:17

哦，为什么我不试试呢哈哈？好吧，谢谢！ –

在JavaScript（而不是MVC）中使用Razor

回答

相关问题