Model Binding to AJAX suddenly not working

Question

I have an AJAX POST request which is supposed to send a user's search filters off to a controller action and return appropriate results. This was working perfectly, then it just stopped working. I haven't changed a thing, it was working fine, the model was binding exactly as intended, then it just broke and now it will only bind to the non-array items.

Here is my full Jquery AJAX code:

var parent = $('.recipe-search > .search-form > .filter-panel > .area');
    var searchobj = {
        SearchTerm: $(parent).find('input.search-terms').val(),
        TimeRange:
            [
                $(parent).find('div.time-range').slider("values", 0),
                $(parent).find('div.time-range').slider("values", 1)
            ],
        DifficultyRange: [
            $(parent).find('div.difficulty-range').slider("values", 0),
            $(parent).find('div.difficulty-range').slider("values", 1)
        ],
        Vegetarian: $(parent).find('input.vegetarian').is(':checked'),
        Vegan: $(parent).find('input.vegan').is(':checked'),
        DietTags: $(parent).find('input.diet-tags').val().split(' ')
    };

    $.ajax({
        type: "POST",
        url: $('.recipe-search > .search-form').attr('action'),
        data: searchobj,
        error: function () {
            alert("There was an error getting your search results, please try again");
        },
        success: function (result) {
            popresults(result);
        }
    });

Here is the C# model:

For anyone wondering the sliders are JQuery UI sliders.

In the Chrome networking tab, I can see the request gets sent off as intended

However looking at the debug watch window when a breakpoint is hit, it is clear that they are not being bound to the model correctly

I'll repeat myself, and I know some of you will call me out on this saying that I did change something, I must have, but I did not change a thing between it working exactly as intended, and it not working.

Something that does strike me as odd is that the arrays sent in the request (look at the network tab photo) appear to be sending the two values as individual properties instead of values in an array.

Answer 1

Well it seems that adding two lines to the AJAX code fixed this:

datatype: "json", traditional: true

Now it works completely as intended.