Model Binder & Hidden fields - asp.net-mvc-3

Question

I have a simplified test scenario useful for asking this question: A Product can have many Components, a Component can belong to many Products. EF generated the classes, I've slimmed them as follows:
public partial class Product
{
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<Component> Components { get; set; }
}
public partial class Component
{
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<Product> Products { get; set; }
}
The creation of a component is accomplished via these controller actions:
public ActionResult Create(int ProductId)
{
Product p = db.Products.Find(ProductId);
Component c = new Component();
c.Products.Add(p);
return PartialView(c);
}
[HttpPost]
public ActionResult Create(Component model)
{
db.Components.Add(model);
db.SaveChanges();
}
and the view returned by the GET method looks like this:
#model Test.Models.Product
<fieldset>
<legend>Product</legend>
<div class="display-label">Name</div>
<div class="display-field">#Model.Name</div>
</fieldset>
#Html.Action("Create", "Component", new {ProductId = Model.Id})
<p>
#Html.ActionLink("Edit", "Edit", new { id=Model.Id }) |
#Html.ActionLink("Back to List", "Index")
</p>
From which can be seen that the component creation is handled on the same page via the above Html.Action - the code for that view follows:
#model Test.Models.Component
#using Test.Models
<script type="text/javascript">
function Success() {
alert('ok');
}
function Failure() {
alert('err');
}
</script>
#using (Ajax.BeginForm("Create", "Component", new AjaxOptions
{
HttpMethod = "Post",
OnSuccess = "Success",
OnFailure = "Failure"
}))
{
<fieldset>
<legend>Components</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
#Html.HiddenFor(x => x.Products.First().Id)
#Html.HiddenFor(x => x.Products)
#foreach (Product p in Model.Products)
{
#Html.Hidden("Products[0].Id", p.Id)
}
#foreach (Product p in Model.Products)
{
#Html.Hidden("[0].Id", p.Id)
}
</fieldset>
<input type="submit" value="go" />
}
ok. so this is what I'm struggling with: I need the model parameter of the [HttpPost]back to get properly populated i.e. it should contain a Product, since I can't create the new component with a null product. To get the product I need to look it up via the product's id. I expect I should be able to do:
model.Products.Add(db.Products.Find(model.Products.First().Id));
or some such thing, which relies on model receiving the id. This means the view has to place the id there, presumably in a hidden field, and as can be seen from my view code, I've made several attempts at populating this, all of which have failed.
Normally I prefer the *For methods since they become responsible for generating correct nomenclature. If .Products were singular (.Product), I could reference it as x => x.Product.Id and everything would be fine, but since it's plural, I can't do x => x.Products.Id so I tried x => x.Products.First().Id which compiles and produces the right value but gets name Id (which is wrong since the model binder thinks it's Component.Id and not Component.Products[0].Id.
My second attempt was to let HiddenFor iterate (like I would with EditorFor):
#Html.HiddenFor(x => x.Products)
but that produces nothing - I've read that this helper doesn't iterate. I tried x => x.Products.First() but that doesn't even compile. Finally, I decided to abandon the *For and code the name myself:
#foreach (Product p in Model.Products)
{
#Html.Hidden("Products[0].Id", p.Id)
and though that looks right, the postback doesn't see my value (Products.Count == 0). I saw in some posting that format should look like [0].Id but that doesn't work either. grr...
I gather I could code it like this:
#Html.Hidden("ProductId", p.Id)
and then redeclare my controller action like this:
[HttpPost] ActionResult Create(Component model, int ProductId)
but that seems eecky. it's hard to believe this is so difficult. can anyone help?
e
p.s. I have a project I could make available for download if anyone cares

Answer 1

Instead of writing those foreach loops try using editor templates:
<fieldset>
<legend>Components</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
#Html.EditorFor(x => x.Products)
</fieldset>
and inside the corresponding editor template (~/Views/Shared/EditorTemplates/Product.cshtml)
#model Product
#Html.HiddenFor(x => x.Id)