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

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 images)
  {
     //Images at this point is a proper C# List of Images! :) Easy!

      return Content("");
  }