title: Composite ViewModel and UpdateModel
body: <p>What is missing that restuls in unpopulated values in POST action?</p>
  
  <p>Controller</p>
  
  <pre><code>public ActionResult Index()
  {
      var productPageViewModel = new ProductPageViewModel();
  
      productPageViewModel.ProductPageCriteria = BuildProductPageCriteriaViewModel();
      productPageViewModel.Products = GetProducts(productPageViewModel.ProductPageCriteria);
  
      return View(productPageViewModel);
  }
  
  [HttpPost]
  public ActionResult Index(ProductPageViewModel productPageViewModel, FormCollection formCollection)
  {
      // productPageViewModel is not populated with posted values of ProductPageCriteria.CategoryID, ProductPageCriteria.DepartmentID and ProductPageCriteria.PageSize
      // formCollection has correct values
      // Calling UpdateModel(productPageViewModel); has no affect - makes sense, the framework has already called it
      // Calling UpdateModel(productPageViewModel.ProductPageCriteria); populates the values.
      // The renderd form has names like CategoryID, DepartmentID unlike ProductPageCriteria.CategoryID, ProductPageCriteria.DepartmentID
      //     if the top model was passed to all partial views also.
  
      return View(productPageViewModel);
  }
  </code></pre>
  
  <p>Models</p>
  
  <pre><code>public class ProductPageCriteriaViewModel
  {
      public const int DefaultPageSize = 15;
  
      public ProductPageCriteriaViewModel()
      {
          Categories = new List&lt;Category&gt;();
          Departments = new List&lt;Department&gt;();
  
          PageSize = DefaultPageSize;
      }
  
      [Display(Name = "Category")]
      public int? CategoryID { get; set; }
      [Display(Name = "Department")]
      public int DepartmentID { get; set; }
      [Display(Name = "Page Size")]
      public int? PageSize { get; set; }
  
      public List&lt;Category&gt; Categories { get; set; }
      public List&lt;Department&gt; Departments { get; set; }
  }
  
  public class ProductPageViewModel
  {
      public ProductPageViewModel()
      {
          ProductPageCriteria = new ProductPageCriteriaViewModel();
          Products = new List&lt;Product&gt;();
      }
  
      public ProductPageCriteriaViewModel ProductPageCriteria { get; set; }
      public List&lt;Product&gt; Products { get; set; }
  }
  
  public class Product
  {
      public int ProductID { get; set; }
      public string ProductName { get; set; }
  
      public Category Category { get; set; }
      public Department Department { get; set; }
  }
  
  public class Category
  {
      public int CategoryID { get; set; }
      public string CategoryName { get; set; }
  }
  
  public class Department
  {
      public int DepartmentID { get; set; }
      public string DepartmentName { get; set; }
  }
  </code></pre>
  
  <p>View Index.cshtml</p>
  
  <pre><code>@using (Html.BeginForm()) {
      @Html.ValidationSummary(true)
  
      @Html.Partial("_ProductCriteria", Model.ProductPageCriteria)
  
      @Html.Partial("_ProductList", Model.Products)
  }
  </code></pre>
  
  <p>Partial View _ProductCriteria.cshtml</p>
  
  <pre><code>@model Mvc3Application4.Models.ProductPageCriteriaViewModel
  
  &lt;fieldset&gt;
      &lt;legend&gt;Criteria&lt;/legend&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.CategoryID)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.DropDownListFor(model =&gt; model.CategoryID, new SelectList(Model.Categories, "CategoryID", "CategoryName", Model.CategoryID), "--- All ---")
          @Html.ValidationMessageFor(model =&gt; model.CategoryID)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.DepartmentID)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.DropDownListFor(model =&gt; model.DepartmentID, new SelectList(Model.Departments, "DepartmentID", "DepartmentName", Model.DepartmentID), "--- All ---")
          @Html.ValidationMessageFor(model =&gt; model.DepartmentID)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.PageSize)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.DropDownListFor(model =&gt; model.PageSize, new SelectList(new List&lt;int&gt; {10, 15, 20, 25, 50, 100}.Select(n =&gt; new {Value = n, Text = n}), "Value", "Text", Model.PageSize), "--- All ---")
          @Html.ValidationMessageFor(model =&gt; model.PageSize)
      &lt;/div&gt;
  
      &lt;p&gt;
          &lt;input type="submit" value="Search" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>Partial View _ProductList.cshtml</p>
  
  <pre><code>@model IEnumerable&lt;Mvc3Application4.Models.Product&gt;
  
  &lt;p&gt;
      @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;
              ProductName
          &lt;/th&gt;
      &lt;/tr&gt;
  
  @foreach (var item in Model) {
      &lt;tr&gt;
          &lt;td&gt;
              @Html.ActionLink("Edit", "Edit", new { id=item.ProductID }) |
              @Html.ActionLink("Details", "Details", new { id=item.ProductID }) |
              @Html.ActionLink("Delete", "Delete", new { id=item.ProductID })
          &lt;/td&gt;
          &lt;td&gt;
              @item.ProductName
          &lt;/td&gt;
      &lt;/tr&gt;
  }
  
  &lt;/table&gt;
  </code></pre>