ASP.NET MVC如何从嵌套对象的viewmodel集合在视图中动态创建表结构

Question

我正在尝试显示一堆用户选择的学期的所有课程，并在循环时像EXPECTED屏幕截图中那样动态地保持格式（因此，该学期对于所属的各个课程仅显示一次，课程名称（ CourseA）对于属于该课程的各个部分仅显示一次：

已终止（仅适用于当前选定的1个学期，对于更多选定的学期，应保持相同的显示模式）

实际结果

我有一个List，它是存储数据的Model.SemesterSchedule。这是我尝试过的方法，但无法正常工作，使用多个foreach循环时布局已损坏，并且我不确定三重foreach首先是否是个好主意，请提出更好的替代方法：

我具有以下结构：

class SemesterSchedule
{
   public int SemesterID {get;set;}
   public int SemesterName {get;set;}
   public int TotalClassSections {get;set;}
   public List<Course> Courses {get;set;}
}

class Course
{
   public string CourseTitle {get;set}
   public int ClassID {get;set;}
   public List<ClassSection> Sections {get;set}
}

class ClassSection
{  
   public string SectionType {get;set;}   // Lecture or Lab etc
   public int ClassID {get;set;}
   public string InstructorFirstName {get;set;}
   --------------------------------------
   public bool Monday {get;set;}
   public TimeSpan MondayStart {get;set;}
   public TimeSpan MondayEnd {get;set;}
   ------------------------------------------
}


@if (Model.SemestersSchedule != null && Model.SemestersSchedule.Count() > 0)
{
  <table id="CourseScheduleTable">
     <thead>
          <tr>
             <th>Term</th>
             <th>Course</th>
             <th>Section</th>
             <th>Class#</th>
             <th>Instructor Name</th>
             <th>MON</th>
             <th>TUE</th>
             <th>WED</th>
             <th>THU</th>
             <th>FRI</th>
             <th>SAT</th>
          </tr>
     </thead>
      <tbody>                                                 
      @{
        foreach (SemesterSchedule sc in Model.SemestersSchedule)
        {
             <tr>
               <td rowspan="@sc.TotalSections">@sc.SemesterName</td>
             </tr>

          foreach (Course c in sc.Courses)
          {
           <tr>
             <td rowspan="@c.Sections.Count()">@c.Course.CourseRunTitle</td>
           </tr>

               foreach (ClassSection s in c.Sections)
               {
                 <tr>                                                   
                    <td>@s.SectionType</td>
                    <td>@s.Classroom</td>
                    <td>@c.Course.FirstName @c.Course.MiddleName @c.Course.LastName</td>                                                                 

                    <td>@(s.Monday ? new DateTime(s.MondayStart.Ticks).ToString("HH:mm tt") + "-" + new DateTime(s.MondayEnd.Ticks).ToString("HH:mm tt") : "---")</td>

                    <td>@(s.Tuesday ? new DateTime(s.TuesdayStart.Ticks).ToString("HH:mm tt") + "-" + new DateTime(s.TuesdayEnd.Ticks).ToString("HH:mm tt") : "---")</td>

                    <td>@(s.Wednesday ? new DateTime(s.WednesdayStart.Ticks).ToString("HH:mm tt") + "-" + new DateTime(s.WednesdayEnd.Ticks).ToString("HH:mm tt") : "---")</td>

                    <td>@(s.Thursday ? new DateTime(s.ThursdayStart.Ticks).ToString("HH:mm tt") + "-" + new DateTime(s.ThursdayEnd.Ticks).ToString("HH:mm tt") : "---")</td>

                    <td>@(s.Friday ? new DateTime(s.FridayStart.Ticks).ToString("HH:mm tt") + "-" + new DateTime(s.FridayEnd.Ticks).ToString("HH:mm tt") : "---")</td>

                    <td>@(s.Saturday ? new DateTime(s.SaturdayStart.Ticks).ToString("HH:mm tt") + "-" + new DateTime(s.SaturdayEnd.Ticks).ToString("HH:mm tt") : "---")</td>
               </tr>
             }
          }
       }
   }
</tbody>

Answer 1

当您将<td>与rowspan="n"属性一起使用时，在接下来的n行中不得使用其他<td>。

正确的HTML应该是：

<table class="blueTable">
    <thead>
        <tr>
            <th>Term</th>
            <th>Course</th>
            <th>Section</th>
            <th>Class</th>
            <th>Instructor</th>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THU</th>
            <th>FRI</th>
            <th>SAT</th>
        </tr>
    </thead>
    <tbody>
        <tr> <!-- 11 columns -->
            <td rowspan="4">2019 Term Spring</td>
            <td rowspan="2">CourseA</td>
            <td>Lecture</td>
            <td>219</td>
            <td>John Doe</td>
            <td>---</td>
            <td>09:00</td>
            <td>---</td>
            <td>09:00</td>
            <td>---</td>
            <td>---</td>
        </tr>
        <tr> <!-- 9 columns -->
            <td>Lab</td>
            <td>2019</td>
            <td>John Doe</td>
            <td>---</td>
            <td>11:00</td>
            <td>---</td>
            <td>---</td>
            <td>---</td>
            <td>---</td>
        </tr>
        <tr> <!-- 10 columns -->
            <td>CourseB</td>
            <td>Lecture</td>
            <td>212</td>
            <td>Jennifer Doe</td>
            <td>09:00</td>
            <td>---</td>
            <td>11:00</td>
            <td>---</td>
            <td>---</td>
            <td>---</td>
        </tr>
        <tr> <!-- 10 columns -->
            <td>CourseC</td>
            <td>Lecture</td>
            <td>102</td>
            <td>Jim B</td>
            <td>---</td>
            <td>---</td>
            <td>---</td>
            <td>---</td>
            <td>---</td>
            <td>13:00</td>
        </tr>
    </tbody>
</table>

如在此Fiddle中所见。