ASP.NET MVC 5 如何在同一視圖中編輯父級和列表<>類型子級

Question

我需要在同一視圖中編輯 class 及其 List 類型的子項，但我不知道如何在同一視圖中進行子項編輯。

假設我有這些課程：

public class Parent
{
    public int PValue1 { get; set; }
    public int PValue2 { get; set; }
    public int PValue3 { get; set; }

    public virtual List<ChildItem> Childs { get; set; }
}

public class ChildItem
{
    public int CValue1 { get; set; }
    public int CValue2 { get; set; }
}

風景：

@model MyNamespace.Parent

@using (Html.BeginForm("SaveParent", "Index"))
{
    <label>Parent Value 1</label>
    @Html.TextBoxFor(m=> m.PValue1, "", new { @class = "form-control" })

    <label>Parent Value 2</label>
    @Html.TextBoxFor(m=> m.PValue2, "", new { @class = "form-control" })

    <label>Parent Value 3</label>
    @Html.TextBoxFor(m=> m.PValue3, "", new { @class = "form-control" })

    @*  WHAT TODO? *@

    <table>
        <thead>
            <tr>
            <th>Child Value 1</th>
            <th>Child Value 2</th>
            </tr>
        </thead>
        <tbody>
        @foreach(ChildItem item in Model.Childs){
            <tr>
            <td>@item.CValue1</td>
            <td>@item.CValue2</td>
            </tr>
        }
        </tbody>
    </table>

    <button type="submit" class="btn btn-primary">Save</button>
}

我需要在Childs孩子的“WHAT TODO”區域中插入代碼。 我嘗試將 PartialView 與以下內容一起使用：

@Html.Partial("_MyPartialView", Model.Childs)

然后在 PartialView 創建另一個表單以使用Insert(ChildItem child) controller 但我也無法實現這一點。 我不知道如何將第二種形式添加到 model 因為它是一個列表。

現在可能很明顯，但我是 ASP.NET MVC 的新手，並且習慣了舊的 WebForms，所以仍然了解一些東西。

我的目標是完成這樣的工作視圖：

Answer 1

好的，所以通過進一步研究，我發現我不需要嵌套的 forms ou 部分視圖，而是具有多個表單操作的多個提交按鈕。 我得到了我需要的東西，顯然它真的很基礎，所以我想我可以發布我自己的解決方案來解決我自己的問題，也許可以幫助其他有同樣問題的人。 所以，從我替換的視圖開始：

    @*  WHAT TODO? *@

有了這個：

    <label>Child Value 1</label>
    <input type="number" name="CValue1" />
    <label>Child Value 2</label>
    <input type="number" name="CValue1" />
    <!--This is the real trick! -->
    <input type="submit" formaction="AddChild" formmethod="post" />  

formaction="AddChild"觸發 controller 中的 AddChild() 操作，提交父 model 以及CValue1和CValue2輸入。 但是 model 的Childs屬性始終是null ，因此，在執行AddChild操作后，我只得到最后添加的ChildItem 。 為了解決這個問題，我必須讓我的 controller 識別我Parent中的List<ChildItem>在帖子中單獨發送。 所以，我不得不從這個改變列表視圖：

@foreach(ChildItem item in Model.Childs){
   <tr>
     <td>@item.CValue1</td>
     <td>@item.CValue2</td>
   </tr>
}

對此：

 @for(int x = 0; x < Model.Childs.Count; x++){ 
  <tr>
     <td>@Html.DisplayFor(m => m.Childs[x].CValue1)</td>
     <td>@Html.DisplayFor(m => m.Childs[x].CValue2)</td>
     <td> <button type="submit" formaction="DeleteChild" name="ChildID" value="@Model.Childs[x].ID" formmethod="post">X</button>
      @Html.HiddenFor(m => m.Childs[x].ID)
      @Html.HiddenFor(m => m.Childs[x].CValue1)
      @Html.HiddenFor(m => m.Childs[x].CValue2)
     </td>
  </tr>               
  }

隱藏字段存儲 controller 綁定的所有信息。 由於每行的索引x ，在提交表單時，controller 可以正確地將所有子元素綁定到 Child 屬性。

用於添加子的 controller：

public ActionResult AddChild(Parent parent, int CValue1, int CValue2){
  if (parent.Childs == null)
    parent.Childs = new List<ChildItem>();
  parent.Childs.Add(new ChildItem(){
    ID = parent.Childs.Count,  //This will be removed/improved later
    CValue1 = CValue1,
    CValue2 = CValue2
  });
  return View("Index", parent);
}

我還實現了DeleteChild操作：

public ActionResult DeleteChild(Parent parent, int ChildID){
   if (parent != null)
      parent.Childs.Remove(parent.Childs.FirstOrDefault(c => c.ID == ChildID));
      return View("Index", parent);
}

它仍然缺少所有數據庫代碼，但這是下一步！