C# MVC, связать вместе вложенные частичные представления

Question

В C# MVC WebApp у меня есть CallDetailViewModel который содержит список CallerViewModels и у него есть список PhoneNumberViewModels, Я пытаюсь связать их все вместе правильно.

Здесь не показано, но я также пытаюсь как загрузить существующие значения, так и добавить новые / удалить значения, поэтому я не знаю, что отправляется в контроллер заранее.

Я пытался следовать этому руководству 2012 года, в котором есть очень похожая проблема, которую я обнаружил в Интернете, но пока не повезло: статья проекта кода
Я также попытался переместить Список PhoneNumberViewModels к CallDetailViewModelи хотя я смог передать телефонные номера своему контроллеру, у меня не было четкого способа связать их с соответствующими CallerViewModel,

Я хочу иметь возможность добавлять и удалять PhoneNumbers от Callers а также Callers от CallDetail,
На данный момент я удалил свои кнопки и AJAX относительно них, так как это не моя главная проблема.

Вот мои упрощенные ViewModels и Views:

ViewModels

CallDetailViewModel.cs

namespace PROJECT_NAME.ViewModels
{
    public class CallDetailsViewModel
    {
        public Guid Id { get; set; }

        public string EnteredByEmail { get; set; }

        public List<CallerViewModel> CallerViewModels { get; set; }
    }
}

CallerViewModel.cs

namespace PROJECT_NAME.ViewModels
{
    public class CallerViewModel
    {
        public Guid Id { get; set; }

        public string FirstName { get; set; }

        public List<PhoneNumberViewModel> PhoneNumberViewModels { get; set; }
    }
}

PhoneNumberViewModel.cs

namespace PROJECT_NAME.ViewModels
{
    public class PhoneNumberViewModel
    {
        public Guid Id { get; set; }

        public string Number { get; set; }
    }
}

Просмотры

CallDetail.cshtml

@using PROJECT_NAME.ViewModels
@model CallDetailsViewModel

<div class="container">
    @using (Html.BeginForm("SubmitCallDetails", "Home", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(m => m.Id)
        <div class="well">
            @* Call Details *@
            <div class="row">
                <fieldset">
                    <legend>Call Details</legend>
                </fieldset>
                <div class="form-group">
                    @Html.LabelFor(m => m.EnteredByEmail, new {@class = "control-label"})
                    @Html.TextBoxFor(m => m.EnteredByEmail, new {@class = "form-control"})
                </div>
            </div>
            @* Caller Details *@
            <div class="row">
                <fieldset>
                    <legend>Callers</legend>
                </fieldset>
            </div>
            @* Render each existing caller. Each caller gets it's own well to create a visual seperation between them. *@
            @if (Model.CallerViewModels.Count == 0)
            {
                <div class="well">
                    @{ Html.RenderPartial("_PartialCallerInfo", new CallerViewModel());}
                </div>
            }
            @foreach (var callerViewModel in Model.CallerViewModels)
            {
                <div class="well">
                    @{ Html.RenderPartial("_PartialCallerInfo", callerViewModel); }
                </div>
            }
        </div>
        <div class="row">
            <div class="form-group">
                <button class="btn btn-danger" type="reset">Reset</button>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="submit">Submit</button>
            </div>
        </div>
    }
</div>

_PartialCallerInfo.cshtml

@using PROJECT_NAME.ViewModels
@model CallerViewModel

@using (Html.BeginCollectionItem("CallerViewModels"))
{
    <div class="row">
        @Html.HiddenFor(m => m.Id)
        <div class="form-group">
            @Html.LabelFor(m => m.FirstName, new { @class = "control-label" })
            @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control"})
        </div>
    </div>
    @if (Model.PhoneNumberViewModels.Count == 0)
    {
        @{ Html.RenderPartial("_PartialCallerPhoneNumber", new PhoneNumberViewModel());}
    }
    @foreach (var phoneNumberViewModel in Model.PhoneNumberViewModels)
    {
        @{ Html.RenderPartial("_PartialCallerPhoneNumber", phoneNumberViewModel); }
    }
}

_PartialCallerPhoneNumber.cshtml

@using PROJECT_NAME.ViewModels
@model PhoneNumberViewModel

@using (Html.BeginCollectionItem("PhoneNumberViewModels"))
{
    <div class="row">
        @Html.HiddenFor(m => m.Id)
        <div class="form-group">
            @Html.LabelFor(m => m.Number, new { @class = "control-label" })
            @Html.TextBoxFor(m => m.Number, new { @class = "form-control"})
        </div>
    </div>
}