MVC 2 asp.net VC2010: Where happens the "databinding"?

Question

Understanding question:

1.) "X_IndexViewModel" class

public class X_IndexViewModel
{
   public List<SelectListItem> CheckBox_1 { get; set; } 
   ...
}

2.) XController.cs

public ActionResult Index()
{ 
    X_IndexViewModel viewModel = new X_IndexViewModel
    {
        CheckBox_1 = new List<SelectListItem>() 
        {
            new SelectListItem 
            {   
                Selected = true,
                Text = "some text",
                Value ="another text"
            }
        },    
        ... 
    }
    return View(viewModel);
}

3.) Website "Index.aspx" which inherits "X_IndexViewModel"

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Test.ViewModels.X_IndexViewModel>" %>
   ...      
   <!-- rendering a checkbox -->
   <% foreach (var item in Model.CheckBox_1) { %> 
   <%: Html.CheckBox("CheckBox_1", item.Selected, new {id="CheckBox_1"}) %>
       <label for="CheckBox_1<%: item.Text %>"><%: item.Text %></label> 
   <% } %>
   ...

4) The "real" model class "XModel" contains just a bool to store the information whether the user selected the checkbox or not...

public class XModel
{
    public bool CheckBox_1 {get; set;}
    ...
}

5) And in "XController.cs"

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(XModel model, FormCollection Form)

It surprises me that the argument model of the POST ActionResult method is well filled with true or false for the checkbox.

What I didn't understand:

I use an instance of the X_IndexViewModel class ( X_IndexViewModel viewModel = new X_IndexViewModel { ... } ) to fill the checkbox with some values (like selected = true or false, etc.).

Then is the website rendered by using the viewModel (where viewModel is an instance of the X_IndexViewModel class). This works fine because the website inherits X_IndexViwModel.

When the user submits the form is this event (the post event) fetched by the [AcceptVerbs(HttpVerbs.Post)] ActionResult method AND the XModel class properties are filled with the checkbox value.

So my question is:

Where does the binding between the "X_IndexViewModel" and the "XModel" happen?

Which statement says: The returned value of the X_IndexViewModel CheckBox1 should be stored in the XModel property CheckBox1?

Answer 1

After much editting and re-reading your post I think I understand what you are asking. The reason your X_IndexViewModel binds to the CheckBox you created is because the CheckBox is named the exact same as the model property. They are both named CheckBox1.

This is where th ASP.NET MVC magic happens. It matches up the models properties to the values where the names match up and it is possible to load the values.

So when the controls are posted, the reverse happens. It doesn't matter that a different class is being used to receive the data since it is matching up the property names and expected types. Since the data is being posted to a controller that has a model with a property of the same name as the CheckBox control in the HTML then it automatically puts the value in. This all happens behind the scenes by the MVC framework and I like to call it the MVC MAGIC SAUCE.

If you want to test it, take your exact example and change the XModel bool property name to CheckBox2. The values will not automatically get thrown into the receiving model because the property name no longer matches the HTML's control name (ID).

You could also do the same with the original model you pass in to create the view (X_IndexViewModel) as well. Change it to CheckBox2 and the HTML will no longer automatically reflect the value in the model since the model property of CheckBox2 does not match the contols name which is CheckBox1.

Here are some other links you can read that have more examples and explanations:

1. ASP.NET MVC Model Binding
2. ASP.NET MVC 2 Model Binding for a Collection
3. 6 Tips for ASP.NET MVC Model Binding