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);

}

Viewmodel：

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

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

2 个答案: