用剃须刀页面填充html表中的特定单元格

时间:2019-11-30 14:21:07

标签: c# html asp.net model-view-controller razor

尝试用MVC模型中的数据填充html表后,我们遇到了问题。下面的代码生成一个表,该表应该表示一个时间表。第一行显示星期几,第一列显示上课时间的数字表示。

<table class="table2">
    <tr>
        <th></th>
        @{ string[] days = { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" };}

        @for (int i = 0; i < days.Length; i++)
        {
            <th>@(days[i])</th>
        }
    </tr>
    @{
        TimeSpan timeSpan = new TimeSpan(8, 30, 0); //08:30:00
        TimeSpan AddTime = new TimeSpan(0, 50, 0);  //00:50:00
        TimeSpan timeSpan2 = new TimeSpan();
    }

    @{ for (int i = 1; i < 16; i++)
        {


                <tr>
                    <td>
                        <h3>@(i)</h3>
                        <a>
                            @{timeSpan.ToString();}

                            @(string.Format("{0:00}:{1:00}", timeSpan.Hours, timeSpan.Minutes))
                        </a>
                        @{timeSpan2 = timeSpan.Add(AddTime);}
                        <div>
                            <a>
                                @(string.Format("{0:00}:{1:00}", timeSpan2.Hours, timeSpan2.Minutes))
                                @{timeSpan = timeSpan2;}
                            </a>
                        </div>
                    </td>
                    @foreach (var item in Model)
                    {
                        if (item.Hours.Contains(i))
                        {
                            for (int x = 0; x < days.Length; x++)
                            {
                                if (item.Day != days[x])
                                {
                                    <td>
                                    </td>
                                }
                                else
                                {
                                    <td>
                                        @(item.Class)
                                        @(item.Classroom)
                                    </td>
                                }
                            }
                        }
                    }
                </tr>
            }
    }
</table>

我们的模型如下所示;

public class ScheduleModel
{
    [Display(Name = "Lesson Code")]
    public string LessonCode { get; set; }
    [Display(Name = "Day")]
    public string Day { get; set; }
    [Display(Name = "Classroom")]
    public string Classroom { get; set; }
    [Display(Name = "Hours")]
    public int[] Hours { get; set; }
    [Display(Name = "Class")]
    public string Class { get; set; }
}

我将尽力解释我们要做什么。我们的视图获取了一个模型列表,其中填充了上面指定的数据。我们想在上面尝试创建的html表中显示此数据。 “ Day”变量对应于表顶部行中的天,而Hours int []对应于表第一列中的小时。这些值应相互比较以在表中找到正确的位置。使用上面显示的代码,我们几乎可以使它工作,但是我们遇到了重复时间和空单元格的问题。

让我们说有2个模型实例,一个看起来像这样;

Day : Monday
Hours : [1,2,3]

第二个看起来像这样:

Day : Tuesday
Hours: [1,2,3]

此问题是,foreach循环完全通过第一个模型,并用空单元格填充第一行中的所有单元格,然后当foreach循环通过第二个模型时,它无法填充已创建的空单元格,所以它只是将它们粘在最后屏幕截图使问题形象化; Image of the problem.

所以一切归结为这一点;我们如何生成行,但是仍然可以将新数据添加到空字段中。

1 个答案:

答案 0 :(得分:1)

这很好用!

 @for (int x = 0; x < 7; x++)
                            {
                                <td>
                                    @foreach(var item in Model)
                                    {
                                        if (item.Hours.Contains(i))
                                        {
                                            if(item.Day == days[x]){
                                                @(item.Class)
                                                @(item.Classroom)
                                            }
                                            else
                                            {
                                                @("")
                                            }
                                        }
                                    }
                                </td>
                            }
相关问题