Passing JSON object to MVC

Question

I am having a simple issue which is taking way to long to figure out. I cant seem to get data from JS into MVC.

JS:

           var stuff = [{a: 1, b: "Low"}, {a: 5, b:"High"}];
           $.ajax({
                url: '@Url.Action("Action")',
                type: 'POST',
                data: JSON.stringify({ stuff: stuff }),
                traditional: true
            });

MVC

         public enum Level
         {
              High = 10,
              Normal = 5,
              Low = 1
         }
         ...
         public class MyModel
         {
              public int a { get; set; }
              public Level b { get; set; }
         }
         ...
         public ActionResult Action(List<MyModel> stuff){
              //stuff is always null no matte what I try?
              ....
         }

I am not sure where my problem actually is, as this is surprisingly hard to debug.

Possible duplicate of [Passing A List Of Objects Into An MVC Controller Method Using jQuery Ajax](http://stackoverflow.com/questions/13242414/passing-a-list-of-objects-into-an-mvc-controller-method-using-jquery-ajax) — Cariboutis, Nov 19 '15 at 15:10
Is `url: '@Url.Action("Action")',` actually being converted to a valid url? — Stephen Gilboy, Nov 19 '15 at 15:10
@Stephen: I'd assume since `stuff is always null`, that it is actually hitting the right method, just not including the values — Matt Burland, Nov 19 '15 at 15:11
@MattBurland there isn't any reason to use `FromBodyAttribute` in this situation... — Erik Philips, Nov 19 '15 at 15:19

Shyju · Accepted Answer · 2015-11-19T15:33:15.427

Specify the contentType properpty on your ajax call and it should work fine.

When sending data to server using $.ajax, default contentType value is "application/x-www-form-urlencoded; charset=UTF-8" . Since we are sending JSON data, We should specify it.

var stuff = [{a: 1, b: "Low"}, {a: 5, b:"High"}];

$.ajax({
    url: '@Url.Action("Action")',
    type: 'POST',
    data: JSON.stringify({ stuff: stuff }),

    contentType:"application/json",  //This is the new line

    traditional: true
}).done(function(res) {
    console.log("Result came back");
});

P. Janowski · Answer 2 · 2015-11-19T15:17:57.357

0

I just realized this is the issue:

data: JSON.stringify({ stuff: stuff })

change it to:

data: JSON.stringify(stuff)

edited Nov 19 '15 at 15:17

answered Nov 19 '15 at 15:13

P. Janowski

306
1
6

3

MVC is smart enough to do either of these. You can pass an object with matching properties/parameters or just pass the straight object and bind it to all parameters. – Erik Philips Nov 19 '15 at 15:30

Passing JSON object to MVC

2 Answers2