ASP.NET MVC model binding on exposition in a super simple example

Here is a really straightforward example of model binding. Let's suppose we have a model that looks like this:

using System;
namespace MyApp.Models
{
   public class Person
   {
      public string Name { get; set; }
      public DateTime BirthDate { get; set; }
      public string BirthPlace { get; set; }
      public int NumberOfCats { get; set; }
   }
}

 
 

Our model exists in a copy of the default ASP.NET MVC3 app in which we expand HomeController to have a third action called PersonOverview like so:

using System;
using System.Web.Mvc;
using MyApp.Models;
namespace MyApp.Controllers
{
   public class HomeController : Controller
   {
      public ActionResult Index()
      {
         ViewBag.Message = "Welcome to ASP.NET MVC!";
         return View();
      }
   
      public ActionResult About()
      {
         return View();
      }
   
      public ActionResult PersonOverview()
      {
         Person azadeh = new Person();
         azadeh.Name = "Azadeh";
         azadeh.BirthDate = new DateTime(1977,1,1);
         azadeh.BirthPlace = "Iran";
         azadeh.NumberOfCats = 0;
         return View(azadeh);
      }
   }
}

 
 

return View(azadeh); above will attempt to bind the azadeh object to the view that is returned so that the view may easily use it. Here is the view, prepped to receive a Person object:

@model MyApp.Models.Person
<h2>Person Overview</h2>
<table>
   <tr>
      <td>@Html.LabelFor(model => model.Name)</td>
      <td>@Model.Name</td>
   </tr>
   <tr>
      <td>@Html.LabelFor(model => model.BirthDate)</td>
      <td>@Model.BirthDate.ToString("dd MMM yyyy")</td>
   </tr>
   <tr>
      <td>@Html.LabelFor(model => model.BirthPlace)</td>
      <td>@Model.BirthPlace</td>
   </tr>
   <tr>
      <td>@Html.LabelFor(model => model.NumberOfCats)</td>
      <td>@Model.NumberOfCats</td>
   </tr>
</table>

 
 

When we run our app (and then navigate to /Home/PersonOverview/) we get this:

Alright, let's spruce up our app some. Let's refactor our controller to be like so:

using System;
using System.Web.Mvc;
using MyApp.Models;
namespace MyApp.Controllers
{
   public class HomeController : Controller
   {
      public ActionResult Index()
      {
         ViewBag.Message = "Welcome to ASP.NET MVC!";
         return View();
      }
   
      public ActionResult About()
      {
         return View();
      }
   
      public ActionResult PersonOverview()
      {
         Person azadeh = new Person();
         azadeh.Name = "Azadeh";
         azadeh.BirthDate = new DateTime(1977,1,1);
         azadeh.BirthPlace = "Iran";
         azadeh.NumberOfCats = 0;
         return View(azadeh);
      }
   
      [HttpPost]
      public ActionResult PersonOverview(Person person)
      {
         //set a breakpoint here to see what is in person
         return View(person);
      }
   }
}

 
 

Let's refactor our model to be like so:

@model MyApp.Models.Person
<h2>Person Overview</h2>
<form method="POST" action="/Home/PersonOverview/">
   <table>
      <tr>
         <td>@Html.LabelFor(model => model.Name)</td>
         <td>@Html.EditorFor(model => model.Name)</td>
      </tr>
      <tr>
         <td>@Html.LabelFor(model => model.BirthDate)</td>
         <td>@Html.EditorFor(model => model.BirthDate)</td>
      </tr>
      <tr>
         <td>@Html.LabelFor(model => model.BirthPlace)</td>
         <td>@Html.EditorFor(model => model.BirthPlace)</td>
      </tr>
      <tr>
         <td>@Html.LabelFor(model => model.NumberOfCats)</td>
         <td>@Html.EditorFor(model => model.NumberOfCats)</td>
      </tr>
   </table>
   <input type="submit" value="submit" />
</form>

 
 

When we run our app (and then navigate to /Home/PersonOverview/) we get what we see below. We now have a form that may post to itself, making changes to its content. If we set a breakpoint in the last of the four actions in our controller, we will hit the breakpoint upon first reposting the page. When one does so, one may then mouse over "person" in the method signature and inspect its properties. This object should have properties fully populated by the fields of the form in our view. This is another example of model binding.