将mvc4中的viewbag中的单个值传递给javascript

时间:2013-07-03 10:55:39

标签: javascript asp.net-mvc asp.net-mvc-4

      `  // javascript 
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([

          ['I', 1],
          ['D', 2],
          ['S', 3],
          ['Sh', 4],

        ]);`

我需要传递这些值而不是上面的数字:

<%: ViewBag.QuerySh %></div> <%: ViewBag.QueryI %></div> <%: ViewBag.QueryS %></div>
<%: ViewBag.QueryD %></div>

Bytheway,视图页面中的值保持整数

请知道??? !!

先谢谢

1 个答案:

答案 0 :(得分:1)

如果你的javascript是内联的,你可以这样做:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
  ['I', <%: ViewBag.QueryI %>],
  ['D', <%: ViewBag.QueryD %>],
  ['S', <%: ViewBag.QueryS %>],
  ['Sh', <%: ViewBag.QuerySh %>],
]);

但是我建议将javascript存储在单独的.js文件中,并将值应用于相关的HTML数据属性并从那里调用它们。

<div class="google_data_table" data-queryi="<%: ViewBag.QueryI %>" data-queryd="<%: ViewBag.QueryD %>" data-querys="<%: ViewBag.QueryS %>" data-querysh="<%: ViewBag.QuerySh %>">
  //Google data table here
</div>

然后使用原始javascript或js库(我在下面的示例中使用了jQuery),在javascript文件中获取这些值并适当地应用它们:

var $googledatatable = $(".google_data_table");
var queryI = $googledatatable.data("queryi");
var queryD = $googledatatable.data("queryd");
var queryS = $googledatatable.data("querys");
var querySh = $googledatatable.data("querysh");

var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
  ['I', queryI],
  ['D', queryD],
  ['S', queryS],
  ['Sh', querySh],
]);

这个更整洁,允许您重复使用整个应用程序中可能包含的其他数据表的javascript逻辑。