Passing a collection of objects to MVC controller using $.post

Question

We are trying to send a collection of objects from our page to our controller (MVC 3) using json and the jQuery .post function. Below is our js code and the controller and object definitions.

The problem is that while the object is being sent to our controller appropriately, it's member variables are not being populated. The "Coords" list has the appropriate number of "Coord" objects but each Coord object's member variables are populated with zero (not null) instead of the values we are passing in. See the screenshot:

Any ideas what is wrong with our implementation?

Thanks in advance!

enter image description here

Coord1 = { "X": 100, "Y": 200 };
Coord2 = { "X": 300, "Y": 400 };

zoneData = { "Color": "#D8F834", "Name": "new zone", "Coords": [Coord1, Coord2] }

$.post("/Demo/SaveZone", zoneData, function (resp) {
     alert(resp);
}, "json");





[HttpPost]
public ActionResult SaveZone(ZoneViewModel zvm)
{
     Zone z;

     z = AutoMapper.Mapper.Map<ZoneViewModel, Zone>(zvm);

     _db.Zone.Attach(z);
     _db.SaveChanges();

     return View();
}


public class ZoneViewModel
{

    public int Id { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }

    public CoordViewModel[] Coords { get; set; }

}


public class CoordViewModel
{
    public int Id { get; set; }
    public int X { get; set; }
    public int Y { get; set; }

}

Have you downloaded the mvc source, add a project ref to it and stepped through the default model binding code? — redsquare
– redsquare, Commented Jul 17, 2011 at 22:45

Darin Dimitrov · Accepted Answer · 2011-07-17 22:44:31Z

13

Probably the easiest would be to use a JSON request:

var coord1 = { X: 100, Y: 200 };
var coord2 = { X: 300, Y: 400 };
var zoneData = { 
    Color: '#D8F834', 
    Name: 'new zone', 
    Coords: [ coord1, coord2 ] 
};

$.ajax({
    url: '/Demo/SaveZone',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(zoneData),
    success: function(resp) {
        alert(resp);
    }
});

The JSON.stringify method serializes a javascript object into a JSON string. It is built into modern browsers as a native method. If you want to support legacy browsers that don't have this method you need to include the json2.js script which checks whether the browser natively supports it and if not it provides an implementation.

Now everything should bind properly:

enter image description here

and here's how the successful request will look like:

enter image description here

edited Jul 17, 2011 at 22:44

answered Jul 17, 2011 at 22:36

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ben Finkel Over a year ago

We tried this, and various different tweaks like it, and still no luck. Those .X and .Y values continue to post through as zeros.

Darin Dimitrov Over a year ago

@Ben Finkel, and you used the exact same code as shown in my answer? Because I have just tested it on my computer and it worked great. So you are very much surprising me here when you are saying that it doesn't work.

Ben Finkel Over a year ago

Yea I see your screeny and am confused. I cut-and-pasted your code in and have had no luck. Same issue still.

Darin Dimitrov Over a year ago

@Ben Finkel, what do you see in FireBug? What is sent to the server in the AJAX request? I have uploaded a screenshot of how a successful request should look like. Do the X and Y properties of your CoordViewModel have actually public getters and setters as you have shown in your question?

Ben Finkel Over a year ago

On another PC we've got this working so it must be a configuration issue on my end. Thanks Darin!

|

user610217 · Accepted Answer · 2011-07-17 22:33:34Z

0

My guess:

public List<CoordViewModel> Coords { get; set; }

(I admit this is a shot in the dark)

answered Jul 17, 2011 at 22:33

user610217

1 Comment

Ben Finkel Over a year ago

Nice thought, no luck though. Thanks!

Collectives™ on Stack Overflow

Passing a collection of objects to MVC controller using $.post

2 Answers 2

6 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Linked

Related