Creating View Models consisting of objects of other models in MVC3 - asp.net-mvc-3

Question

I have a model and an enumerable of that model that I am putting together into a view model in asp.net mvc3 like so.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel.DataAnnotations;
namespace FuelPortal.Models.DBModels
{
public class UserDBModel
{
public int userId { get; set; }
[Required, Display(Name = "User Name")]
public string userName { get; set; }
[Required, Display(Name = "Password")]
public string password { get; set; }
[Required, Display(Name = "First Name")]
public string firstName { get; set; }
[Required, Display(Name = "Last Name")]
public string lastName { get; set; }
[Required, Display(Name = "Email")]
public string email { get; set; }
[Display(Name = "Phone")]
public string phone { get; set; }
[Display(Name = "Account Expiration Date(Optional)")]
public DateTime expireDate { get; set; }
[Display(Name = "Password Expiration Date")]
public DateTime passwordExpireDate { get; set; }
[Display(Name = "Last Date Modified")]
public DateTime DateModified { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using FuelPortal.Models.DBModels;
namespace FuelPortal.Models.ViewModels
{
public class UserMaintenanceViewModel
{
public UserDBModel user = new UserDBModel();
public List<UserDBModel> userList = new List<UserDBModel>();
}
}
Now I strongly type a view to use the view model.
#model FuelPortal.Models.ViewModels.UserMaintenanceViewModel
<div class="frmBG">
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "wrapperData" }))
{
<h5>Create New User</h5>
<br />
<table cellpadding="2" cellspacing="10" border="0">
<tr><td>
<div class="editor-label">
#Html.LabelFor(model => model.user.userName)
</div></td><td>
<div class="editor-field">
#Html.EditorFor(model => model.user.userName)
#Html.ValidationMessageFor(model => model.user.userName)
</div></td></tr>
<tr><td>
<div class="editor-label">
#Html.LabelFor(model => model.user.password)
</div></td><td>
<div class="editor-field">
#Html.PasswordFor(model => model.user.password)
#Html.ValidationMessageFor(model => model.user.password)
</div></td></tr>
<tr><td>
<div class="editor-label">
#Html.LabelFor(model => model.user.firstName)
</div></td><td>
<div class="editor-field">
#Html.EditorFor(model => model.user.firstName)
#Html.ValidationMessageFor(model => model.user.firstName)
</div></td></tr>
<tr><td>
<div class="editor-label">
#Html.LabelFor(model => model.user.lastName)
</div></td><td>
<div class="editor-field">
#Html.EditorFor(model => model.user.lastName)
#Html.ValidationMessageFor(model => model.user.lastName)
</div></td></tr>
<tr><td>
<div class="editor-label">
#Html.LabelFor(model => model.user.email)
</div></td><td>
<div class="editor-field">
#Html.EditorFor(model => model.user.email)
#Html.ValidationMessageFor(model => model.user.email)
</div></td></tr>
<tr><td>
<div class="editor-label">
#Html.LabelFor(model => model.user.phone)
</div></td><td>
<div class="editor-field">
#Html.EditorFor(model => model.user.phone)
#Html.ValidationMessageFor(model => model.user.phone)
</div></td></tr>
<tr><td>
<div class="editor-label">
#Html.LabelFor(model => model.user.expireDate)
</div></td><td>
<div class="editor-field">
#Html.EditorFor(model => model.user.expireDate)
#Html.ValidationMessageFor(model => model.user.expireDate)
</div></td></tr>
<tr><td></td><td>
<p>
<input type="submit" value="" class="create" /><input type="button" value="" class="close_tab"/>
</p></td></tr>
</table>
}
</div>
For some reason on post it does not populate the object within the view model. So when i create a post action all values of (UserMaintenanceViewModel model) are null. Like so..
[HttpPost]
public ActionResult CreateUser(UserMaintenanceViewModel model)
{
try
{
/// TODO: Add insert logic here
var result = repository.insertNewUser(Session["UserId"].ToString(), model.user.UserName, model.user.Password, model.user.FirstName,
model.user.LastName, model.user.Email, model.user.Phone, model.user.ExpireDate);
// If result > 0 user insert successful
Also, if I switch to getting postback through a (FormCollection form) I see that the names of the html elements are "user.UserName" instead of the expected "UserName". Any guidance would be greatly appreciated I feel like I should be able to accomplish this.
Thanks so much

Answer 1

If you have a complex view model which is what you have, then you have to make sure to create instance of an object in the constructor. You can then add info to any child object since it now has an instance.
public class MyViewModel
{
public MyViewModel()
{
Customer= new CustomerViewModel ();
Address = new AddressViewModel();
}
public int OrderNumber{ get; set; }
public CustomerViewModel Customer { get; set; }
public AddressViewModel Address { get; set; }
}
}