Model binding nested collections in ASP.NET MVC

Question

I'm using Steve Sanderson's BeginCollectionItem helper with ASP.NET MVC 2 to model bind a collection if items.

That works fine, as long as the Model of the collection items does not contain another collection.

I have a model like this:

-Product
--Variants
---IncludedAttributes

Whenever I render and model bind the Variants collection, it works jusst fine. But with the IncludedAttributes collection, I cannot use the BeginCollectionItem helper because the id and names value won't honor the id and names value that was produced for it's parent Variant:

<div class="variant">
    <input type="hidden" value="bbd4fdd4-fa22-49f9-8a5e-3ff7e2942126" autocomplete="off" name="Variants.index">
    <input type="hidden" value="0" name="Variants[bbd4fdd4-fa22-49f9-8a5e-3ff7e2942126].SlotAmount" id="Variants_bbd4fdd4-fa22-49f9-8a5e-3ff7e2942126__SlotAmount">
    <table class="included-attributes">
        <input type="hidden" value="0" name="Variants.IncludedAttributes[c5989db5-b1e1-485b-b09d-a9e50dd1d2cb].Id" id="Variants_IncludedAttributes_c5989db5-b1e1-485b-b09d-a9e50dd1d2cb__Id" class="attribute-id">
        <tr>
            <td>
                <input type="hidden" value="0" name="Variants.IncludedAttributes[c5989db5-b1e1-485b-b09d-a9e50dd1d2cb].Id" id="Variants_IncludedAttributes_c5989db5-b1e1-485b-b09d-a9e50dd1d2cb__Id" class="attribute-id">
            </td>
        </tr>
    </table>
</div>

If you look at the name of the first hidden field inside the table, it is Variants.IncludedAttributes - where it should have been Variants[bbd4fdd4-fa22-49f9-8a5e-3ff7e2942126].IncludedAttributes[...]...

That is because when I call BeginCollectionItem the second time (On the IncludedAttributes collection) there's given no information about the item index value of it's parent Variant.

My code for rendering a Variant looks like this:

<div class="product-variant round-content-box grid_6" data-id="<%: Model.AttributeType.Id %>">
    <h2><%: Model.AttributeType.AttributeTypeName %></h2>
    <div class="box-content">
    <% using (Html.BeginCollectionItem("Variants")) { %>

        <div class="slot-amount">
            <label class="inline" for="slotAmountSelectList"><%: Text.amountOfThisVariant %>:</label>
            <select id="slotAmountSelectList"><option value="1">1</option><option value="2">2</option></select>
        </div>

        <div class="add-values">
            <label class="inline" for="txtProductAttributeSearch"><%: Text.addVariantItems %>:</label>
            <input type="text" id="txtProductAttributeSearch" class="product-attribute-search" /><span><%: Text.or %> <a class="select-from-list-link" href="#select-from-list" data-id="<%: Model.AttributeType.Id %>"><%: Text.selectFromList.ToLowerInvariant() %></a></span>
            <div class="clear"></div>
        </div>
        <%: Html.HiddenFor(m=>m.SlotAmount) %>

        <div class="included-attributes">
            <table>
                <thead>
                    <tr>
                        <th><%: Text.name %></th>
                        <th style="width: 80px;"><%: Text.price %></th>
                        <th><%: Text.shipping %></th>
                        <th style="width: 90px;"><%: Text.image %></th>
                    </tr>
                </thead>
                <tbody>
                    <% for (int i = 0; i < Model.IncludedAttributes.Count; i++) { %>
                        <tr><%: Html.EditorFor(m => m.IncludedAttributes[i]) %></tr>
                    <% } %>
                </tbody>
            </table>
        </div>

    <% } %>
    </div>
</div>

And the code for rendering an IncludedAttribute:

<% using (Html.BeginCollectionItem("Variants.IncludedAttributes")) { %>
    <td>
        <%: Model.AttributeName %>
        <%: Html.HiddenFor(m => m.Id, new { @class = "attribute-id" })%>
        <%: Html.HiddenFor(m => m.ProductAttributeTypeId) %>
    </td>
    <td><%: Model.Price.ToCurrencyString() %></td>
    <td><%: Html.DropDownListFor(m => m.RequiredShippingTypeId, AppData.GetShippingTypesSelectListItems(Model.RequiredShippingTypeId)) %></td>
    <td><%: Model.ImageId %></td>
<% } %>

Answer 1

As you are using MVC 2 and EditorFor, you shouldn't need to use Steve's solution, which I believe is just a work around for MVC 1. You should just be able to do something like:

<% for (int i = 0; i < Model.Variants.Count; i++) { %>
    <%= Html.DisplayFor(m => m.Variants[i].AttributeType.AttributeTypeName) %>
    <% for (int j = 0; j < Model.Variants[i].IncludedAttributes.Count; j++) { %>
        <%= Html.EditorFor(m => m.Variants[i].IncludedAttributes[j]) %>
    <% } %>
<% } %>

Please note that the use of the indexes ...[i]...[j]... is important and is how MVC will know how to render the Id's and names correctly.