title: asp.net core nested forms
body: <p>I have 3 models - School, Classrooms &amp; Courses.</p>
  
  <p>A school can have many classrooms, and a classroom can have many courses taught in it.  </p>
  
  <pre><code>public class School
  {
      public int SchoolId { get; set; }
      public string SchoolName { get; set; }
      public List&lt;Classroom&gt; Classrooms { get; set; }
  }
  
  public class Classroom
  {
      public int ClassroomId { get; set; }
      public string Room { get; set; }
      public List&lt;Course&gt; Courses { get; set; }
      public virtual int SchoolId { get; set; }
  }
  
  public class Course
  {
      public int CourseId { get; set; }
      public string CourseName { get; set; }
      public virtual int ClassroomId { get; set; }
  }
  </code></pre>
  
  <p>I want to create CRUD actions for School, where I can add 0 to many classrooms and within each classroom create 0 to many courses all in one form.  Allowing the user to dynamically add classrooms and courses within those classrooms all within creating a school</p>
  
  <p>The way that I'm accomplishing this right now is hard coding (where School is the @Model):</p>
  
  <pre><code>&lt;div class="col-md-10"&gt;
      &lt;input asp-for="@Model.SchoolName" class="form-control" /&gt;
  &lt;/div&gt;
  &lt;div class="col-md-10"&gt;
      &lt;input asp-for="@Model.Classroom[0].Room" class="form-control" /&gt;
  &lt;/div&gt;
  &lt;div class="col-md-10"&gt;
      &lt;input asp-for="@Model.Classroom[0].Course[0].CourseName" class="form-control" /&gt;
  &lt;/div&gt;
  &lt;div class="col-md-10"&gt;
      &lt;input asp-for="@Model.Classroom[0].Course[1].CourseName" class="form-control" /&gt;
  &lt;/div&gt;
  &lt;div class="col-md-10"&gt;
      &lt;input asp-for="@Model.Classroom[0].Course[3].CourseName" class="form-control" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the user to be able to add more classrooms and more courses or have the ability to remove them dynamically on the form.</p>