Question

I want to pass a JSON data structure to an MVC (3) Controller, have the JSON object be translated into a C# object, with all properties bound. One of the properties is a simple Type. That’s basic model binding, right?

Here are my models:

public class Person
{
    public string Name { get; set; }
    public JobTitle JobTitle { get; set; }
}

public class JobTitle
{
    public string Title { get; set; }
    public bool IsSenior { get; set; }
}

Here is my Index.cshtml page (which makes an AJAX request, passing in a JSON object which matches the strcture of the “Person” class):

<div id="myDiv" style="border:1px solid #F00"></div>
<script type="text/javascript">
var person = { 
        Name: "Bob Smith",
        JobTitle: { 
            Title: "Developer",
            IsSenior: true
        } 
    };

$.ajax({
    url: "@Url.Action("ShowPerson", "Home")",
    data: $.param(person),
    success: function (response){
        $("#myDiv").html(response);
    },
    error: function (xhr) {
        $("#myDiv").html("<h1>FAIL</h1><p>" + xhr.statusText + "</p>");
    }
});
</script>

And my HomeController looks like this:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult ShowPerson(Person person)
    {
        return View(person);
    }
}

Ignore the “ShowPerson.cshtml” file for now because the problem occurs before that is ever needed.

In the HomeController.ShowPerson action, the “person.Name” property is correctly bound and the “person.JobTitle” object (containing “Title” and “IsSenior” properties) is instantiated but still has the default values of “Title = null” and “IsSenior = false”.

I’m sure I have done nested model binding without problem in the past. What am I missing? Can anybody shed any light on why model binding only seems to work one level deep?

I’ve searched SO, and it seems everybody else is having binding problems when sending data from forms, so maybe I’m missing something in my $.ajax() request?

Answer 1

ok, there are couple of changes you need to do,

• Set dataType as json
• Set the contentType as application/json; charset=utf-8.
• Use JSON.stringify()

below is the modified code. (tested)

var person = { 
    Name: "Bob Smith",
    JobTitle: { 
        Title: "Developer",
        IsSenior: true
    } 
};

var jsonData = JSON.stringify(person);

$.ajax({
  url: "@Url.Action("ShowPerson", "Home")",
  data: jsonData,
  dataType: 'json',
  type: 'POST',
  contentType: "application/json; charset=utf-8",

  success: function (response){
    $("#myDiv").html(response);
  },
  error: function (xhr) {
    $("#myDiv").html("<h1>FAIL</h1><p>" + xhr.statusText + "</p>");
  }
});