Как отобразить данные в таблице данных jQuery в ASP.NET Core MVC при событии нажатия кнопки

Я новичок в таблицах данных jQuery, использующих AJAX в ASP.NET Core 6 MVC. Я включил свой код как в представление, так и в контроллер. Я пытаюсь получить данные от контроллера и отобразить их в представлении, содержащем 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>StartYear</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": "StartYear", "name": "StartDate", "autoWidth": true }
                    ]
                    
                }
            }
            
            reportData = $('#reportForm').serializeArray();
            var myDataTable = $('#riskReport').DataTable(dataTableOptions);
        }
                
    </script>

Контроллер:

[HttpPost]
public async Task<string> 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);

    return JsonConvert.SerializeObject(myList);
}

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

[
    {
        "CustomerNumber": "4549601",
        "CustomerStatus": "Active",
        "StartYear": "2022"
    },   
    {
        "CustomerNumber": "4549602",
        "CustomerStatus": "Closed",
        "StartYear": "2023"
    }
]

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

Предупреждение DataTables: table id=riskReport — запрошен неизвестный параметр «0» для строки 0, столбец 0. Дополнительную информацию об этой ошибке см. https://datatables.net/tn/4