c# - How to send nested json object to mvc controller using ajax - Stack Overflow

admin管理员组

文章数量:1310203

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??

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??

• c#
• javascript
• jquery
• asp-mvc

Share Improve this question Follow edited Feb 4, 2014 at 11:32 user1740381 asked Feb 4, 2014 at 11:07 user1740381user1740381 2,19999 gold badges4040 silver badges6262 bronze badges 3

• What's the content of data? – Cerbrus Commented Feb 4, 2014 at 11:10
• The content of data variable is "{"Contact":{"Address":"xyz","City":"xyz","State":"xyz"},"FirstName":"xyz","LastName":"xyz","Profession":"87"}" – user1740381 Commented Feb 4, 2014 at 11:14
• 1 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 Commented Feb 4, 2014 at 13:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 -

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

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"/>

本文标签： cHow to send nested json object to mvc controller using ajaxStack Overflow