MVC 3 AJAX Post, List filled with Objects, but Objects Properties are Empty

Question

I have the following problem:

On a Button-Click I POST some data to the server. My controller Action looks like this:

public ActionResult Accept(List         


        

Answer 1

With your answer and the use of JSON.stringify method it works for me

var myEntries = { entries: [{ ParamA: "A", ParamB: "B" }, 
                            { ParamA: "C", ParamB: "D" }] };

$.ajax({
        type: 'POST',
        url: '/{controller}/{action}',
        cache: false,
        data: JSON.stringify(myEntries),
        dataType: 'json', 
        contentType: 'application/json; charset=utf-8'
    });

Answer 2

Just to compliment the answer on how to create the list that will be post back to the controller. That is because you don't need to wrap the array with the name of the list. It looks ugly and is not manageable using built in functions. This example is here to show how to post back JSON that MVC will understand and interpret as a List of. (But even if the Array is wrapped it still works but that is static content and difficult to manage)

This example used jQuery's sortable plugin. I want to post the entire list model back with the new ordering indexes to save in the database.

update: function (event, ui) {

 img = { key: 0, order: 0, url: '' }; //Single image model on server
 imgs = new Array(); //An array to hold the image models.

 //Iterate through all the List Items and build my model based on the data.
 $('#UploaderThumbnails li').each(function (e) {
      img.key = $(this).data('key');  //Primary Key
      img.order = $(this).index();  //Order index
      imgs.push(img); //put into "list" array
 });

 //And what is in the answer - this works really great
 $.ajax({
     url: '/Image/UpdateOrder',
     data: JSON.stringify(imgs),
     type: 'POST',
     contentType: 'application/json; charset=utf-8'
  });

}

And my MVC controller is as simple as ...

  [HttpPost]
  public ActionResult UpdateOrder(List<Models.Image> images)
  {
     //Images at this point is a proper C# List of Images! :) Easy!

      return Content("");
  }

Answer 3

I got the answer!

jQuery can be confusing at times.

dataType is the parameter which specifies what you want to get BACK from the server. contentType is the paremeter which specifies what you SEND TO the server.

So from the example above it works if you add:

contentType: 'application/json; charset=utf-8',

in the AJAX-call.