jQuery AJAX not sending data

Question

This is my jQuery / JS code:

var selectedMonths = [];
var selectedLocations = [];
var selectedEvents = [];

$("#filter").click(function ()
{
    $('#months li').each(function ()
    {
        if ($(this).find('input[type=checkbox]').is(':checked'))
        {
            selectedMonths.push($(this).find('a').attr('data-value'));
        }
    });

    $('#locations li').each(function () {
        if ($(this).find('input[type=checkbox]').is(':checked')) {
            selectedLocations.push($(this).find('a').attr('data-value'));
        }
    });

    $('#events li').each(function () {
        if ($(this).find('input[type=checkbox]').is(':checked')) {
            selectedEvents.push($(this).find('a').attr('data-value'));
        }
    });

    var months = { months: selectedMonths };

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Shop/FilterRinglet',
        data: months,
        traditional: true,
        success: function (result) {
            alert("success");
        },
        failure: function (response) {
            alert(response);
        }
    });
});

And this is my simple controller:

[HttpPost]
public ActionResult FilterRinglet(List<string> months)
{
    return Json(new { x = "sdg", received = "ok" });
}

But Chrome DevTools only show an 500 - Internal Server Error.

I want to send three string arrays to that controller (in example you see only the attempts of sending one).

I tried this ( How can I post an array of string to ASP.NET MVC Controller without a form? ) and may other answers. I can´t get this to work, would you please tell me where my mistake is hidden?

Edit: I also tried the following line of code

var months = JSON.stringify({ months: selectedMonths });

selectedMonths looks like this

That does not lead to a 500, but in controller it looks like this:

Edit2: I tried this, too:

        $.post('/Shop/FilterRinglet', { 'months[]': selectedMonths }, function (response) {
            alert(response);
        });

but nothing except "" reaches the controller.

Edit3:

I changed

[HttpPost]
public ActionResult FilterRinglet(List<string> months)

to

[HttpPost]
public ActionResult FilterRinglet(string[] months)

but still no success.

Edit4:

I also created a class

public class RingletData
{
    public List<string> months { get; set; }
}

and changed the method accordingly. months is still "".

Answer 1

So, after hours of research and combining different approaches, I came up with the following solution:

// old line, needs to be changed: var months = { months: selectedMonths };
// new line, already contains the other arrays:
var data = JSON.stringify({ months: selectedMonths, locations: selectedLocations, events: selectedEvents });

$.ajax({
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    type: 'POST',
    url: '/Shop/FilterRinglet',
    data: data,
    traditional: true,
    success: function (result) {
        alert("success");
    },
    failure: function (response) {
        alert(response);
    }
});

The controller:

    [HttpPost]
    public ActionResult FilterRinglet(RingletData data)
    {
        ...
    }

Important is, if you use JSON.stringify(...), to not forget contentType: "application/json". This was my mistake, because in my different trial and errors I forgot to use this - but I didn´t know it was necessary when working with JSON.stringify(...)

Also you should create an object, like RingletData in my case:

public class RingletData
{
    public string[] months { get; set; }
    public string[] locations { get; set; }
    public string[] events { get; set; }
}

Your sent data is then accessible by using data.months.

Answer 2

Have you tried using JSON.stringify AND setting traditional to false. I don't believe those work together.

(I would have left this as a comment, but I don't have enough rep).