ASP.NET MVC - EntityFramework and Binding to a List

Question

I am currently using the EntityFramework to bind my ASP.NET MVC project to a MySQL database and one of my entities, Product, has an Images property containing a collection of ProductImages. I have built a form to allow the user to modify a given Product and this form includes fields for editing all of the images associated to that Product as well. After reading Phil Haack's and Dan Miser's posts on the matter I have a decent idea of what needs to happen, but I can't seem to make it work for some reason...

Here is my Product form:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<KryptonCMS.Models.Product>" %>
<%@ Import Namespace="KryptonCMS.Core" %>
<%@ Import Namespace="KryptonCMS.Models.ViewModels" %>

<% using (Html.BeginForm())
   {%>

  <ul class="gallery">
   <%
    var index = 0;
    foreach (var image in Model.ImageList.OrderBy(p => p.Order))
    {
   %>
   <li>
    <% Html.RenderPartial("ProductImageForm", image, new ViewDataDictionary(ViewData) { { "index", index } }); %>
   </li>
   <%
    index++;
          }
   %>
  </ul>

 <p>
  <input type="submit" name="btnSave" value="Save" />
  <input type="submit" name="btnCancel" value="Cancel" />
 </p>
<% } %>

And here is the definition for ProductImageForm:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<KryptonCMS.Models.ProductImage>" %>
<%@ Import Namespace="KryptonCMS.Core" %>
<div>
 <%
  var fieldPrefix = string.Format("images[{0}]", ViewData["index"]); %>
 <%=Html.Hidden(fieldPrefix + "ID", Model.ID) %>
 <img src="<%=UtilityManager.GetProductImagePath(Model.Product.ID, Model.FileName, true) %>"
  alt="" /><br />
 <label for="Description">
  Description:</label>
 <%=Html.TextBox(fieldPrefix + "Description", Model.Description) %><br />
 <label for="Order">
  Order:</label>
 <%=Html.TextBox(fieldPrefix + "Order", Model.Order)%><br />
</div>

And finally my ProductsController actions:

    public ActionResult Edit(int id)
    {
        var product = productsRepository.GetProduct(id);

        if (product == null)
            return View("NotFound", new MasterViewModel());

        // else
        return View(ContentViewModel.Create(product));
    }

    [AcceptVerbs(HttpVerbs.Post), ValidateInput(false)]
    public ActionResult Edit(int id, FormCollection formCollection)
    {
        var product = productsRepository.GetProduct(id);

        if (formCollection["btnSave"] != null)
        {
            if (TryUpdateModel(product) && TryUpdateModel(product.Images, "images"))
            {
                productsRepository.Save();

                return RedirectToAction("Details", new { id = product.ID });
            }
            return View(ContentViewModel.Create(product));
        }

        // else
        return RedirectToAction("Details", new { id = product.ID });
    }

The HTML output for a single ProductImageForm looks like this:

<div>
 <input id="images[0]ID" name="images[0]ID" type="hidden" value="1" />
 <img src="/Content/ProductGallery/3/thumbs/car1.jpg"
  alt="" /><br />
 <label for="Description">
  Description:</label>
 <input id="images[0]Description" name="images[0]Description" type="text" value="FAST CAR" /><br />
 <label for="Order">

  Order:</label>
 <input id="images[0]Order" name="images[0]Order" type="text" value="1" /><br />
</div>

I have tried all sorts of methods of reorganizing my form including taking the Image collection out of the Product form and placing it in its own (which I really don't want to do), but nothing is working. Is there something blatatently wrong with my approach here?

Answer 1

You are missing dots in inputs' names:

<%= Html.Hidden(fieldPrefix + ".ID", Model.ID) %>
<%= Html.TextBox(fieldPrefix + ".Description", Model.Description) %>
<%= Html.TextBox(fieldPrefix + ".Order", Model.Order) %>

Check this blog post: http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx