Ajax .NET Core MVC send JSON Array to Controller using Ajax

Question

I am trying to send my data in a table to Controller by Columns, but I have tried so many methods, the parameter table is always null. Could you please give some advise on this? Thanks

Front-end Code

var data = {
        "Peril": histLossesTable.getDataAtCol(0),
        "OccurrenceYear": histLossesTable.getDataAtCol(1),
        "Month": histLossesTable.getDataAtCol(2),
        "Event": histLossesTable.getDataAtCol(3),
        "InsuredLoss": histLossesTable.getDataAtCol(4),
        "UnderWriterYear": histLossesTable.getDataAtCol(6),
        "ReturnPeriod": histLossesTable.getDataAtCol(5),
        "SelectedIndex": histLossesTable.getDataAtCol(7),
        "TrendedLoss": histLossesTable.getDataAtCol(8),
        "ReportingThreshold": document.getElementById('reportingThreshold').value
    };
    console.log(JSON.stringify(data));

$.ajax({
        type: "POST",
        url: "/home/test",
        dataType: "json",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        success: function (e) {
            if (e.success == true) {
                console.log('POST Successful');
            }
            else {
                console.log('POST Failed');
            }
        }
    })

console.log(JSON.stringify(data))

{"Peril":["BF","BF"],"OccurrenceYear":["2014","2016"],"Month":["1","1"],"Event":["",""],"InsuredLoss":["10020623.440000998","5370632.38"],"UnderWriterYear":["2013","2015"],"ReturnPeriod":[12,12],"SelectedIndex":["1.801998974252194","1.6036056232964842"],"TrendedLoss":["18057153.16024929","8612376.28522618"],"ReportingThreshold":""}

Model

public class HistoricalLossTable
    {
        public String[] Peril { get; set; }

        public int[] OccurrenceYear { get; set; }

        public int[] Month { get; set; }

        public String [] Event { get; set; }

        public double[] InsuredLoss { get; set; }

        public int[] UnderWriterYear { get; set; }

        public double[] ReturnPeriod { get; set; }

        public double[] SelectedIndex { get; set; }

        public double[] TrendedLoss { get; set; }

        public double ReportingThreshold { get; set; }
    }

And Controller

[HttpPost]
public IActionResult test([FromBody]HistoricalLossTable table)
{
    return View();
}

Answer 1

As derloopkat said in comment, you should not make the number fields as string. Try to convert your payload like below:

{
"Peril":[
    "BF",
    "BF"
],
"OccurrenceYear":[
    2014,
    2016
],
"Month":[
    1,
    1
],
"Event":[
    "",
    ""
],
"InsuredLoss":[
    10020623.440000998,
    5370632.38
],
"UnderWriterYear":[
    2013,
    2015
],
"ReturnPeriod":[
    12,
    12
],
"SelectedIndex":[
    1.801998974252194,
    1.6036056232964842
],
"TrendedLoss":[
    18057153.16024929,
    8612376.28522618
]
}

Answer 2

I will suggest trying type to string based on your json and add constructor to initialize array(weird but can be an issue). Try with:

public class HistoricalLossTable
{
    public string[] Peril { get; set; }

    public string[] OccurrenceYear { get; set; }

    public string[] Month { get; set; }

    public string[] Event { get; set; }

    public string[] InsuredLoss { get; set; }

    public string[] UnderWriterYear { get; set; }

    public string[] ReturnPeriod { get; set; }

    public string[] SelectedIndex { get; set; }

    public string[] TrendedLoss { get; set; }

    public string ReportingThreshold { get; set; }

    public HistoricalLossTable()
    {
        Peril = new string[2];
        OccurrenceYear = new string[2];
        Month = new string[2];
        Event = new string[2];
        InsuredLoss = new string[2];
        UnderWriterYear = new string[2];
        ReturnPeriod = new string[2];
        SelectedIndex = new string[2];
        TrendedLoss = new string[2];
    }
}