Как отобразить данные в jQuery Datatable в ASP.NET Core MVC при нажатии кнопки

Я новичок в работе с таблицами данных jQuery, использующими AJAX в ASP.NET Core 6 MVC. Я включил свой code как в представление, так и в контроллер. Я пытаюсь получить данные от контроллера и отобразить их в представлении, содержащем DataTable, при нажатии кнопки.

Представление:

Контроллер:

Контроллер возвращает следующие две строки данных.

Однако я получаю всплывающее сообщение об ошибке, и данные не отображаются в сетке. В пустой сетке написано: "В таблице нет данных".

<div>
    <div style="padding-top: 20px; padding-bottom:20px">
            <button class="btn btn-lg btn-primary" onclick="javascript:runReport();">Run 
                 Report</button>
    </div>
    <div>
        <table class="table table-bordered table-striped" id="riskReport">
            <thead class="bg-dark text-white">
                <tr>
                    <th>CustomerNumber</th>
                    <th>CustomerStatus</th>
                    <th>StartDate</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>
@section Scripts {
    @{
                        <partial name="_ValidationScriptsPartial" />
                        <partial name="_DataTableCDN" />
    }
    <script>
        
        function runReport() {
            
            var reportData;
            
            var dataTableOptions = {
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "columnDefs": "",
                "ajax": {
                    url: "/Reports/ProcessReport",
                    type: "POST",
                    data: reportData,
                    // "datatype": "json",
                    "error": function (e) {
                        alert(e)
                    },
                    
                    "dataSrc": function (d) {
                        alert(JSON.stringify(d))
                        // return JSON.stringify(d);
                        return d;
                    },
                    "columns":[
                        { "data": "customerNumber", "name": "CustomerNumber", "autoWidth": 
           true },
                        { "data": "customerStatus", "name": "CustomerStatus", "autoWidth": 
            true },
                        { "data": "startDate", "name": "StartDate", "autoWidth": true }
                    ]
                    
                }
            }
            
            reportData = $('#reportForm').serializeArray();
            var myDataTable = $('#riskReport').DataTable(dataTableOptions);
        }
                
    </script>
[HttpPost]
public async Task<JsonResult> ProcessReport(ReportsConfigurationVM reportsConfigurationVM)
{
    List<RiskByYearTest> myList = new List<RiskByYearTest>();

    RiskByYearTest r1 = new RiskByYearTest();
    r1.CustomerNumber = "4549601";
    r1.CustomerStatus = "Active";
    r1.StartYear = "2022";

    RiskByYearTest r2 = new RiskByYearTest();
    r2.CustomerNumber = "4549602";
    r2.CustomerStatus = "Closed";
    r2.StartYear = "2023";

    myList.Add(r1);
    myList.Add(r2);

    var result = Json(myList);

    return result;
}
[
    {
        "customerNumber": "4549601",
        "customerStatus": "Active",
        "startYear": "2022"
    },   
    {
        "customerNumber": "4549602",
        "customerStatus": "Closed",
        "startYear": "2023"
    }
]
Август
Вопрос задан19 мая 2024 г.

1 Ответ

2
Демид
Ответ получен15 сентября 2024 г.

Ваш ответ

Загрузить файл.