title: Pass Complex ViewModel to HttpPost Method in MVC 3
body: <p>I am currently working on an Edit function for my project and I cannot seem to get the View Model right to allow it to be passed back into the Controller from the View. The structure of the View Model is as such:</p>
  
  <pre><code>public class CreateUserViewModel : ICreateUserViewModel
  {
      #region Properties
      public string UserName { get; set; }
      public string Password { get; set; }
      public string Email { get; set; }
      public string SelectedUserType { get; set; }
      public List&lt;ICreateUserItemViewModel&gt; UserTypes { get; set; }
      public List&lt;ICreateUserItemViewModel&gt; Products { get; set; }
      public List&lt;ICreateUserItemViewModel&gt; Languages { get; set; }
      #endregion
  
      #region Constructor
      public CreateUserViewModel()
      {
      }
  
      public CreateUserViewModel(List&lt;Product&gt; products, List&lt;Language&gt; languages)
      {
          Products = new List&lt;ICreateUserItemViewModel&gt;();
          foreach (var prod in products)
          {
              var prodVM = new CreateUserItemViewModel
              {
                  Name = prod.Name,
                  IsSelected = false,
                  ID = (int)prod.ID
              };
              Products.Add(prodVM);
          }
  
          Languages = new List&lt;ICreateUserItemViewModel&gt;();
          foreach (var lang in languages)
          {
              var langVM = new CreateUserItemViewModel
              {
                  Name = lang.Name,
                  IsSelected = false,
                  ID = (int)lang.ID
              };
              Languages.Add(langVM);
          }
  
      }
      #endregion
  }
  </code></pre>
  
  <p>The subclass ViewModel <code>CreateUserItemViewModel</code>:</p>
  
  <pre><code>public class CreateUserItemViewModel : ICreateUserItemViewModel
  {
      public string Name { get; set; }
      public int ID { get; set; }
      public bool IsSelected { get; set; }
  }
  </code></pre>
  
  <p>I want this subclass to be represented in the view as a checkbox, so the user can choose to include it or not.</p>
  
  <p>User Controller:</p>
  
  <pre><code>[HttpPost]
  public ActionResult Create(CreateUserViewModel model)
  {
      if (ModelState.IsValid)
      {
          User newUser = new User();
          newUser.UserName = model.UserName;
          newUser.Password = model.Password;
          newUser.Email = model.Email;
          newUser.Products = model.Products; //Always NULL
  </code></pre>
  
  <p>When I put a break point on this part of the application the properties for username password and email are populated but Products and Languages are empty. I used Fiddler2 to watch what was being passed into the controller and this was the output:</p>
  
  <pre><code>UserName=asdasdsdasd&amp;Password=asd&amp;Email=asD%40asd.com&amp;type.IsSelected=Admin
  &amp;prod.ID=1&amp;prod.IsSelected=true&amp;prod.IsSelected=false
  &amp;prod.ID=2&amp;prod.IsSelected=false
  &amp;prod.ID=3&amp;prod.IsSelected=false
  &amp;prod.ID=4&amp;prod.IsSelected=false
  &amp;lang.ID=1&amp;lang.IsSelected=true&amp;lang.IsSelected=false
  &amp;lang.ID=2&amp;lang.IsSelected=true&amp;lang.IsSelected=false
  &amp;lang.ID=3&amp;lang.IsSelected=false
  &amp;lang.ID=4&amp;lang.IsSelected=false
  &amp;lang.ID=5&amp;lang.IsSelected=false
  &amp;lang.ID=6&amp;lang.IsSelected=false
  &amp;lang.ID=7&amp;lang.IsSelected=false
  &amp;lang.ID=8&amp;lang.IsSelected=false
  &amp;lang.ID=9&amp;lang.IsSelected=false
  &amp;lang.ID=10&amp;lang.IsSelected=false
  &amp;lang.ID=11&amp;lang.IsSelected=false
  &amp;lang.ID=12&amp;lang.IsSelected=false
  &amp;lang.ID=13&amp;lang.IsSelected=false
  &amp;lang.ID=14&amp;lang.IsSelected=false
  &amp;lang.ID=15&amp;lang.IsSelected=false
  &amp;lang.ID=16&amp;lang.IsSelected=false
  &amp;lang.ID=17&amp;lang.IsSelected=false
  &amp;lang.ID=18&amp;lang.IsSelected=false
  &amp;lang.ID=19&amp;lang.IsSelected=false
  </code></pre>
  
  <p>A nugget of the code for the Create View is:</p>
  
  <pre><code>&lt;div class="editor-label"&gt;
      @Html.Label("User Products:")
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @foreach (var prod in Model.Products)
      {
          @Html.Label(prod.Name)
          @Html.HiddenFor(x =&gt; prod.ID)
          @Html.CheckBoxFor(x =&gt; prod.IsSelected, new { name = prod.Name })
      }
  &lt;/div&gt;
  &lt;div class="editor-label"&gt;
      @Html.Label("User Languages:")
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @foreach (var lang in Model.Languages)
      {
          @Html.Label(lang.Name)
          @Html.HiddenFor(x =&gt; lang.ID)
          @Html.CheckBoxFor(x =&gt; lang.IsSelected, new { name = lang.Name })
      }
  &lt;/div&gt;
  &lt;p&gt;
      &lt;input type="submit" value="Create" /&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>I have been working on this for quite a while and I am beginning to think what I am trying to do is not possible. I want it to return the <code>CreateUserViewModel</code> fully populated with all the values that the user has selected, but I just do not know how to achieve this.</p>
  
  <p>Any ideas?</p>