MVC Send list through AJAX

Question

Okay, I've seen tons of questions posted regarding this question, but none of the answers has actually worked for me, here's my AJAX:

$.ajax({
        url: "/FilterSessions/GetFilterSession",
        type: "GET",
        dataType: "json",
        data: jsonFilters,
        traditional: true,
        success: function (response) {
            //Haha, it's never entering here. not really.
        }
    });

var "jsonFilters" contains an array with the following data:

[0] = { Path: "Test", Name: "More testing", Value: "Test Value" },
[1] = { Path: "Test", Name: "More testing", Value: "Test Value" }

And this is my controller:

public ActionResult GetFilterSession(List<FilterSessionModel> jsonFilters)
{
    //Do things

    return Json(false, JsonRequestBehavior.AllowGet);
}

jsonFilters always remains null... I have also tried adding contentType: "application/json; charset=utf-8" to the AJAX call... but that didn't really do anything

Finally, the class FilterSessionModel is structured as follows:

 public class FilterSessionModel
    {
        public string Path { get; set; }
        public string Name { get; set; }
        public string Value { get; set; }
    }

Any ideas as to what I might be missing or what might be happening?

Things I've tried so far:

Setting "traditional: true", setting "contentType", using JSON.stringify and attempting to accept a string in the MVC Controller (no-go)

UPDATE: Thanks to the answer below I realized that what was missing was to send over the data with the param Id like so:

 data: "{param1ID:"+ param1Val+"}"

Bill Blankenship · Answer 1 · 2013-09-14T23:49:57.183

1

I would try switching out the type on your action.

List<FilterSessionModel>

Pretty sure the above is not going to work, I would try something like Object.

Or possibly a string that I would then use newton json dll to push into your List of Class.

The problem boils down to your action being unable to figure out the type, assuming you are checking your data prior to the ajax get being called.

**Update due to more info. Add in the error portion and view those vars on return from your controller, also fire up fiddler and watch what your are getting for http numbers.

$.ajax({
    type: "POST",
    url: "Servicename.asmx/DoSomeCalculation", 
  data: "{param1ID:"+ param1Val+"}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        UseReturnedData(msg.d);
    },
    error: function(x, t, m, b) {
        //Look at the vars above to see what is in them.
    }
});

edited Sep 14 '13 at 23:49

answered Sep 14 '13 at 23:38

Bill Blankenship

3,316
6
43
73

Thanks for your answer, unfortunately that doesn't work either; and apart from that you are actually able to use custom classes as parameters in MVC controllers. MVC maps these automatically. Apart from that, I'm making sure I'm passing valid data - it's the same as displayed above. – Halaster Sep 14 '13 at 23:42
You are obviously getting to your controller, if you are seeing the data is null. I would try just passing a string, a simple string and see if it passes that, if so, then you definitely have issues with your ajax call, i will add something above in answer. – Bill Blankenship Sep 14 '13 at 23:47
Interestingly, if I pass a string the controller is still not receiving it. (I didn't forget to modify the controller to receive a string)... It's quite odd really – Halaster Sep 14 '13 at 23:51
Yep, you are getting it narrowed down. I would add in that error handler, and on ajax posts and gets fiddler is your best friend. – Bill Blankenship Sep 14 '13 at 23:53

score 0 · Answer 2 · answered Sep 15 '13 at 01:20

First off I'm making the assumption that your $.ajax is for JQuery and not some other Javascript framework. Please correct me if that's wrong.

ASP.NET MVC can actually do what you are asking it to (resolve data sent via AJAX to a List<FilterSessionModel>, but it seems to have a difficult time doing it via a GET request. It would help to know which version of ASP.NET MVC you are using, as more is required to get this working on the older versions. However, what I'm suggesting should work on MVC 3 or 4.

When you send AJAX via JQuery using a GET request and passing it a JavaScript array, this is what you are sending to the server:

http://localhost:50195/FilterSessions/GetFilterSession?undefined=&undefined=

It's no wonder the model is null because no data is actually being sent.

I believe ASP.NET can accept objects (and even arrays of objects) like this, but it won't do so with it formatted as JSON (like via JSON.stringify) as that just results in the following request:

http://localhost:50195/FilterSessions/GetFilterSession?[{%22Path%22:%22Test%22,%22Name%22:%22TestName%22,%22Value%22:%22Testing%22},{%22Path%22:%22Test%22,%22Name%22:%22TestName%22,%22Value%22:%22Testing%22}]

The way you probably want to do this is with a POST request. ASP.NET MVC will actually accept a JSON string as POST data and will decode it and resolve the model properly. Your AJAX code works fine with a couple modifications:

$.ajax({
    url: "/FilterSessions/GetFilterSession",
    type: "POST", //Changed to POST
    dataType: "json",
    data: JSON.stringify(jsonFilters), //Pack data in a JSON package.
    contentType: "application/json; charset=utf-8", //Added so ASP recognized JSON
    traditional: true,
    success: function (response) {
        alert('Success!');
    }
});

The controller you posted should recognize POST data already, but in case it doesn't, a simple [HttpPost] attribute is all you need:

[HttpPost]
public ActionResult GetFilterSession(List<FilterSessionModel> jsonFilters)
{
    //Do things

    return Json(false, JsonRequestBehavior.AllowGet);
}

Thanks for your answer - your assumption about AJAX is indeed correct and I am using MVC 3. The reason it wasn't working is because the object I was sending was an "anonymous" array, it needed to be wrapped within an object that defined the parameter name (my question has been updated to show the solution). The data being sent was not undefined, it was simply "not labelled" so the controller didn't map it to the parameter. — Halaster, Sep 15 '13 at 08:22

score 0 · Answer 3 · answered Sep 23 '13 at 11:59

0

javascript or ajax call never type cast the object. . .you need to set type of the controller side parameter either string or List else you can also set the Object type. . If you modified codein that way.. .Your code definitely work !!!

answered Sep 23 '13 at 11:59

Sanket

286
1
3
10

score 0 · Accepted Answer · edited May 23 '17 at 11:47

0

I think what you are looking for is answered here:

Passing A List Of Objects Into An MVC Controller Method Using jQuery Ajax

edited May 23 '17 at 11:47

Community

1
1

answered Oct 23 '13 at 12:19

aximili

24
4

score 0 · Answer 5 · answered Jan 10 '17 at 15:03

0

$.ajax({
    url: "/FilterSessions/GetFilterSession",
    type: "GET",
    dataType: "json",
    data:JSON.stringify({ 'jsonFilters': jsonFilters}),
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        //Do your action
    }
});

answered Jan 10 '17 at 15:03

Athul Nalupurakkal

430
4
8

2

Please include some context/explanation for code as this makes it more understandable. – EJoshuaS - Stand with Ukraine Jan 10 '17 at 22:57

MVC Send list through AJAX

5 Answers5

Linked