Send Json Array to MVC Controller brings Empty Models?

Question

My controller as follow:

[HttpPost]
public JsonResult getCartFromClient(List<JSItem> data)
{
   return view();
}

and My JS code to send Json as follow:

   var list = JSON.parse(localStorage.getItem('cart'));
   $.ajax({

            url: "CheckOut/getCartFromClient/",

            contentType: "application/json",
            dataType: 'json',
            type: "POST",
            data: JSON.stringify(list)
        });

Now the issue is , when the conttroller been called , data will contain the right number of items in the array, however the content of each JSItem is null , Id is null the name is null .. !?

not sure what causing this issue! I get the right number of objects in the list but the content is null?

The ViewModel is as follow:

public class JSItem
{
    public string xid { get; set; }
    public string xamount { get; set; }
    public string xprice { get; set; }
    public string xname { get; set; }
    public string xlevel { get; set; }
    //public string ximg { get; set; }
}

public class Rootobject
{
    public JSItem JSItem { get; set; }
}

Json.stringify(list) will bring the following json file:

"[{"JSItem":{"xid":"2","xamount":"1","xprice":"50.00","xname":"BaBy Product 1","xlevel":"0"}},{"JSItem":{"xid":"3","xamount":"1","xprice":"0.00","xname":"BaBy Product 122","xlevel":"0"}}]"

What does var list = JSON.parse(localStorage.getItem('cart')); return and what is your JSItem model? — user3559349
– user3559349, Commented Feb 24, 2016 at 6:26
list return Array of items. which match exactly the JSitem model in the backend . — H. Rashid
– H. Rashid, Commented Feb 24, 2016 at 6:32
public class JSItem { public string xid { get; set; } public string xamount { get; set; } public string xprice { get; set; } public string xname { get; set; } public string xlevel { get; set; } } and this is how i inout JS to add items to cart LocalStorage : var b = { "JSItem": { "xid": id, "xamount": amount, "xprice": price, "xname": nameofitem, "xlevel": level } }; — H. Rashid
– H. Rashid, Commented Feb 24, 2016 at 6:35
why dont you try passing the list without doing a JSON.stringify ? — Rajshekar Reddy
– Rajshekar Reddy, Commented Feb 24, 2016 at 6:58
In order to bind to List<JSItem> data, then list needs to be var list = { data: [{ xid: '2', xamount: '1', xprice: '50.00', etc}, { etc }] }; (and why are you making your properties all string when they are clearly int, decimal etc?) — user3559349
– user3559349, Commented Feb 24, 2016 at 7:01

Raja Nadar · Accepted Answer · 2016-02-24 07:43:53Z

Your JSON data seems to be one level above JSItem.

Change your controller action to RootObject and see.

[HttpPost]
public JsonResult getCartFromClient(List<RootObject> data)
{
   return view();
}

if you don't want to do this, then send the JSOn as Stephen Muecke suggested in the comments, for it to be deserialized as List<JSItem>

And as to why you see the right count for List<JSItem>, but all null values, the reason is this:

When MVC tries to deserialize this value into the List<JSItem>

"[
 {
  "JSItem":{"xid":"2","xamount":"1","xprice":"50.00","xname":"BaBy Product 1","xlevel":"0"}
 },
 {
  "JSItem":{"xid":"3","xamount":"1","xprice":"0.00","xname":"BaBy Product 122","xlevel":"0"}
 }
 ]"

MVC is able to recognize that the input is an array of elements with count 2. So it initialized the List<JSItem> with 2 elements. And it starts newing up JSItem for every item, as part of model binding.

However when it tries to set the properties of this newed up JSItem, it doesn't find any matching fields in the JSON. this is because your JSON is one level above the JSItem. Hence all fields are null.

Collectives™ on Stack Overflow

Send Json Array to MVC Controller brings Empty Models?

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related