ASP.NET MVC 5 如何在同一视图中编辑父级和列表<>类型子级

Question

I need to edit a class and its child of List type in the same view but I don't know how to make the child editing in the same view.

Let's say I have these classes:

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

The view:

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

I need to make an insert code in the "WHAT TODO" area for the Childs child. I tried using PartialView with something like:

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

And then in the PartialView create another form to use a Insert(ChildItem child) controller but I also couldn't achieve this. I didn't know how to make the second form add to the model because it was a List.

It's probably obvious right now, but I'm new to ASP.NET MVC and used to old WebForms, so still getting to understand somethings.

My goal is to accomplish a working view like this:

Answer 1

Ok, so with further study, I found out I dont need nested forms ou partial views, but multiple submit buttons with multiple form actions. I got what I needed and apparently it was really basic, so I thought I could post my own solution to my own question and maybe help anybody else with same problem. So, starting with the view I replaced this:

    @*  WHAT TODO? *@

With this:

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

The formaction="AddChild" fires the AddChild() action in the controller, submiting the Parent model and the CValue1 and CValue2 inputs. But the Childs property of the model was always null ,so, after executing the AddChild action, I was getting only the last added ChildItem . To solve this, I had to make my controller recognize the List<ChildItem> in my Parent sending it separatelly in the post. So, I had to change the list view from this:

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

To this:

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

The hidden fields store all the info for the controller binding. Because of the index x for each line, when submiting the form, the controller can bind all child elements to the Child property correctly.

The controller for adding the Child:

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);
}

I also implemented the DeleteChild action:

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

It still missing all the database code, but thats the next step!