ASP.NET MVC 3 Editing a collection in a model with the same view

Question

I have a simple question.

I have a model that looks like this:

public class AddEditChildProductModel { public string Name {get; set;} public string Sku {get;set;} ........ public IEnumerable<AddEditPriceTierModel> PriceTiers {get;set;} } public class AddEditPriceTierModel { public int QtyStart {get;set;} public int QtyEnd {get;set;} ........ } 

My question is: how to edit a collection in the same view?

It would seem that it would be very simple, maybe I'm missing something.

Thanks!!

** Edit **

OK, so I used EditorTemplates, but now I get the following error:

 The operation failed: The relationship could not be changed because one or more of the foreign-key properties is non-nullable. When a change is made to a relationship, the related foreign-key property is set to a null value. If the foreign-key does not support null values, a new relationship must be defined, the foreign-key property must be assigned another non-null value, or the unrelated object must be deleted. 

This is my controller action:

 public ActionResult EditChildProduct(AddEditChildProductModel model) { if (!ModelState.IsValid) return PartialView("AddEditChildProduct", model); ChildProduct childProduct = productService.GetChildProductByID(model.ID); AutoMapper.Mapper.Map<AddEditChildProductModel, ChildProduct>(model, childProduct); foreach (var tier in childProduct.PriceTiers) { tier.ChildProduct = childProduct; } UnitOfWork.Commit(); return ListChildProducts(model.ProductID); } 

Should this not work when I get ChildProduct with the associated PriceTiers collection and use AutoMapper to match the differences? I support hidden fields for PK and FK fields on PriceTier .

I am a bit confused.

Answer 1

You can use editor templates:

 @model AddEditChildProductModel @using (Html.BeginForm()) { <div> @Html.LabelFor(x => x.Name) @Html.EditorFor(x => x.Name) @Html.ValidationMessageFor(x => x.Name) </div> <div> @Html.LabelFor(x => x.Sku) @Html.EditorFor(x => x.Sku) @Html.ValidationMessageFor(x => x.Sku) </div> <table> <thead> <tr> <th>QtyStart</th> <th>QtyEnd</th> </tr> </thead> <tbody> @Html.EditorFor(x => x.PriceTiers) </tbody> </table> <input type="submit" value="OK"> } 

and then determine the editor template that will be displayed for each element of the PriceTiers list ( ~/Views/Shared/EditorTemplates/AddEditPriceTierModel.cshtml ) - the name and location of the editor template is important. You can also put it in ~/Views/SomeController/EditorTemplates/AddEditPriceTierModel.cshtml if the editor template is specific to this controller only:

 @model AddEditPriceTierModel <tr> <td> @Html.LabelFor(x => x.QtyStart) @Html.EditorFor(x => x.QtyStart) @Html.ValidationMessageFor(x => x.QtyStart) </td> <td> @Html.LabelFor(x => x.QtyEnd) @Html.EditorFor(x => x.QtyEnd) @Html.ValidationMessageFor(x => x.QtyEnd) </td> </tr> 

and now your POST controller action signature will look like this:

 [HttpPost] public ActionResult Edit(AddEditChildProductModel model) { ... } 

Answer 2

You can take a look at Phil Haack's article “Associating a Model with a List” with useful information about linking entity collections to a view.

 @for (int i = 0; i < Model.MyCollection.Count; i++) { @Html.TextBoxFor(m => m[i].Title) @Html.TextBoxFor(m => m[i].Author) @Html.TextBoxFor(m => m[i].DatePublished) } public ActionResult UpdateStuff(MyViewModel vm) { } 

Answer 3

You can also find the solution provided by Stephen Sanderson at http://blog.stevensanderson.com/2010/01/28/validating-a-variable-length-list-aspnet-mvc-2-style/ . Helped me a lot.