0

我正在尝试将 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() 将控制器的响应转换为行，但是我尝试的每种方法都给了我不同的错误。与其问每种情况下出了什么问题，我想我只想问正确的方法是什么。使这项工作正常工作缺少什么？

4

1 回答 1

0

您是否检查过文档上的第三种方法（JavaScript Literal Initializer）？谷歌和人们说这是网络服务中的一种常用方法。

于 2019-11-01T00:50:27.583 回答