Custom ViewModel with MVC 2 Strongly Typed HTML Helpers return null object on Create?

Question

I am having a trouble while trying to create an entity with a custom view modeled create form. Below is my custom view model for Category Creation form.

public class CategoryFormViewModel
{
    public CategoryFormViewModel(Category category, string actionTitle)
    {
        Category = category;
        ActionTitle = actionTitle;
    }

    public Category Category { get; private set; }
    public string ActionTitle { get; private set; }
}

and this is my user control where the UI is

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<CategoryFormViewModel>" %>

        <h2>
            <span><%= Html.Encode(Model.ActionTitle) %></span>
        </h2>
        <%=Html.ValidationSummary() %>
        <% using (Html.BeginForm()) {%>
        <p>
            <span class="bold block">Başlık:</span>
            <%=Html.TextBoxFor(model => Model.Category.Title, new { @class = "width80 txt-base" })%>
        </p>
        <p>
            <span class="bold block">Sıra Numarası:</span>
            <%=Html.TextBoxFor(model => Model.Category.OrderNo, new { @class = "width10 txt-base" })%>
        </p>        
        <p>
            <input type="submit" class="btn-admin cursorPointer" value="Save" />
        </p>
        <% } %>

When i click on save button, it doesnt bind the category for me because of i am using custom view model and strongly typed html helpers like that

<%=Html.TextBoxFor(model => Model.Category.OrderNo) %>

My html source looks like this

<form action="/Admin/Categories/Create" method="post">
        <p>
            <span class="bold block">Başlık:</span>
            <input class="width80 txt-base" id="Category_Title" name="Category.Title" type="text" value="" />
        </p>
        <p>
            <span class="bold block">Sıra Numarası:</span>
            <input class="width10 txt-base" id="Category_OrderNo" name="Category.OrderNo" type="text" value="" />
        </p>        
        <p>
            <input type="submit" class="btn-admin cursorPointer" value="Kaydet" />
        </p>
        </form>

How can i fix this?

Answer 1

Your View Model needs a default constructor without parameters and you need public set methods for each of the properties. The default model binder uses the public setters to populate the object.

---

The default model binder has some rules it follows. It chooses what data to bind to in the following order:

1. Form parameters from a post
2. Url route data defined by your route definitions in global.asax.cs
3. Query string parameters

The default model binder then uses several strategies to bind to models/parameters in your action methods:

1. Exact name matches
2. Matches with prefix.name where prefix is the parent class and name is the subclass/property
3. Name without prefix (as long as there are no collisions you don't have to worry about providing the prefix)

You can override the behavior with several options from the Bind attribute. These include:

• [Bind(Prefix = "someprefix")] -- Forces a map to a specific parent class identified by the prefix.
• [Bind(Include = "val1, val2")] -- Whitelist of names to bind to
• [Bind(Exclude = "val1, val2")] -- Names to exclude from default behavior

Answer 2

You could use editor templates. Put your ascx control in ~/Views/Shared/EditorTemplates/SomeControl.ascx. Then inside your main View (aspx page) include the template like so (assuming your view is strongly typed to CategoryFormViewModel):

<%= Html.EditorForModel("SomeControl") %>

instead of

<% Html.RenderPartial("SomeControl", Model) %>

Answer 3

Make a default constructor for your viewmodel and initialize the Category there

public CategoryFormViewModel() 
{ 
    Category = new Category()
}

And at your controller action receive the viewmodel

public ActionResult ActionName(CategoryFormViewModel model)
{
    //here you can access model.Category.Title
}