SQL Server + ASP .NET Core 6 MVC + DlhSoft Gantt charts = success
An ASP .NET MVC tutorial: learn how to show timeline data from your SQL Server database as an interactive Gantt chart in the browser (over the Web)
First things first. Let’s say that for this article we’ll use the GanttChartView MVC extension from DlhSoft’s Gantt Chart Web Library for ASP .NET, which in turns uses the JavaScript-based component from Gantt Chart Hyper Library (available separately too, if needed), and that the source code referenced in this tutorial is actually a subset of that of a more complex sample app, available here:
These being said, let’s pretend we start from scratch.
To start, ensure you have Visual Studio and SQL Server installed and available. This tutorial assumes you use Visual Studio 2022 and SQL Server 2014 or later (Visual Studio Community Edition and, respectively, a SQL Server Express installation being enough for our training purposes).
To create a new ASP .NET Core MVC application project in Visual Studio, search among the available templates; do ensure you select the .NET Core Web App item that also indicates Model-View-Controller and in the following step, you can go with .NET 6.0 which comes with long term support:
Here we’ll go with a pre-existing sample SQL Server database file, available for download from our GitHub repo, as well. Get both the MDF and log files there, and add them to a new App_Data folder that you can create in your project (you can also validate your data connection by expanding the database and tables Server Explorer):
And as we can use Entity Framework to access the SQL Server database and then DlhSoft Gantt chart user interface components too, let’s add some NuGet packages to help us out (using the Manage NuGet Packages for Solution dialog, accessible from Tools / NuGet Package Manager menu). Specifically, we’ll need all these references:
Going with a “database first” approach, we’ll now need to scaffold some entity classes our of the database tables.
To do that, open Package Manager Console (again from Tools / NuGet Package Manager menu) and run this command — assuming that you have SQL Server set up to accept “local databases”, of course — but make sure you run it in the project folder (not in the outer solution folder):
For the sample database, the Scaffold-DbContext command should generate a DatabaseEntities context class and Task and Predecessor object definitions, according to the two tables in our database:
Great; the model is now available so let’s wrap this up. Now we need an instance of GanttChartView component — e.g. in an Index.cshtml file under a specific folder within the project’s Views. Setup all the needed component settings there, including — see below — an ItemChangeAction to execute automatically whenever client side data changes and an InitializingClientCode script to run automatically when the Gantt chart is displayed:
And of course, a controller is then needed to define both an action that returns the initial GanttChartItem objects to be displayed — read from the database through the entity context model — and one that handles any updates.
Finally, we just need to link the newly available view in our Web app’s Home page, or — easier for now — to simply redirect to it from HomeController and to ensure that the JavaScript libraries will be correctly loaded into the rendered HTML, such as in the <head> tag within the common Views/Shared/_Layout.cshtml.
Note: optionally, you can download, add to js subfolder, and apply themes.js from DlhSoft Gantt Chart Hyper Library Demos (available here too), to make the user interface prettier as well.
And we are done, F5, hooray!
