从MVC控制器获取JavaScript数据

Question

我正在使用Google图表中的时间轴选项来显示一些项目可用性。

链接：Google Chart Timeline

它显示如下内容

使用此代码：

google.setOnLoadCallback(drawChart);
function drawChart() {

  var container = document.getElementById('example3.1');
  var chart = new google.visualization.Timeline(container);

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Position' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'President',          'George Washington', new Date(1789, 3, 29), new Date(1797, 2, 3)],
    [ 'President',          'John Adams',        new Date(1797, 2, 3),  new Date(1801, 2, 3)],
    [ 'President',          'Thomas Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3)],
    [ 'Vice President',     'John Adams',        new Date(1789, 3, 20), new Date(1797, 2, 3)],
    [ 'Vice President',     'Thomas Jefferson',  new Date(1797, 2, 3),  new Date(1801, 2, 3)],
    [ 'Vice President',     'Aaron Burr',        new Date(1801, 2, 3),  new Date(1805, 2, 3)],
    [ 'Vice President',     'George Clinton',    new Date(1805, 2, 3),  new Date(1812, 3, 19)],
    [ 'Secretary of State', 'John Jay',          new Date(1789, 8, 25), new Date(1790, 2, 21)],
    [ 'Secretary of State', 'Thomas Jefferson',  new Date(1790, 2, 21), new Date(1793, 11, 30)],
    [ 'Secretary of State', 'Edmund Randolph',   new Date(1794, 0, 1),  new Date(1795, 7, 19)],
    [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 19), new Date(1800, 4, 11)],
    [ 'Secretary of State', 'Charles Lee',       new Date(1800, 4, 12), new Date(1800, 5, 4)],
    [ 'Secretary of State', 'John Marshall',     new Date(1800, 5, 12), new Date(1801, 2, 3)],
    [ 'Secretary of State', 'Levi Lincoln',      new Date(1801, 2, 4),  new Date(1801, 4, 0)],
    [ 'Secretary of State', 'James Madison',     new Date(1801, 4, 1),  new Date(1809, 2, 2)]]);

  chart.draw(dataTable);
}

我希望列的名称（dataTable.addColumn）的可变数量来自MVC控制器。有没有办法做到这一点？

Answer 1

是的，只要此脚本在视图中，而不是在JS文件中，就可以像下面那样注入变量：

dataTable.addColumn({ type: 'string', id: '@Model.FirstColumnName' });

MVC允许你做很多注入脚本的内容;记住它的服务器端代码被渲染到客户端标记。你只需要确保它被正确呈现。我甚至在我的视图中使用了将模型转换为JSON对象的实用程序，没有问题。

Answer 2

您可以实现一个MVC控制器方法，该方法返回一个具有type和id属性的JSON对象，并执行ajax调用以检索它们

$.getJSON( "/Columns", function( data ) {
    $.each( data, function( key, val ) {
      //use dataTable.addColumn to add columns
    });
});