在 MVC3 razor 中显示甘特图答案

【问题标题】：Display Gantt Chart in MVC3 razor在 MVC3 razor 中显示甘特图
【发布时间】：2013-07-23 22:16:05
【问题描述】：

在我的项目中，我创建了一个带有某些属性的 html 标签，其中包括项目开始日期和项目结束日期。

我应该添加所有月份列，我想在其中显示从开始日期月份到结束日期月份突出显示的月份。

我不希望那里有任何功能。

只需突出显示从开始到结束的月份。

我认为它应该是一个甘特图。

但在网上，我能找到的只是甘特图调度程序，而不仅仅是显示。

有办法吗？

我们将不胜感激任何形式的帮助。

【问题讨论】：

您的目标是只显示月份名称还是显示月份以及所有日期，并突出显示从开始日到结束日的所有日期？
我只显示月份并在每一行中突出显示从开始月份到结束月份的月份。
这很简单，让我给你一个答案……一会儿……
好的，我加了。如果您需要，请告诉我。

标签： asp.net-mvc-3 razor gantt-chart

【解决方案1】：

这样可以解决问题吗？

http://taitems.github.io/jQuery.Gantt/

jquery 的甘特图，可以很好地与 MVC3 配合使用。

【讨论】：

谢谢..我会检查一下这是否有帮助！

【解决方案2】：

假设您的目标是“仅显示月份名称并突出显示从开始月份到结束月份的所有月份”，请尝试以下操作：

型号：

public class Month
{
    public string Name { get; set; }
    public bool isHighlighted { get; set; }
}

控制器：

public ActionResult MyCalendar()
{
    // code untested; not sure of the exact syntax since I don't have VS on this machine...

    DateTime currentDate = DateTime.Now.AddDays(1 - DateTime.Now.Day);  // Make sure we start on the first that month
    DateTime endDate = currentDate.AddMonths(11);

    DateTime highlightStartDate = currentDate.AddMonths(3);
    DateTime highlightEndDate = currentDate.AddMonths(9);

    List<Month> months = new List<Month>();

    while (currentDate <= endDate)
    {
        if (currentDate >= highlightStartDate && currentDate <= highlightEndDate)
        {
           months.Add(new Month({
                         Name = currentDate.ToString("MMMM"),
                         isHighlighted = true
                     });
        }
        else
        {
            months.Add(new Month({
                          Name = currentDate.ToString("MMMM"),
                          isHighlighted = false
                      });
        }
        currentDate = currentDate.AddMonths(1);
    }

    return View(months);
}

查看：

@model List<MyMvcProject.Models.Month>

<style>
    .month { display: inline-block; float: left; }
    .highlighted { background-color: green; }
</style>

@foreach(Month month in Model)
{
   <div class="month
        @if (month.isHighlighted)
        {
            @:highlighted
        }
   ">@month.Name</div>
}

【讨论】：

您好...非常感谢您！我认为这会奏效！但我想知道如何将这些添加到我的剃刀表中，以及在哪里指定每一行的开始和结束日期。很抱歉询问细节因为我是初学者！
@SaraCh 没有问题，我们曾经都是初学者。查看我为 View 添加的代码。