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

您只将模型的属性传递给partial，因此您生成的隐藏输入具有名称属性name="[0].ContactsId"，name="[1].ContactsId"等，而它们需要为name="Contacts[0].ContactsId"， name="Contacts[1].ContactsId"等（同样也是复选框）。

将局部视图模型更改为与主视图相同（您没有表明它是什么），然后将模型传递为

@Html.Partial("ContactListControl", Model)

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

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

1 个答案: