Model binding nested collections in ASP.NET MVC
- by MartinHN
Hi
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>
<% } %>
