Question

我正在尝试将Google数据网格（使用gstatic.com）作为MVC .net Core项目的一部分。我将Json从控制器返回到视图。我收到的json看起来正确（我相信），但是我还无法弄清楚如何获取json以在数据网格中动态创建行。我到处浏览过不同的文章，但是现在还没有找到行之有效的

。

这就是我所拥有的

控制器：

[HttpPost]
public JsonResult ReportJson(string dateFrom, string dateTo, string ticketNumber, string stationId, string LoadingFile)
{

    DateTime dateStart = Convert.ToDateTime(dateFrom);
    DateTime dateEnd = Convert.ToDateTime(dateTo);

    List<ReportDTO> ds = new List<ReportDTO>();

    ds = repo.GetReport(dateStart, dateEnd, ticketNumber, stationId, LoadingFile);

    string objectString = ds.ToString();

    var o = JsonConvert.SerializeObject(ds);

    return Json(o);
}

它返回的json如下：

[{"Id":0,"TicketNumber":"100000","ConfirmedTicketNumber":null,"GroupName":"HIGHWAY X","LactNumber":"5","LoadDateTime":"2019-10-31T00:00:00","BolNumber":"123456","LeaseNumber":"12345","LeaseName":"My Lease","DriverName":"SMITH, BOBBY","TruckNumber":"1","CarrierName":"NEW CARRIER","GrossBbl":18.02,"Gsv":18.36,"Api":39.00,"Deg":104.90,"Gross":85.0,"NetVolume":131.5,"OrdHdrnumber":0,"RefNumber":null,"CmdName":"NEW TICKET","CmdCode":"ABC-123","AverageLineTemp":100.0,"HighTemp":0.00,"BottomTemp":0.00,"OrdConsignee":null,"OrdConsigneeName":null,"DestCmpId":"ABC3","DestCmpName":"SOME DATA","OrdCompletiondate":"2019-10-31T00:00:00","Notes":null,"Timestamp":"2019-10-31T00:00:00","ModifiedBy":"Joe","LoadingFile":"template.xlsx","UpdatingRecordMessage":null,"RecordErrored":false,"DateFrom":null,"DateTo":null},
{"Id":1,"TicketNumber":"100001","ConfirmedTicketNumber":null,"GroupName":"HIGHWAY X","LactNumber":"10","LoadDateTime":"2019-10-31T00:00:00","BolNumber":"234567","LeaseNumber":"12345","LeaseName":"My Lease","DriverName":"SMITH, BOBBY","TruckNumber":"1","CarrierName":"NEW CARRIER","GrossBbl":5.5,"Gsv":6.6,"Api":40.00,"Deg":45.9,"Gross":88.0,"NetVolume":144.0,"OrdHdrnumber":0,"RefNumber":null,"CmdName":"NEW TICKET 2","CmdCode":"ABC-456","AverageLineTemp":50.0,"HighTemp":50.00,"BottomTemp":50.00,"OrdConsignee":null,"OrdConsigneeName":null,"DestCmpId":"ABC3","DestCmpName":"SOME MORE DATA","OrdCompletiondate":"2019-10-31T00:00:00","Notes":null,"Timestamp":"2019-10-31T00:00:00","ModifiedBy":"Joe","LoadingFile":"template.xlsx","UpdatingRecordMessage":null,"RecordErrored":false,"DateFrom":null,"DateTo":null}]

这是我在剃须刀页面上的相关代码：

<div id="table_div"></div>
<input type="button" value="Call Json" onclick="loadChart()"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      //google.charts.setOnLoadCallback(drawTable);

    function loadChart() {
        $.ajax(  
        {  
            type: 'POST',  
            data: $('#DataQuery').serialize(),
            dataType: 'JSON',  
            url: '/Report/ReportJson',  
            success:  
                function (response)  
                {  
                    drawTable(response);
                }  
        });
    }


    function drawTable(response) {

        var json_data = JSON.parse(response);

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Api');
        data.addColumn('string', 'AverageLineTemp');
        data.addColumn('string', 'BolNumber');
        data.addColumn('string', 'BottomTemp');
        data.addColumn('string', 'CarrierName');
        data.addColumn('string', 'CmdCode');
        data.addColumn('string', 'CmdName');
        data.addColumn('string', 'ConfirmedTicketNumber');
        data.addColumn('string', 'DateFrom');
        data.addColumn('string', 'DateTo');
        data.addColumn('string', 'Deg');
        data.addColumn('string', 'DestCmpId');
        data.addColumn('string', 'DestCmpName');
        data.addColumn('string', 'DriverName');
        data.addColumn('string', 'Gross');
        data.addColumn('string', 'GrossBbl');
        data.addColumn('string', 'GroupName');
        data.addColumn('string', 'Gsv');
        data.addColumn('string', 'HighTemp');
        data.addColumn('string', 'Id');
        data.addColumn('string', 'LactNumber');
        data.addColumn('string', 'LeaseName');
        data.addColumn('string', 'LeaseNumber');
        data.addColumn('string', 'LoadDateTime');
        data.addColumn('string', 'LoadingFile');
        data.addColumn('string', 'ModifiedBy');
        data.addColumn('string', 'NetVolume');
        data.addColumn('string', 'Notes');
        data.addColumn('string', 'OrdCompletiondate');
        data.addColumn('string', 'OrdConsignee');
        data.addColumn('string', 'OrdConsigneeName');
        data.addColumn('string', 'OrdHdrnumber');
        data.addColumn('string', 'RecordErrored');
        data.addColumn('string', 'RefNumber');
        data.addColumn('string', 'TicketNumber');
        data.addColumn('string', 'Timestamp');
        data.addColumn('string', 'TruckNumber');
        data.addColumn('string', 'UpdatingRecordMessage');

        //ADD ROWS????

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    }
</script>

带有问号的部分（应在其中添加行）是我遇到的问题。我曾根据不同的文章尝试过不同的方法，这些方法涉及如何使用Data.Addrows（）和Data.Addrow（）将控制器的响应转换为行，但是我尝试的每种方法都给了我一个不同的错误。我没有问每种情况出什么问题，而是想问正确的方法是什么。使这项工作正常进行的缺失是什么？

Answer 1

您是否选中了the 3rd method(JavaScript Literal Initializer) on the doc？ Google和其他人说这是Web服务中的常见方法。

使用动态生成的JSON填充Google数据表的正确方法

1 个答案: