title: How to dynamically add an item to a list within a list in a ViewModel using Razor and .NET Core 2.2?
body: <p>I've been following this tutorial (i did it in asp.net core 2.2): 
  <a href="http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/" rel="nofollow noreferrer">http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/</a> on how to edit a variable lenght list in asp.net. In this tutorial, we're just handling a list of gifts. I'm trying to apply this method to a more complex model.</p>
  
  <p>I have an object called <code>Workout.cs</code> who contains a List of <code>Section.cs</code>. The <code>Section.cs</code> object contains a List of <code>Movement.cs</code></p>
  
  <pre><code>public class Workout
  {
      public string Name { get; set; }
      public IEnumerable&lt;Section&gt; Sections { get; set; } = new List&lt;Section&gt;();
  }
  
  public class Section
  {
      public int NbRounds { get; set; }
      public string Name { get; set; }
      public IEnumerable&lt;Movement&gt; Movements { get; set; } = new List&lt;Movement&gt;();
  }
  public class Movement
  {
      public string Name { get; set; }
  }
  </code></pre>
  
  <p><strong>WorkoutController</strong></p>
  
  <pre><code>        public IActionResult BlankSection()
          {
              return PartialView("_SectionEditor", new Section());
          }
  
          public IActionResult BlankMovement()
          {
              return PartialView("_MovementEditor", new Movement());
          }
  </code></pre>
  
  <p><strong>Index.cshtml</strong></p>
  
  <pre><code>@model Workout
  
  &lt;h2&gt;Workout&lt;/h2&gt;
  
  &lt;form asp-action="Index" method="post" asp-controller="Workout"&gt;
      &lt;div id="editorRows"&gt;
          @foreach (var item in Model.Sections)
          {
              &lt;partial name="_SectionEditor" model="item" /&gt;
          }
      &lt;/div&gt;
  
      &lt;a id="addItem" asp-action="BlankSection" asp-controller="Workout"&gt;Add Section...&lt;/a&gt; &lt;br /&gt;
      &lt;input type="submit" value="Finished" /&gt;
  &lt;/form&gt;
  
  @section scripts {
      &lt;script&gt;
          $("#addItem").click(function () {
              $.ajax({
                  url: this.href,
                  cache: false,
                  success: function (html) { $("#editorRows").append(html); }
              });
              return false;
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p><strong>_SectionEditor.cshtml</strong></p>
  
  <pre><code>@model Section
  @{
      Layout = "~/Views/Shared/_LayoutEditor.cshtml";
  }
  
  &lt;div class="editorRow"&gt;
      @using (Html.BeginCollectionItem("sections"))
      {
          &lt;span&gt;Name: &lt;/span&gt; @Html.EditorFor(m =&gt; m.Name);
  
          &lt;span&gt;Rounds: &lt;/span&gt;@Html.EditorFor(m =&gt; m.NbRounds, new { size = 4 });
      }
  
      &lt;a href="#" class="deleteRow"&gt;delete&lt;/a&gt;
      &lt;div id="editorMovement"&gt;
          @foreach (var item in Model.Movements)
          {
              &lt;partial name="_MovementEditor" model="item" /&gt;
          }
      &lt;/div&gt;
      &lt;a id="addMovement" asp-action="BlankMovement" asp-controller="Workout"&gt;Add Movement...&lt;/a&gt; &lt;br /&gt;
  &lt;/div&gt;
  
  
  @section Scripts {
  
      &lt;script&gt;
          $(document).ready(function () {
              $("a.deleteRow").on("click", function () {
                  $(this).parents("div.editorRow:first").remove();
                  return false;
              });
          });
  
          $("#addMovement").click(function () {
              $.ajax({
                  url: this.href,
                  cache: false,
                  success: function (html) { $("#editorMovement").append(html); }
              });
              return false;
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p><strong>MovementEditor.cshtml</strong></p>
  
  <pre><code>@model Movement
  
  @{
      Layout = "~/Views/Shared/_LayoutEditor.cshtml";
  }
  
  &lt;div class="editorMovement"&gt;
      @using (Html.BeginCollectionItem("movements"))
      {
          &lt;span&gt;Name: &lt;/span&gt; @Html.TextBoxFor(m =&gt; m.Name);
      }
      &lt;a href="#" class="deleteMovement"&gt;delete&lt;/a&gt;
  &lt;/div&gt;
  
  @section Scripts {
      &lt;script&gt;
          $(document).ready(function () {
              $("a.deleteMovement").on("click", function () {
                  $(this).parents("div.editorMovement:first").remove();
                  return false;
              });
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>With the tutorial, it's working fine when I'm adding sections to my workout, but when I'm trying the same to add movements to my sections, it's not working anymore. I would like to be able to add as many sections as I want to my workout, and for each section, as many movements as I want, and send it to the controller. How could I do that ?</p>
  
  <p>thanks a lot</p>