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

Question

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

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

使用局部视图

 <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 而不是为此使用局部视图。

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

MVC 5 - Information in partial view is null after submit

asp.net-mvc

razor

asp.net-mvc-5