Geek Answers Handbook

Binding to a model binds my json array, but not the values

I am using ASP.NET MVC 3 and I am trying to create a simple json array binding to List<JsonPositions> . JsonPositions is a custom object with the same properties as the json objects in the array.

This is what my array looks like on the client:

 var widgetPositions = [ { col: 5, row: 1, id: 2 }, { col: 4, row: 5: id: 40 } ]; $.ajax({ url: 'the url', data: { positions: widgetPositions }, success: function () { alert('Save successful.'); }, error: function () { alert('An error occurred while trying to update the widget positions.'); } });

This code works correctly when the request is validated in Chrome.

0wDWe.jpg

In the controller, we have the following method of action:

 public void UpdatePositions(List<JsonPosition> positions) { // debugging here }

When I look at the widgetPositions list, it has two elements, like a json array, but the properties of the objects do not match the values ​​from the objects on the client. This is what the JsonPosition object looks like:

 public class JsonPosition { public int id { get; set; } public int col { get; set; } public int row { get; set; } }

waHx7.jpg

Thanks for any help you can offer :)

+4
source share
2 answers

I think you might need to add a content type:

 $.ajax({ url: 'the url', data: JSON.stringify({ positions: widgetPositions }), contentType: 'application/json', success: function () { alert('Save successful.'); }, error: function () { alert('An error occurred while trying to update the widget positions.'); } });

Also, you do not specify the type of request, so it will do GET by default, do you want to do POST? It will make him

 $.ajax({ url: 'the url', type: 'POST', data: JSON.stringify({ positions: widgetPositions }), contentType: 'application/json', success: function () { alert('Save successful.'); }, error: function () { alert('An error occurred while trying to update the widget positions.'); } });
+3
source

You can send them as a JSON object:

 var widgetPositions = [ { col: 5, row: 1, id: 2 }, { col: 4, row: 5: id: 40 } ]; $.ajax({ url: 'the url', data: JSON.stringify({ positions: widgetPositions }), contentType: 'application/json', success: function () { alert('Save successful.'); }, error: function () { alert('An error occurred while trying to update the widget positions.'); } });

Whatever you notice, that you did not have code, and which will make it work:

  • contentType: 'application/json', - set the correct header for the request content type
  • data: JSON.stringify({ positions: widgetPositions }) - send a JSON request

Now you are happy to receive everything you need:

 public void UpdatePositions(List<JsonPosition> positions) { // debugging here }

Note. The JSON.stringify method JSON.stringify initially defined in all modern browsers (even in IE8, even if it is far from a modern browser). But if you need to support some prehistoric browsers, you can include a json2.js script in your page, which will check if the browser supports this and if it does not provide an implementation.

+2
source

More articles:


All Articles