Question

Here is a acript that I created to generate an array:

var data_points = $("#bcc_datapoint_selection").find("input:checked").map(function () {
    return $(this).val();
}).get();

Console log output:

["3","4","6"]

Ajax post script:

$.ajax({
    url: '@Url.Action("BccGetMeterReadingsChart", "Widget")',
    type: 'POST',
    data: { dataPoints: data_points },
    success: function (result) {
        $("#bcc_chart").html(result);
    },
    error: function () {
         alert("Seçilen kritere uygun veri bulunamadı!");
    }
}); //end ajax

Controller method:

public ActionResult BccGetMeterReadingsChart(string[] dataPoints)
{
    // Some code
    return Json("", JsonRequestBehavior.AllowGet);
}

Debug output:

dataPoints : null

Request data output:

dataPoints%5b%5d=3&dataPoints%5b%5d=4&dataPoints%5b%5d=6

What am I missing? Is it a problem in an Ajax function? Or another problem?

Answer 1

Try setting the traditional parameter to true for your AJAX request:

$.ajax({
    url: '@Url.Action("BccGetMeterReadingsChart", "Widget")',
    type: 'POST',
    data: { dataPoints: data_points },
    traditional: true,
    success: function (result) {
        $("#bcc_chart").html(result);
    },
    error: function () {
         alert("Seçilen kritere uygun veri bulunamadı!");
    }
});

Now the POST payload will look like this:

dataPoints=3&dataPoints=4&dataPoints=6

And the model binder will happily bind the collection of points to your action argument.