Question

我有一个viewmodel：

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

在注册期间，用户必须选择一个或多个复合体。这些值将存储在OccupierApartments列表中。可用的Complexes将被加载到下拉列表中，然后在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");
    }

当用户在注册视图中单击“添加公寓”时，使用Ajax.ActionLink将PartialView添加到表中（请参见视图底部附近）：所有内容都正确呈现，并且下拉列表中正在填充数据，但我不知道如何将下拉列表选定的值绑定到viewmodel。

@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

我建议您使用following article来实现可变长度列表的编辑。它说明了自定义Html.BeginCollectionItem帮助器的用法，它使用GUID替换收集索引，允许添加和删除元素而不会扭曲输入字段的名称，并且在提交表单时，默认模型绑定器将能够正确绑定你的观点模型。

如何绑定动态加载Ajax的下拉列表

1 个答案: