Post MVC 3 AJAX, a list filled with objects, but the properties of the objects are empty

Question

I have the following problem:

On the click button, I will send some data to the server. The action of my controller is as follows:

public ActionResult Accept(List<MyViewModel> entries) { //here entries HAS 2 MyViewModel-Instances in it. //The entries are not null, but the values of the instances are! //entries[0].ParamA is null } 

Where MyViewModel looks like this:

 public class MyViewModel { public string ParamA { get; set; } public string ParamB { get; set; } } 

And AJAX-Call is:

 var myEntries = { entries: [{ ParamA: "A", ParamB: "B" }, { ParamA: "C", ParamB: "D" }] }; $.ajax({ type: 'POST', url: url, cache: false, data: myEntries, dataType: 'text' }); 

What I already tried to do:

• Changed dataType type to 'json'
• used: traditional: true
• tried var myEntries = JSON.stringify (...);
• try var myEntries = {entries: [JSON.stringify ({...}), JSON.stringify ({...})]};
• same as above, but with jQuery.param (..., true);
• Using IEnumerable or MyViewModel [] instead of a list.
• ANY combination of the above

What am I doing wrong here?

Thank you very much in advance for your help!

EDIT

My (Razor) View is not interesting at the moment, because it has nothing to do with it. I DO NOT use any HTML.TextBoxFor (or similar) methods to populate myEntries-Variable. It actually populates dynamically (because there are many conditions). For the sake of the question (and my own testing) I hard-coded the variable. :)

Answer 1

With your answer and using the JSON.stringify method JSON.stringify 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

I got an answer!

jQuery can sometimes be misleading.

dataType is a parameter that indicates that you want to receive BACK from the server. contentType is a parameter that indicates what you are sending to the server.

So, from the above example, it works if you add:

contentType: 'application / json; encoding = UTF-8 ',

in an AJAX call.

Answer 3

Just to compliment the answer on how to create a list that will be sent back to the controller. This is because you do not need to wrap the array with a list name. It looks ugly and is not controlled using built-in functions. This example is provided here to show how to send JSON back, which MVC will understand and interpret as a list. (But even if the array is wrapped, it still works, but it's static content and it's hard to handle).

This example uses the jQuery sortable plugin. I want to publish the entire list model back with the new ordering indexes to save to 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(""); }