带有 BeginCollectionItem 的嵌套列表列表

Question

I'm using BeginCollectionItem to add items to an inner list of lists.

My question is very similar to the following: Nested BeginCollectionItem , however my the object that contains the list is also a list itself (so in the referenced example the tt is a List rather than just one instance of the object).

My Models are:

public class WeeklyTimeSheetViewModel
{
    public Guid WeeklyId { get; set; }
    public DateTime WeekCommencing { get; set; }
    public int WeekNumber { get; set; }
    public Employee Employee { get; set; }

    public List<TimeSheetDayViewModel> Days{ get; set; }

    public double HourlyRate { get; set; }
    public double OvernightRate { get; set; }

}

public class TimeSheetDayViewModel
{
    public Guid DayId { get; set; }
    public DateTime Date { get; set; }
    public List<TimeBookingViewModel> Hours { get; set; }
    public bool Overnight { get; set; }
}

public class TimeBookingViewModel
{
    public Guid BookingId { get; set; }
    public string TimeRef { get; set; }
    public string TimeDescription { get; set; }

    public double NormalHours { get; set; }
    public double OvertimeHoursR1 { get; set; }
    public double OvertimeHoursR2 { get; set; }
}

So in my view I have a form which represents a full week time sheet, so a list of days (public List Days) and then each day has a list of hours to be booked against it (public List Hours).

My view looks like this: WeeklyTimeSheet.cshtml

@model Models.WeeklyTimeSheetViewModel

<div style="margin: 5px;">
    <h1>Time Sheet</h1>

    @using (Html.BeginForm(FormMethod.Post))
    {  
        ...
        @Html.EditorFor(model => model.Days)  
        ...  
    }
</div>

TimeSheetDayViewModel.cshtml (in editortemplates)

@using (Html.BeginCollectionItem("Days"))
{
    <table class="formtable">

        @Html.HiddenFor(model => model.DayId)
        @Html.HiddenFor(model => model.Date)
        <thead>
        <tr>
            <th class="formtableheader" colspan="6">@Model.Date.DayOfWeek @Model.Date.ToLongDateString()</th>
        </tr>
        <tr>
            <td class="formtabletools formtableleft">Overnight: @Html.CheckBoxFor(model => model.Overnight)</td>
            <td class="formtabletools formtableright" colspan="5">
                <a href="javascript:void(0)" onclick="AddTimeBooking('@Model.Date.ToShortDateString()');">add</a>
            </td>

        </tr>
        <tr class="formtablecolumns">
            <th>Ref</th>
            <th>Description</th>
            <th>Hours</th>
            <th>Overtime x1.5</th>
            <th>Overtime x2.0</th>
            <th></th>
        </tr>
        </thead>
        <tbody id="@Model.Date.ToShortDateString()">

            @Html.EditorFor(model => model.Hours)

        </tbody>
    </table>
}

TimeBookingViewModel.cshtml (editortemplates)

@model Models.TimeBookingViewModel
@{
    var methodPrefix = ViewData.TemplateInfo.HtmlFieldPrefix;
}
@using (Html.BeginCollectionItem(methodPrefix + ".Hours"))
 {
     @Html.HiddenFor(model => model.BookingId)
     <tr>
         <td>@Html.TextBoxFor(model => model.TimeRef, new {@class = "short"})</td>
         <td>@Html.TextBoxFor(model => model.TimeDescription, new {@class = "longer"})</td>
         <td>@Html.TextBoxFor(model => model.NormalHours, new {@class = "tiny"})</td>
         <td>@Html.TextBoxFor(model => model.OvertimeHoursR1, new {@class = "tiny"})</td>
         <td>@Html.TextBoxFor(model => model.OvertimeHoursR2, new {@class = "tiny"})</td>

         <td><a href="javascript:void(0)" onclick="DeleteTimeBooking(event)">delete</a></td>
     </tr>
 }

On the post back to the server TimeBookingViewModel objects are not populated. Any suggestions?

Answer 1

I manage to make it work as follow. Thanks to user3559349 for the lead on ViewData.TemplateInfo.HtmlFieldPrefix

Models:

public class MainDto
{
    public List<ItemDto> Items { get; set; }
}
public class ItemDto
{
    public string Label { get; set; }
    public List<SubItemDto> SubItems { get; set; }
}
public class SubItemDto
{
    public int Value { get; set; }
}

Main view:

<table>
@foreach (var item in Model.Items)
{
    @Html.Partial("_ItemEditor", item)
}
</table>

Item editor template:

@model Test.ItemDto
<tr>
    @using (Html.BeginCollectionItem("Items"))
    {
        <td>@Html.TextBoxFor(x => x.Label)</td>
        foreach (var subItem in Model.SubItems)
        {
            @Html.Partial("_SubItemEditor", subItem)
        }
    }
</tr>

Sub item editor template:

@model Test.SubItemDto
@using (Html.BeginCollectionItem(ViewData.TemplateInfo.HtmlFieldPrefix + ".SubItems"))
{
    <td>@Html.TextBoxFor(x => x.Value)</td>
}