asp.net mvc - Nested Object Form with Razor -

im trying implement way how enter recipes correctly, far have following:

recipe.cs

public class recipe {     [key]     public int recipeid { get; set; }     [required]     public string name { get; set; }     public string subtitle { get; set; }     public int serving { get; set; }     public string instructions { get; set; }     public virtual icollection<ingredient> ingredients } 

ingredient.cs

public class ingredient {     [key]     public int ingredientid { get; set; }     public string name { get; set; }     public string amount { get; set; }     public virtual icollection<recipe> recipes { get; set; } } 

in form, want add ingredients inline, javascript rendering new pair of fields if needed.

(the viewmodel nothing else class holding instance of recipe)

create.cshtml

 @model vineyard.webui.areas.admin.models.recipeviewmodel  <div class="span9">     <h2>create new recipe</h2>     @using (@html.beginform("create", "recipes", formmethod.post))     {         <fieldset>             @html.labelfor(r => r.recipe.name)             @html.textboxfor(r => r.recipe.name)         </fieldset>         <fieldset>             @html.labelfor(r => r.recipe.subtitle)             @html.textboxfor(r => r.recipe.subtitle)         </fieldset>         <div id="ingredients">             @html.editorfor(r => r.recipe.ingredients, "ingredient")         </div>         <a href="#" id="addingredient" class="btn btn-info">add ingredient</a>         <fieldset>             @html.labelfor(r => r.recipe.serving)             @html.textboxfor(r => r.recipe.serving)         </fieldset>         <fieldset>             @html.labelfor(r => r.recipe.instructions)             @html.textareafor(r => r.recipe.instructions)         </fieldset>         <input type="submit" value="save recipe" />     }   </div> 

shared/editortemplates/ingredient.cshtml

@model vineyard.core.entities.ingredient  <div class="ingredient form-inline">   @html.labelfor(r => r.amount)   @html.textboxfor(r => r.amount)   @html.labelfor(r => r.name)   @html.textboxfor(r => r.name) </div> 

in rendered html tough, see following:

<input id="recipe_ingredients_amount" name="recipe.ingredients.amount" type="text" value="">

which leads believe, not add ingredient member of collection, full blown object itself. shouldnt have index referencing it? (based of http://jarrettmeyer.com/post/2995732471/nested-collection-models-in-asp-net-mvc-3)

when @ model, being passed controller, ingredients part null

so, im wondering - missing here or doing wrong, can changed populate collection correctly? there, can handle in controller saved in right format.

change

public virtual icollection<ingredient> ingredients 

to

public ienumerable<ingredient> ingredients { get; set; }  

(lose virtual , change icollection ienumerable).

also, in controller, pre-populate list of ingredients single item (for testing) otherwise nothing appear in html.

this answer converted comment