ASP.NET MVC exposes the model binder feature which allows the developer to bind the data to a particular model. This is a very powerful feature since now the framework can correctly populate the model from the form values which can be persisted, updated based on the required action. In this article we will demonstrate how to use model binders to populate simple objects as well as hierarchical objects.

Life Without Model Binders:

First let's see how our life will be if there were no model binders in ASP.NET MVC Framework. In the view below we have two TextBoxes namely firstName and lastName. When the view is submitted the Save action on the HomeController is invoked. The code is shown below:


       
As, you can see the Save action of the HomeController takes two parameters which have the same name as the TextBoxes in the view. If we are passing only couple of fields then this method might be reasonable but as soon as we try to pass more fields the number of input parameters for the "Save" action will increase. We all know that in programming a method with excessive number of input parameters is not considered a good programming practice.

Introducing Model Binders:

Models binders allows us to bind the form values directly to the object's properties. The binding mechanism will look for the properties named after the name of the control. If the property is found in the object it is populated. Here is the updated action using Model Binders:



The code above shows that we no longer need input parameter for each passed in field. The form values are assigned correctly with the customer properties. The customer object gets populated automatically and is ready to be used by the repository for further processing.

Model Binder Using Hierarchical Data:

The above example showed how model binders can be used in simple scenarios. In real application we might have nested relationship between objects. Let's say that we need to implement a form to register a customer. The customer will fill in the first name, last name along with two addresses. The object relationship between the Customer and the Address is shown below:



The above code indicates that a single customer can have multiple addresses. The view is updated to accommodate all the required fields. The view implementation is shown below:



If you submit the form you will notice that the customer's first name and last name fields are getting populated correctly but the address collection is always empty. The reason is that the Street and the City fields are not included in the Customer object. In order to reach the Street and the City properties from the Customer object you will be writing the following code:



You can apply the similar technique in ASP.NET MVC using the following code:



The above code will perform the following:

1) Searches the customer object for the property called "Addresses".
2) Create an instance of the Address class and add to the Addresses collection.
3) Assigns the Street and City values to the newly added address instance.

The screenshot below shows the values correctly populated in the Addresses collection of the Customer collection.



The above screenshot shows that the Addresses collection is populated and the properties City and Street are populated correctly.  

Since, we have to store two addresses our view implementation will look like the following:



The above view is designed to handle two addresses. The screenshot below shows the addresses collection being populated when the form is submitted.



This solves our problem of collecting two addresses per customer but we have hard coded the index numbers directly in the code. Take a step back and think about this problem for a while. What kind of addresses are we trying to store? In real life application usually one address correspond to the "Shipping Address" and the other one is the "Billing Address". Let's model our object close to the real life object.



The updated view looks like the following:


   
Now, it looks much cleaner since it does not include the use of indexes. The screenshot below shows that the properties "ShippingAddress" and "BillingAddress" are populated.

       
Conclusion:

In this article we demonstrated how to use model binders in an ASP.NET MVC application. The article focused on populating hierarchical/nested information. There are scenario where separating the collection into two separate objects might not be feasible. We will discuss such scenarios in the next article.

[Download Sample]