使用ASP.NET MVC Razor构建HTML日历

Question

我正在尝试创建如下图所示的类似日历：

日历样本图片

我有以下代码：

<table>

@for(var item = Model.StartDate; item <=Model.StartDate.AddDays(7); item = item.AddDays(1))
{   
    <th>@item.ToString("ddd")</th>  

    <tr>
    <td>@item.ToString("MMM") @item.ToString("dd")</td>
    </tr>
}



</table>

当然哪个不能提供正确的结果。 如何产生图像中显示的结果？ 我不在乎有效日期。

Answer 1

您的HTML应该看起来像这样：

<table>
    <thead>
        <tr>
          @for(var item = Model.StartDate; item <=Model.StartDate.AddDays(7); item = item.AddDays(1))
          {   
                <th>
                    <b>@item.ToString("ddd")</b>  
                    <div>@item.ToString("MMM") @item.ToString("dd")</div>
                </th>
           }
        </tr>
    </thead>
    <tbody>
       <!-- Load rows -->
    </tbody>
</table>

这只是给您一个未设置样式的表头。 如果所有时间范围内的数据都是静态的（不取决于StartDate是什么），则它在图像中显示- 您说的无效状态无关紧要 -则将其全部写出

Answer 2

这应该使您更接近（您必须弄弄html并自己调整时间）；

风景：

<table>
    <thead>
        <tr>
            @for (int i = 0; i < Model.NumberOfDays; i++)
            {
                <th>
                    @Model.StartDate.AddDays(i).ToString("ddd")
                </th>
            }
        </tr>
    </thead>
    <tbody>
        <tr>
            @for (int i = 0; i < Model.NumberOfDays; i++)
            {            
                <td>@Model.StartDate.AddDays(i).ToString("MMM") @Model.StartDate.AddDays(i).ToString("dd")</td>
            }
        </tr>
    </tbody>
</table>

控制器中的动作：

public ActionResult Index()    
{    
    CalendarViewModel model = new CalendarViewModel
        {
            NumberOfDays = 7,
            StartDate = DateTime.Now
        };
        return View(model);

}

视图模型：

public class CalendarViewModel
{
    public int NumberOfDays { get; set; }
    public DateTime StartDate { get; set; }
}