I have been working on ASP.NET MVC ever since its inception and I love working on it. Having worked on several projects using ASP.NET MVC, often I have seen developers getting confused when it comes to how routing works and how the model binding happens.
ASP.NET MVC along with Jquery offers a powerful programming platform towards building content rich, user-friendly, highly responsive web applications. Programming ASP.NET MVC based applications is a breeze if one has a thorough knowledge on HTTP and HTML. I am not saying that you need to have the spec by heart, but a developer should know how a browser renders the markup, the way DOM is structured and how the browser finds the elements in the DOM and sends them as name-value pairs as part of an HTTP request (be it GET or POST).
In this blog, I would like to focus on “model-binding” – a concept where you send some parameters via a HTTP request, your action method on your controller accepts an object of a type that encapsulates your parameters and ASP.NET MVC uses these parameters to build the object that your action method wants.
For reference purposes, let’s create an example scenario where I have two classes (model) – Person and Company and there is a one-to-one association between Person and Company (Person class having a reference to an object of type Company).
Here is the structure of my model classes:
public class Company
{
public string Name { get; set; }
}
public class Person
{
public string FirstName { get; set; }
public string Lastname { get; set; }
public DateTime? DOB { get; set; }
public string Address { get; set; }
public Company Company { get; set; }
}
Let’s start by creating an ASP.NET MVC 4 application in VS 2010 and build an action method in HomeController to render a view that looks like this:
The form looks very basic as the focus is more on the javascript that we deal with than the aesthetics of this form 
From here on, we are going to be submitting the form using Jquery.ajax method (and not as a conventional form submit).
There are various alternatives to submitting data using $.ajax and let’s take a closer look at them.
Approach # 1 : Using $.serializeArray() to bind a simple data structure
Consider a form with form elements rendered not using the Html Helper classes as shown below:
<form id="frmPersonalData" action="javascript:void(0);" method="post">
<p>
<label for="firstname">First Name</label>
<input type="text" id="txtFirstName" name="FirstName" />
</p>
<p>
<label for="lastname">First Name</label>
<input type="text" id="txtLastName" name="LastName" />
</p>
<!-- some code is omitted for brevity -->
<p>
<label for="CompanyName">Company Name</label>
<input type="text" id="txtCompanyName" name="Name" />
</p>
The following is the javascript to post the above form to an action method that accepts Person class as a parameter:
$(function () {
$("#btnSubmit").click(function () {
/* Posting the data using Array of values */
var postData = $("#frmPersonalData").serializeArray();
$.ajax({
type: 'POST',
url: '@Url.Action("Index", "Home")',
traditional: true,
cache: false,
async: true,
data: postData,
success: function (msg) {
alert(msg.Status);
}
});});
Action method:
[HttpPost]
public ActionResult Index(Person person)
{
if (person == null || string.IsNullOrEmpty(person.FirstName))
{
return Json(new { Status = "Model binding failed. Could not parse the submitted data as Person" });
}
return Json(new { Status = "Successfully parsed the post data as Person"});
}
The issue with the above approach is that the person object gets built properly but the associated company reference won’t !!
Approach # 2 : Using $.serializeArray() to bind complex data structures
If you just change the mark up a bit, then we could get the person object and its associated company reference built correctly
<label for="CompanyName">Company Name</label>
<input type="text" id="txtCompanyName" name="Company.Name" />
Approach # 3 : Using custom javascript objects
Let’s define a custom class that mimics Person and it’s associated Company classes as follows:
// Javascript object
function Company() {
this.Name = '';
}
function Person()
{
this.FirstName = '';
this.LastName = '';
this.DOB = '';
this.Address = '';
this.Company = new Company();
}
The other approach to posting data without using serializeArray() is to post the custom javascript object itself as follows:
var person = new Person();
person.FirstName = $("#txtFirstName").val();
person.LastName = $("#txtLastName").val();
person.DOB = $("#txtDOB").val();
person.Address = $("#txtAddress").val();
person.Company.Name = $("#txtCompanyName").val(); $.ajax({
type: 'POST',
url: '@Url.Action("Index", "Home")',
traditional: true,
cache: false,
//contentType: 'application/json',
//dataType : 'json',
async: true,
data: person,
success: function (msg) {
alert(msg.Status);
}
});
In this approach, the properties on the Person class gets set properly while the company object (the reference) would be null !!
Approach # 4 : Using JSON.stringify()
If you wish to post a custom javascript object, then you should use JSON.stringify (), an API available from json2.js (an open source javascript library). The beauty of this API is that it takes care of escaping the JSON special characters ( { } “ ‘ : and ; ) too.
The following javacript illustrates the usage of JSON.stringify() to post the data to our action method:
$.ajax({
type: 'POST',
url: '@Url.Action("Index", "Home")',
traditional: true,
cache: false,
// Model binding doesn't happen without the following two lines!
contentType: 'application/json',
dataType: 'json',
async: true,
data: JSON.stringify(person),
success: function (msg) {
alert(msg.Status);
}
});
The source code for the above POC is available here
