ajax post on MVC .NET does not pass array correctly

Question

I have a simple modal that uses select2 to get a list of Products from the server. User can multiple choose products and hit Ok to refine a search.

My following setup grabs the data from the modal and does an ajax call against a Controller action with a strongly typed view model that matches what the JS is trying to send via the ajax call.

Ajax:

var exploreFilters = {
    "type" : exploreType,
    "products" : $('#s2id_select2-products').select2('data'),
    "locations" : $("#page-report__data").data("criteria__locations"),
    "companies" : $("#page-report__data").data("criteria__companies"),
    "usertypes" : $("#page-report__data").data("criteria__usertypes"),
    "groupusers" : $("#page-report__data").data("criteria__groupusers"),
    "datestart" : $("#page-report__data").data("criteria__datestart"),
    "dateend" : $("#page-report__data").data("criteria__dateend")
};

$.ajax({
    dataType: "html",
    type: "POST",
    url: "/Report/Group/FilteredView",
    data: exploreFilters,
    success: function(html) {
        if($.trim(html) === "")
            $targetSection.html('<div class="page-report__empty">No data found.  Please adjust your search filters and try again.</div>');
        else
            $targetSection.html(html);
    },
    error: function(xhr, text, err) {
        if(text === "timeout")
            $targetSection.html('<div class="page-report__empty">The request timed out.  Please try again.</div>');
        else
            $targetSection.html('<div class="page-report__empty">There has been an error.</div>');
    }
});

Right before the ajax call goes to the controller I inspect the content and structure of exploreFilters:

Here is how the form data looks on the POST request:

On the other side I got a controller which takes a strongly-typed parameter with a structure similar to what exploreFilters has:

public ActionResult FilteredView(ReportCriteriaViewModel criteria)
{
    throw new NotImplementedException();
}

And my strongly-typed view model:

public class ReportCriteriaViewModel
{
    public ProductViewModel[] Products { get; set; }
    public string[] Locations { get; set; }
    public string[] Companies { get; set; }
    public string UserTypes { get; set; }
    public string GroupUsers { get; set; }
    public string DateStart { get; set; }
    public string DateEnd { get; set; }
}

public class ProductViewModel
{
    public Guid Id { get; set; }
    public string Text { get; set; }
}

Once the controller action gets hit I can see that DateStart and DateEnd have been successfully bound but not my list of products.

I cannot change the datatype on the json request, it has to be html because my controller action is going to be returning html.

I've tried changing the capitalization on Id and Text, JSON.stringify (which actually makes the dates not bind anymore)

What am I doing wrong?

Answer 1

Try to add contentType: "application/json" in your Ajax request

$.ajax({
    ...
    contentType: "application/json",
    ...
});