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: exploreFilters content and structure

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

Form data

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.

inspecting data bound to strongly typed view

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?

Mikael Engver · Accepted Answer · 2014-08-09 18:34:11Z

1

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

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

edited Aug 9, 2014 at 18:34

answered Aug 8, 2014 at 21:44

Mikael Engver

4,7984 gold badges50 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcel Over a year ago

Thank, this worked after fixing another kink. Basically a combination of this and stringifying the data would make it to the server correctly. data: JSON.stringify(exploreFilters) Thank you!

Andy T · Accepted Answer · 2014-08-08 21:43:26Z

0

The problem is in how you are serializing the list:

products[0][id]
products[0][text]

You need to send your list in this format:

products[0].id
products[0].text

id and text should be properties, without the [] otherwise it is treated as an index to a two-dimensional array.

answered Aug 8, 2014 at 21:43

Andy T

9,9315 gold badges56 silver badges97 bronze badges

1 Comment

Marcel Over a year ago

Hi, thank you for your comment. I think that is just how the Chrome webtools is showing the form data. A quick inspection reveals that the data structure product is just a list of objects, where the object has properties id and text.

jlievano · Accepted Answer · 2014-08-08 21:53:49Z

0

You should try

contentType: "application/json; charset=utf-8"

in the options of the $.ajax call

$.ajax({
        dataType: "html",
        type: "POST",
        url: "/Report/Group/FilteredView",
        data: exploreFilters,
        contentType: "application/json; charset=utf-8" ....

edited Aug 8, 2014 at 21:53

answered Aug 8, 2014 at 21:45

jlievano

113 bronze badges

Collectives™ on Stack Overflow

ajax post on MVC .NET does not pass array correctly

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related