How to pass array of objects from view to controller with AJAX

Question

I am attempting to pass an array of objects from my view to the controller with AJAX. The array is not being passed to the controller (the controller action receives null).

View:

    function submitFilters() {
        var filters = [];

        $(".filter-option-checkbox").each( function(){
            var filter =
            {
                FilterType: $(this).find("#filter_Type").val().toString(),
                FilterDescription: $(this).find("#filter_Description").val().toString(),
                OptionDescription: $(this).find("#option_Description").val().toString(),
                OptionSelected: $(this).find(".custom-control-input").prop('checked')
            };

            filters.push(filter);
        });

        $.ajax({
            type: 'POST',
            url: '@Url.Action("Index", "Category")',
            data: JSON.stringify(filters),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (view) {               
            },
            failure: function (response) {
            }
        });
    }

Controller:

    [HttpPost]
    public IActionResult Index(FilterJSON[] filters)
    { 
        //...code here...
    }

Object Classes:

    public class FilterJSON
    {
        public string FilterType { get; set; }
        public string FilterDescription { get; set; }
        public string OptionDescription { get; set; }
        public bool OptionSelected { get; set; }
    }

I don't think I'm far off. What am I missing? Thank you.

Shouldnt it be dataType: "json" instead of contenttype in the ajax call? And if you use contenttype i imagine it should be "contentType". I recommend you check your Http Request. The default jquery.ajax() content type is "pplication/x-www-form-urlencoded; charset=UTF-8". I think you are still not sending 'application/json' because of the typo. — Raphael Mayer
– Raphael Mayer, Commented May 15, 2019 at 14:20
Thanks for pointing out the dataType/contentType issues. I will correct that in the question. — Graham Meehan
– Graham Meehan, Commented May 15, 2019 at 14:24
Sorry my mistake: You dont need dataType as its for converting receiving data to the specified format.But i still recommend you check the http header that the content type is application/json. — Raphael Mayer
– Raphael Mayer, Commented May 15, 2019 at 14:25

E.L Dunn · Accepted Answer · 2019-05-15 14:40:06Z

1

    [HttpPost]
    public IActionResult Index([FromBody]FilterJSON[] filters)
    {
        //...code here...

        return null;
    }

and

        $.ajax({
            type: 'POST',
            url: '@Url.Action("Index", "Home")',
            data: JSON.stringify(filters),
            contentType: "application/json; charset=utf-8",
            success: function (view) {
            },
            failure: function (response) {
            }
        });

should work

answered May 15, 2019 at 14:40

E.L Dunn

5516 silver badges20 bronze badges

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

1 Comment

Graham Meehan Over a year ago

This did it! Thanks! I should have included [FromBody] from the start.

Raphael Mayer · Accepted Answer · 2019-05-15 14:39:36Z

1

You need to use a ViewModel with a List inside:

public class YourViewModel
{
        public List<FilterJSONItem> FilterJSON{ get; set; }
}

public class FilterJSONItem
{
        public string FilterType { get; set; }
        public string FilterDescription { get; set; }
        public string OptionDescription { get; set; }
        public bool OptionSelected { get; set; }
}


public ActionResult Method([FromBody]YourViewModel vm)
{
}

edited May 15, 2019 at 14:39

Raphael Mayer

6676 silver badges20 bronze badges

answered May 15, 2019 at 13:41

st_stefanov

1,1961 gold badge10 silver badges31 bronze badges

3 Comments

Graham Meehan Over a year ago

This makes a lot of sense. I've implemented your suggestion. I'm still not receiving the object in the action, however. Would I also need to modify the 'data' header in the AJAX call in some way?

st_stefanov Over a year ago

Well, there are some specifics on how to pass the data. I am using the pure MVC way, so my example won't really help you. Some suggest to user [FromBody] in the signature...worth a try.

Raphael Mayer Over a year ago

There is a mistake in your code. The generic list type should be FilterJSONItem, at least in your case, but not in the OP's case. I've edited it.

Collectives™ on Stack Overflow

How to pass array of objects from view to controller with AJAX

View:

Controller:

Object Classes:

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

View:

Controller:

Object Classes:

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related