[英]Building HTML Calendar Using ASP.NET MVC Razor
I am trying to create a similar calendar as shown in the image below: 我正在尝试创建如下图所示的类似日历:
I have the following code: 我有以下代码:
<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>
Which of course does not render the correct result. 当然哪个不能提供正确的结果。 What can I do to produce the result shown in the image?
如何产生图像中显示的结果? I don't care about the in-active dates.
我不在乎有效日期。
Your HTML should look more like this: 您的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>
That just gives you an un-styled table header. 这只是给您一个未设置样式的表头。 If all that time range data is just static (doesn't depend on what the
StartDate
is) as it appears in the image - you said the inactive doesn't matter - then just write it all out 如果所有时间范围内的数据都是静态的(不取决于
StartDate
是什么),则它在图像中显示- 您说的无效状态无关紧要 -则将其全部写出
This should get you closer (you have to fiddle with the html and times yourself); 这应该使您更接近(您必须弄弄html并自己调整时间);
The View: 风景:
<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>
The Action in the Controller: 控制器中的动作:
public ActionResult Index()
{
CalendarViewModel model = new CalendarViewModel
{
NumberOfDays = 7,
StartDate = DateTime.Now
};
return View(model);
}
The Viewmodel: 视图模型:
public class CalendarViewModel
{
public int NumberOfDays { get; set; }
public DateTime StartDate { get; set; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.