Question

Trying to understand when model objects are instantiated in MVC3:

I have a view for editing a “Person”; each person can have multiple addresses. I’m displaying the addresses in a grid on the Person View.

This works great when displaying a person; I have a partial view which iterates through Person.Addresses and builds the table/grid.

The problem arises when creating a new person: the person object is null and the Person.Addresses reference is illegal.

I’m certain I’m missing something fairly fundamental here: since MVC will be (auto-magically) creating the new person instance upon “Save”; it would seem counter-production to try and create my own object instance, and if I did, it is unclear how I would connect it to the rest of the entry values on the form.

One last complications: the list of Addresses is optional; it is perfectly legal not to have an address at all.

As relational data is so common, there has to be a simpler solution for handling this. All clarifications appreciated!

Answer 1

The answer to this question is that the objects are re-constituted from the POST data in the form. This is fairly basic, but MVC hides so much of what is happening that it is hard to see when you are trying to get your (MVC) bearings.

The sequence of items is:

1. Create form with all necessary fields; use hidden fields for non-displayed keys (ID).
2. User interacts with web page; then presses form submit button.
3. All field data is POSTed to the controller page.
4. MVC re-constitutes the data into class objects.
5. The controller page is invoked with the re-constituted class instance as a formal parameter.

Notes:

When creating the page: a form is generated with fields for each part of the object being represented. MVC uses hidden fields for ID’s and other non-displayed data as well as for validation rules.
It is worth noting that forms are created (typically) either by listing all object properties on the _CreateOrEdit.cshtml page:

// Edit.cshtml
@model Person

@Html.Partial("_CreateOrEdit", Model)

and

// _CreateOrEdit.cshtml
@model Person

@Html.HiddenFor(model => model.PersonID)

@Html.LabelFor(model => model.first_name, "First Name")
@Html.EditorFor(model => model.first_name)

@Html.LabelFor(model => model.last_name, "Last Name")
@Html.EditorFor(model => model.last_name)

@Html.LabelFor(model => model.favorite_color, "Favorite Color")
@Html.EditorFor(model => model.favorite_color)

//etcetera

or by using a template for the class (templates must have the same name as the class they represent and they are located in the Views\Shared\EditorTemplates folder).

Using template pages is almost identical to the previous method:

// Edit.cshtml
@model Person

@Html.EditorForModel()

and

// Shared\EditorTemplates\Person.cshtml
@model Person

@Html.HiddenFor(model => model.PersonID)

@Html.LabelFor(model => model.first_name, "First Name")
@Html.EditorFor(model => model.first_name)

@Html.LabelFor(model => model.last_name, "Last Name")
@Html.EditorFor(model => model.last_name)

@Html.LabelFor(model => model.favorite_color, "Favorite Color")
@Html.EditorFor(model => model.favorite_color)

//etcetera

Using the template method makes it easy to add lists (of object) to the form. Person.cshtml becomes:

// Shared\EditorTemplates\Person.cshtml
@model Person

@Html.HiddenFor(model => model.PersonID)

@Html.LabelFor(model => model.first_name, "First Name")
@Html.EditorFor(model => model.first_name)

@Html.LabelFor(model => model.last_name, "Last Name")
@Html.EditorFor(model => model.last_name)

@Html.LabelFor(model => model.favorite_color, "Favorite Color")
@Html.EditorFor(model => model.favorite_color)

@EditorFor( model => model.Addresses )

//etcetera

and

// Shared\EditorTemplates\Address.cshtml
@model Address
@Html.HiddenFor(model => model.AddressID)

@Html.LabelFor(model => model.street, "Street")
@Html.EditorFor(model => model.street)

@Html.LabelFor(model => model.city, "City")
@Html.EditorFor(model => model.city)

//etcetera

MVC will handle creating as many form entries as necessary for each address in the list.

The POST works exactly in reverse; a new instance of the model object is created, calling the default parameter-less constructor, and then MVC fills in each of the fields. Lists are populating by reversing the serialization process of @Html.EditorFor( model.List ). It is important to note that you must make certain your class creates a valid container for the list in the constructor otherwise MVC’s list re-constitution will fail:

public class Person
{
    public List<Address> Addresses;

    public Person()
    {
        // You always need to create this List object
        Addresses = new List<Address>();
    }

    ...
}

That cover’s it. There is a lot going on behind the scenes, but it is all track-able.

Two important points if you are having trouble with this:

1. Make sure you have @Html.HiddenFor(...) for everything that needs to “survive” the trip back to the server.
2. Use Fiddler or HTTPLiveHeaders (Firefox plug-in) to examine the contents of the POST data. This will let you validate what data is being sent back to re-constitute the new class instance. I’m partial to Fiddler since you can use it with any browser (and it shows form data particularly well).

One last point: there is a good article on dynamically adding / removing elements from a list with MVC: http://jarrettmeyer.com/post/2995732471/nested-collection-models-in-asp-net-mvc-3 It’s a good article to work through — and yes, it does work with MVC3 and Razor.