c# mvc5 Editing a nested collection

Question

I am trying to edit nested collections and post the values back to the server. I do not know if this is possible.

Class1 has a collection of Class2

Class2 has Class3

Class3 has a collection of Class4

Class4 has a collection of Class5

I installed package BeginCollectionItem from Nuget.

I created editor templates for each of them. But still the editors are not displayed.

@using (Html.BeginForm("SaveModification","Client", FormMethod.Post, new { @class =     "form-horizontal", role = "form" }))
{    
    @Html.AntiForgeryToken()
    @Html.HiddenFor(o => o.Id)
    <div class="row">
        <div class="col-md-12">
              @using (Html.BeginCollectionItem("Classes2"))
              {
                @Html.EditorFor(x => x.Classes2)
              }                
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>    
}

Class2.cshtml
<div class="row">
    @Html.HiddenFor(o => o.Id)
    @Html.EditorFor(model => model.Class3)
</div>

Class3.cshtml
<div class="row">             
   @Html.HiddenFor(o=>o.Id)
    <div class="row">   
        <div class="col-md-10" >@Html.DisplayFor(model => model.Name)</div>
        <div class="col-md-2">@Html.EditorFor(model => model.Quantity)</div>
    </div>
    <div class="row">
    @using (Html.BeginCollectionItem("Classes4"))
    {              
        @Html.EditorFor(x => x.Classes4)
    }
    </div>
</div>

Class4.cshtml
<div class="row">                   
     <div class="col-md-10" style="padding-left:30px;">@Html.DisplayFor(model => model.Name)</div>
    <div class="col-md-2">@Html.EditorFor(model => model.Quantity)</div>
</div>
<div class="row">                                    
@using (Html.BeginCollectionItem("Classes5"))
{          
    @Html.EditorFor(x => x.Classes5)
}          
</div>

Class5.cshtml
 @Html.HiddenFor(model => model.Id)
<div class="row">
    <div class="col-md-10" style="padding-left:50px;">@Html.DisplayFor(model => model.Name)</div>
    <div class="col-md-2">@Html.EditorFor(model => model.Quantity)</div>
</div>

My question: Is this possible using nested editor templates?

update 1:

using fiddler, i see that my response contains my edited values

Id
Classes2.index
Classes2.index
Classes2[311410b2-6ce1-4a09-9979-552720f377fc].Id
Classes2[311410b2-6ce1-4a09-9979-552720f377fc].Class3.Id
Classes2[311410b2-6ce1-4a09-9979-552720f377fc].Class3.Quantity
Class3.index
Class3[7e8b7a76-7000-4ec9-8877-d150ffe25dc5].Classes4.index
Class3[7e8b7a76-7000-4ec9-8877-d150ffe25dc5].Classes4[3315b9ce-989d-4229-92c5-a7ba9955539d].Id
Class3[7e8b7a76-7000-4ec9-8877-d150ffe25dc5].Classes4[3315b9ce-989d-4229-92c5-a7ba9955539d].Quantity
Classes4.index
Classes4[d8990f17-9d9d-4f21-81e2-70c012c48922].Classes5.index
Classes4[d8990f17-9d9d-4f21-81e2-70c012c48922].Classes5[a8afe9a0-b6e0-42b7-85aa-f5bd967dcab6].Id
Classes4[d8990f17-9d9d-4f21-81e2-70c012c48922].Classes5[a8afe9a0-b6e0-42b7-85aa-f5bd967dcab6].Quantity

But in my controller, the viewmodel does not have the same values, some collections are null. I get only class2 and class3 values.

Answer 1

The BeginCollectionItem should be used on a single collection item, not at the collection level. Moreover, if you want to just display the collection without adding and removing dynamically, you should not need it.

In your main view you can simply do this:

<div class="col-md-12">
    @Html.EditorFor(x => x.Classes2)
</div>

Call the EditorTemplate Class2.cshtml . Razor will automatically cycle over the collection and render your template for each element.

If you want, in the Class2.cshtml , you can wrap your code into the:

@using (Html.BeginCollectionItem("Classes2"))
{
    // Your Template code here... 
}