将数组从JavaScript传递到Asp.net Core

Question

Here is code for javascript which calls asp.net CustomHeatMapDate

$('.Date').change(function () {
    var data = [];
    console.log();
    var dateList = [{"Date":"03/23/2016"}, {"Date":"03/24/2016"}];
    $.ajax({
        async: true,
        type: "GET",
       url: "/Home/CustomHeatMapDate",
       data: { Date: dateList },
        dataType: "json",
        success: function (data) {
            console.log(data);
            for (var i = 0, len = data.length; i < len; i++) {
                pushdata(data[i]);
            }
        }
    })

Here is the Asp.net Controller

public IActionResult CustomHeatMapDate(Array[] Date)
{           
    return View();
}

But Date Array is null

Answer 1

There are a few issues, I'll go through them and explain why and how to fix them.

The first one is the data you are sending to the controller, you've structured it so the outcome will be {Date:[{"Date":"03/23/2016"}, {"Date":"03/24/2016"}]} when it should look like this {Date:["03/23/2016", "03/24/2016"]} then you will be sending a flat array up instead of an array of objects.

The second issue is your datatype in your controller, you've got it set to Array[] This is expecting and array of arrays. What you should have is DateTime[] , this will now expect an array of date(times). This will mean you'll have to change your dates being sent up to 2016-03-23 so it can be deserialized properly.

The last is the fact that you're doing this as a GET which doesn't really handle passing structured data in the parameters as it puts it all in the query string, which as your array of dates gets longer you may run the risk of it becoming too long. I'd recommend using a POST instead, although if you really do want to do a GET then as Alexandru-Ionut Mihai said add traditional:true to the ajax properties

TL;DR The data structure on the client and server side are wrong

Putting it all together your code should look something like this

JS

$('.Date').change(function () {
    console.log();
    var dateList = ["2016-03-23", "2016-03-24"];
    $.ajax({
        type: "POST",
        url: "/Home/CustomHeatMapDate",
        data: {
            Date: dateList
        },
        dataType: "json",
        success: function (data) {
            console.log(data);
            for (var i = 0, len = data.length; i < len; i++) {
                pushdata(data[i]);
            }
        }
    })
});

C#

public ActionResult CustomHeatMapDate(DateTime[] Date)
{
    return Ok();
}

PS there is no need to specify async:true as by default JQuery Ajax will set it to true.