ASP.NET MVC Tip #1: Using Custom ViewModels with POST action methods

One of the top good practices for ASP.NET MVC is not to use the ViewData Dictionary, but to put your data in a strongly typed ViewModel instead. Many people seem to be using Linq to SQL entities as a ViewModel, because it’s a very comfortable approach. But what do you do if your view should contain data that is not included in any of your linq entities? Scott Gu’s chapter 1 preview of his upcoming ASP.NET MVC book recommends using a custom-shaped ViewModel for those cases.

One thing that still puzzled me after reading and trying to follow the chapter was how to create complex custom ViewModels (as opposed to putting all data in the ViewData dictionary or using vanilla Linq to SQL entities). Scott mentions on page 107 of the book that you “might have the action method update a ViewModel object with the form-posted data, and then use the ViewModel instance to map or retrieve an actual domain model object”, but there is no actual example of how this would look in source code.

For example, let’s assume you have an edit action method with the following view:

So your edit form displays data coming from a Linq entity representing a customer (FirstName, LastName, Email, Country, AccountType), but you also need SelectLists to populate the Country and AccountType DropDownLists.

The simple, but untyped approach: the ViewData dictionary

The simplest approach is to use the Customer Linq entity as ViewModel and to put the two SelectLists in the ViewData dictionary. This works fine, but I dislike the fact that there is no type-safety for the two SelectLists. Instead you have to use a type cast from object to SelectList:

Country

The fully typed approach: Custom ViewModels

So you want fully typed model data, but the linq entity does not hold all the data you need to render the view. Since you don’t want to clutter my Customer Linq to SQL entity with two properties that return the two SelectLists, the only alternative to get a fully typed view is to use a custom ViewModel:

 

public class CustomersFormViewModel
{
public SelectList AccountTypes { get; set; }
public SelectList Countries { get; set; }
public Customer Customer { get; set; }
}

 

Note that the ViewModel is not a mere Linq entity anymore. Instead, it contains the one Customer Linq entity instance, plus the two SelectLists for my DropDownLists.

Now you can implement your view without using any typecasts:

</pre>
FirstName:

LastName:

Email:

Country
<pre>

AccountType:

I was wondering if the MVC framework can automatically map the form values and reconstruct a CustomersFormViewModel. In other words, can I simply implement a strongly typed POST edit action method and receive a fully populated ViewModel as a parameter like this:

</pre>
//POST: /CustomersController/Edit

[AcceptVerbs(HttpVerbs.Post)]
 public ActionResult Edit(CustomersFormViewModel model)
 {
 //validate data, save customer, handle validation errors...
 }
<pre>

The answer is yes! The MVC framework even maps object hierarchies of any depth as ViewModels.

How not to do it

This is all really easy, but still there were few things that threw me off at the beginning.

The ViewModelBinder only maps properties, not public fields. A ViewModel like this cannot be mapped:

 

</pre>
public class CustomersFormViewModel
 {
 public electList AccountTypes;
 public SelectList Countries;
 public Customer Customer;
 }
<pre>

The names of your POSTed form values must match the object hiearchy you want them to be mapped to. Something like this will not work:

</pre>
FirstName:
<pre>

In hindsight both restrictions are perfectly logic and reasonable, but it’s easy enough to do it wrong nevertheless and also quite difficult to figure out what went wrong if binding does not work. Hopefully this article will help you avoid any problems with using Custom ViewModels with POST action methods.