如何使用編組列表中的已編輯項目發佈模型？

Question

我有以下問題。我需要在分組列表中編輯項目值，並將模型發佈到服務器。

我的模型和視圖模型：

public class MyObject 
{ 
    public string ParentName { get; set; } 
    public string SubParentName { get; set; } 
    public string ItemName { get; set; } 
    public decimal Value { get; set; } 
} 

public class MyViewModel 
{ 
    public IList<MyObject> list; 
} 

而且簡化（不分組的項目中的HTML表格組）實現的觀點：

@model MyViewModel 

@(using (Html.BeginForm("Action", "Controller", FormMethod.Post))) 
{ 
    <table> 
     <tbody> 
      @foreach(var parentItems in Model.list.GroupBy(x => x.ParentName)) 
      { 
       foreach(var subParents in parentItem.GroupBy(x => x.SubItemName)) 
       { 
        foreach (var item in subParents) 
        { 
         <tr> 
          <td><parentItems.FirstOrDefault().ParentName</td> 
          <td><subParents.FirstOrDefault().SubParentName</td> 
          <td>item.ItemName</td> 
          <td><input class="itemValue">**Editable value item.Value**</td> 
         </tr> 
        } 
       } 
      } 
     </tbody> 
    </table> 

    <button type="submit">Save</button> 
} 

怎麼辦呢？

解決

@model MyViewModel 

@(using (Html.BeginForm("Action", "Controller", FormMethod.Post))) 
{ 
    <table> 
     <tbody> 
      @foreach(var parentItems in Model.list.GroupBy(x => x.ParentName)) 
      { 
       @{ var counter = 0;} 
       foreach(var subParents in parentItem.GroupBy(x => x.SubItemName).Select(x => x.ToList())) 
       { 
        for(int i = 0; i < subParents.Count(); i++, counter++) 
        { 
         <tr> 
          <td> 
           @Html.DisplayFor(x => x.list[counter].ItemName) 
           @Html.HiddenFor(x => x.list[counter].ItemName) 

          </td> 
          <td> 
           @Html.TextBoxFor(x => x.list[counter].Value, new { myAttr = "myAttrValue"}); 
          </td>       
         </tr> 

         @Html.HiddenFor(x => x.Reports[counter].ParentName) 
         @Html.HiddenFor(x => x.Reports[counter].SubParentName) 
        } 
       } 
      } 
     </tbody> 
    </table> 

    <button type="submit">Save</button> 
} 

感謝大家的幫助:)

Answer 1

有趣的問題。使用foreach循環不會工作，因爲控件將沒有正確的索引name屬性用於回發，並且單個for循環不會允許您的分組，除非包括條件檢查（例如，測試ParentName和SubParentName已從先前呈現的項目更改並且然後渲染一個新的組標題或啓動一個新表或其他）。

我建議你創建一個視圖模型，以更好地代表層次結構和填充視圖模型控制器

public class MyObject 
{ 
    public string ParentName { get; set; } 
    public string SubParentName { get; set; } 
    public string ItemName { get; set; } 
    public decimal Value { get; set; } 
} 

public class SubParentVM 
{ 
    public string Name { get; set; } // assuming you want some kind of group heading 
    public List<MyObject> Items { get; set; } 
} 

public class ParentVM 
{ 
    public string Name { get; set; } 
    public List<SubParentVM> Items { get; set; } 
} 

和視圖

@model List<ParentVM> 

for (int i = 0; i < Model.Count; i++) 
{ 
    .... 
    for (int j = 0; j < Model[i].Items.Count; i++) 
    { 
    .... 
    for (int k = 0; k < Model[i].Items[j].Count; i++) 
    { 
     <tr> 
     <td>Model[i].Items[j].Items[k].ParentName</td> 
     <td>Model[i].Items[j].Items[k].SubParentName</td> 
     <td>Model[i].Items[j].Items[k].ItemName</td> 
     <td> 
      <@Html.TextBoxFor(m => m.[i].Items[j].Items[k].Value) 
      // Assuming you want other properties of MyObject to post back 
      <@Html.HiddenFor(m => m.[i].Items[j].Items[k].ItemName) 
      <@Html.HiddenFor(m => m.[i].Items[j].Items[k].SubParentName) 
      <@Html.HiddenFor(m => m.[i].Items[j].Items[k].ParentName) 
     </td> 
     </tr> 
    } 
    } 
} 

控制器上

[HttpPost] 
public ActionResult Save(List<ParentVM> items) 
{ 
    .... 

Answer 2

控制器代碼：

[HttpPost] 
public ActionResult Action([FromBody] values) 
{ 
} 

您的視圖代碼：

@(using (Html.BeginForm("Action", "Controller", FormMethod.Post))) 
{ 
    <table> 
     <tbody> 
      @for(int i =0; i< Model.Count; i++) 
      { 
       <tr> 
        <td> 
          @Html.DisplayFor(x=> x.ParentName) 
          @Html.HiddenFor(x=> x.ParentName) 
        </td> 
        <!-- same to all not editable fields --> 
        <td>@Html.TextBoxFor(x=> x.Value)</td> 
       </tr> 
      } 
     </tbody> 
    </table> 

    <button type="submit">Save</button> 
}