C# 在Google可视化API(JavaScript)中动态添加行

C# 在Google可视化API(JavaScript)中动态添加行,c#,javascript,asp.net,asp.net-mvc-3,google-visualization,C#,Javascript,Asp.net,Asp.net Mvc 3,Google Visualization,我正在从事一个ASP.NET MVC 3项目,该项目要求我通过用户输入上传一个.xls/.xlsx,将其加载到一个数据表中,并在视图中放置它的一个可视化视图 听起来很简单 我能够创建DataTable并将对象传递回视图,但是我无法通过Google的可视化API在视图上呈现数据表——我看到的所有示例都需要静态表示的字段,即: var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data

我正在从事一个ASP.NET MVC 3项目,该项目要求我通过用户输入上传一个.xls/.xlsx,将其加载到一个数据表中,并在视图中放置它的一个可视化视图

听起来很简单

我能够创建DataTable并将对象传递回视图,但是我无法通过Google的可视化API在视图上呈现数据表——我看到的所有示例都需要静态表示的字段,即:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);
但是,由于我的应用程序接受用户输入,因此列标题、维度和内容都是动态的。我正在寻找一种动态添加数据的方法。以下是我当前拥有的代码,其中Model是传入的数据表:

@model System.Data.DataTable
@using GridMvc.Html
@{
    ViewBag.Title = "File Upload";
    <h2>@ViewBag.Message</h2>
}

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
        google.load('visualization', '1', { packages: ['table'] });
        google.setOnLoadCallback(drawTable);
        function drawTable( Model ) {
            var data = new google.visualization.DataTable();
            var numRows = Model.Rows.Count;
            var numCols = Model.Rows[0].Count;

            for (var i = 0; i < numCols; i++)
                data.addColumn('string', Model.Rows[0].ItemArray[i]);

            for (var i = 1; i < numRows; i++)
                data.addRow(Model.Rows[i].ItemArray);         

            //data.addRows([['2967773', '13-1014428', '', 'Not Recommended -Internship', '7- Not Recommended',
            //                'University 1', '', '', '', '', '', '', '' ]]);

            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, { showRowNumber: true });
        }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
  <p>Done</p>
</html>
@model System.Data.DataTable
@使用GridMvc.Html
@{
ViewBag.Title=“文件上传”;
@查看包。留言
}
load('visualization','1',{packages:['table']});
setOnLoadCallback(drawTable);
功能绘图台(型号){
var data=new google.visualization.DataTable();
var numRows=Model.Rows.Count;
var numCols=Model.Rows[0]。计数;
对于(变量i=0;i
有人知道怎么做吗?
提前谢谢

如上所述,C#中的
数据表与Google API中的
数据表不同。我最终找到了一个第三方库()来处理这个问题,并将以下内容传递到viewbag中:

ViewBag.Data = new Bortosky.Google.Visualization.GoogleDataTable(ConvertTable( DATA )).GetJson();

仅供参考,ASP.net
DataTable
与Google可视化API
DataTable
不同。如果要使用ASP.net数据表,则需要将其内容解析为可视化API数据表。您可能需要考虑创建一个兼容的对象服务器端并将其作为JSON字符串输出。