How to send nested json object to mvc controller using ajax

Question

I am working on an ASP.NET MVC application. I have the following view model in c#:

public class ContactModel
{
    public string Address { get; set; }
    public string City { get; set; }
    public string State { get; set; }
}

public class PersonModel
{
    public ContactModel Contact;

    public PersonModel()
    {
        Contact = new ContactModel();
    }

    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Profession { get; set; }
}

Now i have the same json model at client side which i want to post to server. I am using following jquery ajax:

$.ajax({
    url: "address to controller",
    type: "post",
    data: JSON.stringify(data),
    contentType: "application/json",
    success: function () {
        alert("data saved successfully");
    }
});

But only PersonModel properties are get mapped but Contact properties are null. Can anybody please tell me what i am missing??

The content of data variable is "{"Contact":{"Address":"xyz","City":"xyz","State":"xyz"},"FirstName":"xyz","LastName":"xyz","Profession":"87"}" — user1740381
– user1740381, Commented Feb 4, 2014 at 11:14
I figured out the problem, the issue was that i did not give the set; access to the property Contact in my PersonModel so default model binder was unable to set the new object to Contact property. I just added { get; set; } for Contact property and problem solved! — user1740381
– user1740381, Commented Feb 4, 2014 at 13:16

ramiramilu · Accepted Answer · 2014-02-04 11:46:20Z

You need for format your string to proper json -

Say if you model is -

public class ContactModel
{
    public string Address { get; set; }
    public string City { get; set; }
    public string State { get; set; }
}

public class PersonModel
{
    public ContactModel Contact { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Profession { get; set; }
}

Then you AJAX Post should be like this -

<script>
    $(function () {
        $('#click1').click(function (e) {

            var studentData = {
                "FirstName": "Rami",
                "LastName": "Vemula" ,
                "Contact": { "City": "Hyd"}
            };

            $.ajax({
                url: "@Url.Action("Submit")",
                type: "POST",
                data: JSON.stringify(studentData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: function (response) {
                    alert(response.responseText);
            },
                success: function (response) {
                    alert(response);
                }
            });

        });
    });
</script>

Then output is going to be -

enter image description here

Anjo · Accepted Answer · 2014-02-04 11:22:28Z

0

Create a instance of ContactModel and assign it to contact under PersonModel after creating instance of PersonModel. Please let me know in case of any clarification needed

answered Feb 4, 2014 at 11:22

Anjo

763 bronze badges

1 Comment

user1740381 Over a year ago

I dont understand your suggestion please clarify ??

slava · Accepted Answer · 2015-10-15 10:24:08Z

0

If you are using @html helper for properties then form.serialize() method will bind all the properties otherwise if you are using html elements like <input> the assign their name property same as model property.

<input type="text" name="Contact.FirstName" value="@Model.Contact.FirstName"/>

edited Oct 15, 2015 at 10:24

slava

1,9156 gold badges28 silver badges33 bronze badges

answered Oct 15, 2015 at 9:50

Pankaj Kumar

358 bronze badges

Collectives™ on Stack Overflow

How to send nested json object to mvc controller using ajax

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related