Правильный способ заполнения таблицы данных Google динамически генерируемым JSON - PullRequest
Новая
       32

Правильный способ заполнения таблицы данных Google динамически генерируемым JSON

0 голосов
/ 01 ноября 2019

Я пытаюсь создать сетку данных 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 (), но каждый пробный подход выдал мне свою ошибку. Вместо того, чтобы спрашивать, что было не так в каждом случае, я подумал, что просто спрошу, какой будет правильный подход. Чего не хватает, чтобы эта работа работала правильно?

1 Ответ

0 голосов
/ 01 ноября 2019

Вы проверили третий метод (JavaScript Literal Initializer) в документе ? Google и люди говорят, что это общий подход в веб-сервисе.

...