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而不是局部視圖。