Gantt Chart for ASP.NET MVC 4 Razor (Tutorial)

This tutorial shows how to use DayPilot Scheduler in Gantt mode to display a Gantt Chart. Sample ASP.NET MVC project with C# and VB.NET source code is included.
Jul 2, 2013
gantt chart asp.net mvc

This tutorial includes a sample ASP.NET MVC application that shows an AJAX Gantt Chart.

Tutorial

Sample ASP.NET MVC Project

  • Gantt Chart with configurable row header columns (displaying duration)
  • C# source code
  • VB.NET source code
  • Sample SQL Server database
  • Visual Studio 2010 project
  • Razor view
  • Highlights weekends
  • Drag and drop support
  • Modal dialog for task editing

The tutorial source code is available for download.

Example (Gantt Chart MVC View)

C# (.cshtml)

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig
{
    BackendUrl = Url.Content("~/Gantt/Backend"),
    EventResizeHandling = EventResizeHandlingType.CallBack,
    EventMoveHandling = EventMoveHandlingType.CallBack,
    EventClickHandling = EventClickHandlingType.JavaScript,
    EventClickJavaScript = "edit(e.id())",
    TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "create(start, end)",
    CellGroupBy = GroupBy.Month,
    CellDuration = 1440,
    Days = 365,
    StartDate = new DateTime(DateTime.Today.Year, 1, 1),
    CssOnly = true,
    CssClassPrefix = "scheduler_8",
    EventHeight = 25,
    CellWidth = 25,
    MoveBy = DragArea.Full,
    HeaderColumns = new RowHeaderColumnCollection {
        new RowHeaderColumn("Task", 100),
        new RowHeaderColumn("Duration", 100)
    }    
})

VB.NET (.vbhtml)

@Html.DayPilotScheduler("dps", New DayPilotSchedulerConfig With
{
    .BackendUrl = Url.Content("~/Gantt/Backend"),
    .EventResizeHandling = EventResizeHandlingType.CallBack,
    .EventMoveHandling = EventMoveHandlingType.CallBack,
    .EventClickHandling = EventClickHandlingType.JavaScript,
    .EventClickJavaScript = "edit(e.id())",
    .TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    .TimeRangeSelectedJavaScript = "create(start, end)",
    .CellGroupBy = GroupBy.Month,
    .CellDuration = 1440,
    .Days = 365,
    .StartDate = New DateTime(DateTime.Today.Year, 1, 1),
    .CssOnly = True,
    .CssClassPrefix = "scheduler_8",
    .EventHeight = 25,
    .CellWidth = 25,
    .MoveBy = DragArea.Full,
    .HeaderColumns = New RowHeaderColumnCollection From {
        New RowHeaderColumn("Task", 100),
        New RowHeaderColumn("Duration", 100)
    }
})

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java