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> 

因此，这里是使用局部视图

<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> 

这里是局部视图相同的HTML：

@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属性name="[0].ContactsId"，name="[1].ContactsId"等，而他们必须name="Contacts[0].ContactsId"，name="Contacts[1].ContactsId"等（同上的复选框）。

更改局部视图模型一样的主视图（你有没有表示它是什么），然后通过模型

@Html.Partial("ContactListControl", Model) 

，并调整HTML辅助，以适应。不过，我建议你考虑使用EditorTemplate的RecruitmentWeb.Models.Contacts而不是局部视图。