ASP.NET MVC 4 JSON Binding to the View Model - Nested object error

Question

I have got the problem with json binding to the view model. Here is my code:

part of my ViewModels (AddressViewModel has more properties):

public class AddressViewModel
{
        [Display(Name = "Address_Town", ResourceType = typeof(Resources.PartyDetails))]
        public string Town { get; set; }

        [Display(Name = "Address_Country", ResourceType = typeof(Resources.PartyDetails))]
        public Country Country { get; set; }
}

public class Country : EntityBase<string>
{
        public string Name { get; set; }

        protected override void Validate()
        {
            if (string.IsNullOrEmpty(Name))
            {
                base.AddBrokenRule(new BusinessRule("CountryName", "Required"));
            }
        }
}

Javascript:

$(document).on("click", "#addAddress", function () {
            var jsonData = {
                "Town": $('#txt-Town').val(),
                "District": $('#txt-District').val(),
                "Street": $('#txt-Street').val(),
                "PostCode": $('#txt-PostCode').val(),
                "FlatNumber": $('#txt-FlatNumber').val(),
                "PremiseName": $('#txt-PremiseName').val(),
                "PremiseNumber": $('#txt-Premisenumber').val(),
                "Country": {
                    "Name": $('#txt-Country').val(),
                }
            };
            var addressData = JSON.stringify(jsonData);
            $.ajax({
                url: '/Customer/SaveAddress',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: addressData,
                success: function (result) {
                    $("#addIndividualAddressDialog").data("kendoWindow").close();
                },
                error: function (result) {
                    alert("Failed");
                }

            });
        });

Header of controller:

[HttpPost]
 public ActionResult SaveAddress(AddressViewModel addressViewModel)

This is what I see with firebug:

enter image description here

And this is what I see in VS:

enter image description here

As you can see Plain properties are binded correct but my nested object (Country) is null. I read a lot of different articles and I still don't know what I'm doing wrong. Help me please!

Shahar G. · Accepted Answer · 2014-01-14 14:49:04Z

19

You can keep your existing ActionMethod untouched without the need of json serializing: In the client side create an object from your json:

JSON.parse(jsonData)

and send that in the $.ajax data property.

Or, instead of creating json, create an object:

var dataObject = new Object();
dataObject.Town = $('#txt-Town').val();
dataObject.District = $('#txt-District').val();
...

And again, send that object in the $.ajax data property.

answered Jan 14, 2014 at 14:49

Shahar G.

1,52012 silver badges22 bronze badges

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

3 Comments

TugboatCaptain Over a year ago

this is the right answer to this question. there is no need to modify your server-side code, just send the right type of object it expects from the client.

user5871859 Over a year ago

No JSON.parse(jsonData) in ASP.NET MVC 5

Shahar G. Over a year ago

@hexadecimal, JSON.parse isn't part of MVC but JavaScript, that's why I wrote client side. MVC is server side!

Amin Saqi · Accepted Answer · 2013-08-22 08:26:46Z

18

The problem is from your action method parameter:

[HttpPost]
public ActionResult SaveAddress(AddressViewModel addressViewModel)

As you use JSON.stringify(), you send a string to your controller, not an object! So, you need to do some works to achive your goal:

1) Change your action method parametter:

[HttpPost]
public ActionResult SaveAddress(string addressViewModel)

2) Deserialize that string to an object - that is AddressViewModel:

IList<AddressViewModel> modelObj = new 
JavaScriptSerializer().Deserialize<IList<AddressViewModel>>(addressViewModel);

So, your final action method should be like the following:

[HttpPost]
public ActionResult SaveAddress(string addressViewModel)
{
    IList<AddressViewModel> modelObj = new 
    JavaScriptSerializer().Deserialize<IList<AddressViewModel>>(addressViewModel);

    // do what you want with your model object ...
}

answered Aug 22, 2013 at 8:26

Amin Saqi

19.1k9 gold badges53 silver badges70 bronze badges

3 Comments

Piotr Czarnecki Over a year ago

After changing action header and little changes in javascript it works!

Andrew Theken Over a year ago

This is not really an idiomatic solution as it will bypass the validation and binding capabilities of MVC. A much better solution is to add a JsonModelBinder and put this deserialization logic in there. If can be done by overriding a few methods in the DefaultModelBinder

Reuel Ribeiro Over a year ago

If your values are inside a form, just serialize them and send them with ajax having the contentType of application/x-www-form-urlencoded; charset=UTF-8. If not, just wrap your input fields with a form action="javascript:void(0);"> so that you can serialize the form with say jQuery $.serialize() and use as the payload of the request.

RapPayne · Accepted Answer · 2015-05-07 18:10:03Z

3

Actually the best option is just to remove the

var addressData = JSON.stringify(jsonData);

line and send jsonData itself. ASP.NET MVC will auto-bind it if it is an actual object and not just a string.

Occam's Razor

answered May 7, 2015 at 18:10

RapPayne

7,3103 gold badges54 silver badges95 bronze badges

Comments

Thomas · Accepted Answer · 2015-06-29 18:38:44Z

2

Sorry to answer for old thread.here you could work with JsonResult instead of ActionResult

this is your signature

 [HttpPost]
 public ActionResult SaveAddress(AddressViewModel addressViewModel)

it should look like

[HttpPost]
 public JsonResult SaveAddress(AddressViewModel addressViewModel)
 {
    return Json(status);
 }

the advantage would be if you use JsonResult instead of ActionResult that u do not need to Deserialize

here is the link http://codeforcoffee.org/asp-net-mvc-intro-to-mvc-using-binding-json-objects-to-models/ from this link you can get the idea.

answered Jun 29, 2015 at 18:38

Thomas

34.3k130 gold badges374 silver badges646 bronze badges

Comments

Alexis Pigeon · Accepted Answer · 2014-04-22 10:40:50Z

1

OR you can use JsonConvert.DeserializeObject<>();

following is the code to deserialize the JSON.stringify() result

IList<AddressViewModel> modelObj = JsonConvert.DeserializeObject<IList<AddressViewModel>>(addressViewModel);

instead of

JavaScriptSerializer().Deserialize<IList<AddressViewModel>>(addressViewModel);

edited Apr 22, 2014 at 10:40

Alexis Pigeon

7,52811 gold badges41 silver badges46 bronze badges

answered Apr 22, 2014 at 9:39

user3559829

112 bronze badges

Comments

Monti · Accepted Answer · 2015-11-12 09:24:14Z

-1

You must reference to Country object inside jsonData variable. The JSON POST binding will work correctly.

Old code:

    var jsonData = {
        "Town": $('#txt-Town').val(),
        "District": $('#txt-District').val(),
        "Street": $('#txt-Street').val(),
        "PostCode": $('#txt-PostCode').val(),
        "FlatNumber": $('#txt-FlatNumber').val(),
        "PremiseName": $('#txt-PremiseName').val(),
        "PremiseNumber": $('#txt-Premisenumber').val(),
        "Country": {
            "Name": $('#txt-Country').val(),
        }

New code:
    var jsonData = {
        "Town": $('#txt-Town').val(),
        "District": $('#txt-District').val(),
        "Street": $('#txt-Street').val(),
        "PostCode": $('#txt-PostCode').val(),
        "FlatNumber": $('#txt-FlatNumber').val(),
        "PremiseName": $('#txt-PremiseName').val(),
        "PremiseNumber": $('#txt-Premisenumber').val(),
        "Country.Name": $('#txt-Country').val(),
        }

answered Nov 12, 2015 at 9:24

Monti

214 bronze badges

1 Comment

Romias Over a year ago

Your idea works great in my case!

Collectives™ on Stack Overflow

ASP.NET MVC 4 JSON Binding to the View Model - Nested object error

6 Answers 6

3 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related