Как связать выпадающие списки, которые динамически загружаются с помощью Ajax

Question

У меня есть модель просмотра:

 public class RegistrationViewModel
{
    public RegisterModel RegistrationData { get; set; }
    public List<OccupierApartment> OccupierApartments { get; set; }
    public List<Complex> Complexes { get; set; } // for complexes lookup       
}

Во время регистрации пользователь должен выбрать 1 или более Комплексов.Эти значения должны быть сохранены в списке OccupierApartments.Доступные Комплексы загружаются в выпадающие списки, а затем передаются в ViewBag.

public PartialViewResult GetApartment()
    {
        var complexes = new SelectList(db.Complexes.ToList(), "ComplexID", "Name", "-- Select --");

        List<SelectListItem> occupierTypes = new List<SelectListItem>();
        occupierTypes.Add(new SelectListItem { Value = "Owner", Text = "Owner" });
        occupierTypes.Add(new SelectListItem { Value = "Tenant", Text = "Tenant" });

        //load Complex data.
        ViewBag.Complexes = complexes;
        ViewBag.OccupierTypes = occupierTypes;
        return PartialView("_AddApartment");
    }

Когда пользователь нажимает «Добавить квартиру» в представлении регистрации, PartialView добавляется в таблицу с помощью Ajax.ActionLink (см. в нижней части представления): все отображается правильно и выпадающие списки заполняются данными, но я не знаю, как связать выбранные значения в раскрывающемся списке с моделью представления.

@model PropertyManager_MVC.Areas.Account.ViewModels.RegistrationViewModel
@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm())
{
@Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
<div>
    <fieldset>
        <legend>Account Information</legend>
        <div class="editor-label">
            @Html.LabelFor(m => m.RegistrationData.UserName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.RegistrationData.UserName)
            @Html.ValidationMessageFor(m => m.RegistrationData.UserName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(m => m.RegistrationData.Email)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.RegistrationData.Email)
            @Html.ValidationMessageFor(m => m.RegistrationData.Email)
        </div>
        <div class="editor-label">
            @Html.LabelFor(m => m.RegistrationData.Password)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(m => m.RegistrationData.Password)
            @Html.ValidationMessageFor(m => m.RegistrationData.Password)
        </div>
        <div class="editor-label">
            @Html.LabelFor(m => m.RegistrationData.ConfirmPassword)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(m => m.RegistrationData.ConfirmPassword)
            @Html.ValidationMessageFor(m => m.RegistrationData.ConfirmPassword)
        </div>
        <div class="editor-label">
            @Html.LabelFor(m => m.RegistrationData.FirstName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.RegistrationData.FirstName)
            @Html.ValidationMessageFor(m => m.RegistrationData.FirstName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(m => m.RegistrationData.LastName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.RegistrationData.LastName)
            @Html.ValidationMessageFor(m => m.RegistrationData.LastName)
        </div>
        <br />
        <hr />
        <h2>
            Your Apartment(s)</h2>

        <table id="newApartment">
            <thead>
                <tr>
                    <td>
                        Occupier Type
                    </td>
                    <td>
                        Complex
                    </td>
                    <td>
                        Apartment No.
                    </td>
                    <td>
                    </td>
                </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
        <br />
        @Ajax.ActionLink("Add Apartment",
                         "GetApartment",
                         new AjaxOptions
                         {
                             UpdateTargetId = "tableBody",
                             HttpMethod = "GET",
                             InsertionMode = InsertionMode.InsertAfter,
                         })
        <hr />
        <p>
            <input type="submit" value="Register" />
        </p>
    </fieldset>
</div>
}

А вот и PartialView

@model PropertyManager_MVC.Areas.Account.ViewModels.RegistrationViewModel

<tr class="editorRow">
    <td>@Html.DropDownList("OccupierTypes", (IEnumerable<SelectListItem>)ViewBag.OccupierTypes, "-- Select --")
    </td>
    <td>
        @Html.DropDownList("ComplexID", (IEnumerable<SelectListItem>)ViewBag.Complexes, "-- Select --")
    </td>
    <td>
        @Html.TextBox("ApartmentNo")
    </td>
    <td>
        <a href="#" class="deleteRow">Remove</a>
    </td>
</tr>

Answer 1

Я бы порекомендовал вам следующую статью для реализации редактирования списка переменной длины.Он иллюстрирует использование пользовательского помощника Html.BeginCollectionItem, который заменяет индексы коллекции на идентификаторы GUID, позволяющие добавлять и удалять элементы без искажения имен полей ввода, и когда форма отправляется, механизм связывания модели по умолчанию сможет правильно связать ваше представлениемодель.