Upon reviewing the code, there are a few key issues that need to be addressed along with solutions on how to fix them.
The first issue lies in the structure of the data being sent to the controller. Currently, it is formatted as
{Date:[{"Date":"03/23/2016"}, {"Date":"03/24/2016"}]}
, but it should actually be structured like
{Date:["03/23/2016", "03/24/2016"]}
. By making this adjustment, you will ensure that a flat array is sent instead of an array of objects.
The second problem pertains to the datatype specified in the controller, which is currently set to Array[] expecting an array of arrays. It should be changed to DateTime[] to anticipate an array of date(times). Additionally, dates should be modified to follow the format 2016-03-23 for proper deserialization.
Lastly, using a GET method may pose limitations when passing structured data in parameters due to query string restrictions. Consider utilizing a POST request instead to avoid potential length constraints. Alternatively, add traditional:true to the ajax properties if sticking with a GET approach, as suggested by Alexandru-Ionut Mihai.
TL;DR Rectify data structure discrepancies on client and server sides.
In conclusion, here is an updated version of your code:
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();
}
P.S There is no need to explicitly set async:true as JQuery Ajax defaults to true for asynchronous requests.