MVC 5 - 提交后部分视图中的信息为空

Question

我有一个很大的表单，而且它变得太大了，所以我想开始使用局部视图来保持它的整洁。

这是表单的一小部分，显示了主要联系人和备选联系人列表。用户可以添加更多联系人（按钮显示插入新联系人的弹出窗口）并且用户可以将联系人从活动更改为非活动（通过表格上的复选框）。现在这是可行的，但就像我说的那样，我希望能够为表格使用部分视图。

 <div class="box box-primary">
<div class="box-header">
    <h3 class="box-title">Contacts</h3>
</div>
<div class="box-body">
    <div class="form-group">
        <div class="col-xs-4">
            <label>Phone:</label>
            @Html.EditorFor(model => model.Persons.Phone, new { htmlAttributes = new { @class = "form-control", @id = "phone" } })
            @Html.ValidationMessageFor(model => model.Persons.Phone, "", new { @class = "text-danger" })
        </div>
        <div class="col-xs-8">
            <label>Email:</label>
            @Html.EditorFor(model => model.Persons.Email, new { htmlAttributes = new { @id = "email", @class = "form-control", @placeholder = "Introduza o email..." } })
            @Html.ValidationMessageFor(model => model.Persons.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            <label>Address:</label>
            @Html.TextAreaFor(model => model.Persons.Address, new { @class = "form-control", @placeholder = "Introduza a morada...", @rows = 3 })
            @Html.ValidationMessageFor(model => model.Persons.Address, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            @if (Model.Contacts != null && Model.Contacts.Count > 0)
                {
                <table id="example2" class="table table-bordered table-hover dataTable" aria-describedby="example2_info">
                    <thead>
                        <tr role="row">
                            <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">Contact</th>
                            <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Contact Type</th>
                            <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Active</th>
                    </thead>
                    <tbody role="alert" aria-live="polite" aria-relevant="all">
                        @{
                                string cssClass = string.Empty;
                                string activo = string.Empty;
                        }

                        @for (var i = 0; i < Model.Contacts.Count; i++)
                            {
                                cssClass = i % 2 == 0 ? "even" : "odd";

                            <tr class="´@cssClass">
                                <td class=" ">@Html.DisplayFor(model => Model.Contacts[i].Contact)</td>
                                <td class=" ">@Html.DisplayFor(model => Model.Contacts[i].contacttypes.Name)</td>
                                <td class=" ">@Html.CheckBoxFor(model => Model.Contacts[i].IsActive, new { @class = "flat-green" })</td>
                            </tr>
                            @Html.HiddenFor(model => Model.Contacts[i].ContactsId)
                            }
                    </tbody>
                </table>
                }
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            <input type="button" value="Add New Contact" class="buttonCreate btn btn-primary btn-sm" />
        </div>
    </div>
</div>

所以这里是使用局部视图的相同 HTML

 <div class="box box-primary">
<div class="box-header">
    <h3 class="box-title">Contacts</h3>
</div>
<div class="box-body">
    <div class="form-group">
        <div class="col-xs-4">
            <label>Phone:</label>
            @Html.EditorFor(model => model.Persons.Phone, new { htmlAttributes = new { @class = "form-control", @id = "phone" } })
            @Html.ValidationMessageFor(model => model.Persons.Phone, "", new { @class = "text-danger" })
        </div>
        <div class="col-xs-8">
            <label>Email:</label>
            @Html.EditorFor(model => model.Persons.Email, new { htmlAttributes = new { @id = "email", @class = "form-control", @placeholder = "Introduza o email..." } })
            @Html.ValidationMessageFor(model => model.Persons.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            <label>Address:</label>
            @Html.TextAreaFor(model => model.Persons.Address, new { @class = "form-control", @placeholder = "Introduza a morada...", @rows = 3 })
            @Html.ValidationMessageFor(model => model.Persons.Address, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            @Html.Partial("ContactListControl", Model.Contacts)
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            <input type="button" value="Add New Contact" class="buttonCreate btn btn-primary btn-sm" />
        </div>
    </div>
</div>

这是局部视图：

@model List<RecruitmentWeb.Models.contacts>
<table id="example2" class="table table-bordered table-hover dataTable" aria-describedby="example2_info">
<thead>
    <tr role="row">
        <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">Contato</th>
        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Tipo de Contato</th>
        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Activo</th>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
    @{
        string cssClass = string.Empty;
        string activo = string.Empty;
    }

    @for (var i = 0; i < Model.Count; i++)
    {
        cssClass = i % 2 == 0 ? "even" : "odd";

        <tr class="´@cssClass">
            <td class=" ">@Html.DisplayFor(model => Model[i].Contact)</td>
            <td class=" ">@Html.DisplayFor(model => Model[i].contacttypes.Name)</td>
            <td class=" ">@Html.CheckBoxFor(model => Model[i].IsActive, new { @class = "flat-green" })</td>
        </tr>
        @Html.HiddenFor(model => Model[i].ContactsId)
    }
</tbody>

问题

如果用户将联系人从活动更改为非活动，反之亦然，当我提交表单时，更改不会通过。实际上，该列表为空且不包含任何信息。如果我不使用局部视图，它会起作用。

那么我错过了什么？

Answer 1

您仅将模型的一个属性传递给部分，因此您生成的隐藏输入具有名称属性 name="[0].ContactsId"、name="[1].ContactsId" 等，而它们需要是 name="Contacts[0].ContactsId"、name="Contacts[1].ContactsId" 等（同上复选框）。

把局部视图模型改成和主视图一样（你还没指明是什么），然后把模型传为

@Html.Partial("ContactListControl", Model)

并调整 Html 助手以适应。不过，我建议您考虑为RecruitmentWeb.Models.Contacts 使用自定义EditorTemplate，而不是为此使用部分视图。