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

本文关键字：日历 ASP NET HTML 构建 MVC Razor 使用 | 更新日期: 2023-09-27 18:36:53

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

日历示例图像

我有以下代码： 

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

这当然不会呈现正确的结果。我该怎么做才能产生图像中显示的结果？我不在乎不活跃的日期。

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

你的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是什么），因为它出现在图像中 - 你说非活动无关紧要 - 那么只需将其全部写出来

这应该会让你更接近（你必须自己摆弄 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; }
}
相关文章：