CODEWITHSUNDEEP
javascriptajaxasp.net-mvcjson
Mike Pateras
Mike Pateras

Reputation: 15015

How do you pass an array of JSON objects to an MVC controller?

I'm making an ajax call to a controller, and I can pass a single item to the controller, but not a list of items. Basically, this works:

$.ajax(
{
    url: "Inventory/Update",
    data: { ItemID: "1234", Quantity: 7 },
    datatype: "json"
});


public void Update(Item item)
{

}

The item is populated in the controller with values of 1234 and 7. But when I try this:

$.ajax(
{
    url: "Inventory/Update",
    data: [{ ItemID: "1234", Quantity: 7 }],
    datatype: "json"
});


public void Update(List<Item> items)
{

}

items is null.

I've tried setting traditional to true, as has been suggested in other posts, but that did not make a difference.

How can I pass this array of objects to my MVC controller?

Upvotes: 1

Views: 3335

Answers (5)

trinhnghia
trinhnghia

Reputation: 1

You should add the contentType to ajax function

$.ajax(
{
   url: "Inventory/Update",
   type:"post",
   contentType:"application/json",
   data: postData,
   datatype: "json"
});

Upvotes: 0

Robert Koritnik
Robert Koritnik

Reputation: 105029

Posting arrays as part of FORM element

When generating a FORM with an arbitrary number of certain elements (that will become part of the same array) is not so complicated. All you have to do is take care of consecutive indexes and correct input names.

Read my detailed blog post on this subject.

Posting complex JSON objects not part of a FORM

I've written a jQuery plugin that can take any complex JSON object and convert it so that will easily be sent back to server and correctly parsed by Asp.net MVC. It doesn't just transform the object it also takes care of dates so they get correctly parsed on the server without any problems.

Upvotes: 2

Ann B. G.
Ann B. G.

Reputation: 302

try using this instead:

   var itemArray = new Array();
   itemArray[0] = { ItemID: "1234", Quantity: 7 };
   var postData = { items: itemArray };
   $.ajax(
   {
       url: "Inventory/Update",
       data: postData,
       datatype: "json"
   });

Upvotes: 0

RonnyKnoxville
RonnyKnoxville

Reputation: 6394

This may seem odd, but you could try adding quotation marks to the data dictionary such as:

$.ajax(
{
    "url": "Inventory/Update",
    "data": [{ "ItemID": "1234", "Quantity":"7" }],
    "datatype": "json"
});

Upvotes: 0

Anil D
Anil D

Reputation: 2009

Not sure about ajax post, but in case of form submit, one should render controls like this

 <ul>
<% int i = 0; foreach (Student s in (IEnumerable)this.Model)
   {%>
<li>
    <%=Html.TextBox("student[" + i + "].Email")%>
    <%=Html.TextBox("student[" + i + "].Name")%>
</li>
<%i++;
   } %>

you need to set an iterator to make it in list form , the above will make controls with name like

student[0].Email, student[0].Name

student[1].Email, student[1].Name

student[2].Email, student[2].Name

and so on

and on controller side 

List<Student> modal

will get all the posted data .

Try some thing same in your ajax post, hope this help

Upvotes: 0

Related Questions