{"id":3822,"date":"2016-11-25T16:00:45","date_gmt":"2016-11-25T12:00:45","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=3822"},"modified":"2025-03-10T16:32:32","modified_gmt":"2025-03-10T13:32:32","slug":"using-dhtmlx-gantt-chart-asp-net-rest-api","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-dhtmlx-gantt-chart-asp-net-rest-api\/","title":{"rendered":"Using DHTMLX Gantt Chart with ASP.NET and REST API"},"content":{"rendered":"

Today, we’ll talk about creating a Gantt chart<\/a> application with ASP.NET and REST API on the server-side. We will make use of ASP.NET MVC 5 web platform and Web API 2 Controller for REST API to create a Gantt application. To organize communication with the database, we will use the Entity Framework<\/a>. We will build our application with the help of the MS Visual Studio 2015 IDE.<\/p>\n

And now, let’s start by running Visual Studio and creating a new project.<\/p>\n

Step 1. Creating a New Project<\/strong><\/h3>\n

Open the File<\/em> menu tab and choose: New -> Project<\/em>. Then select ASP.NET Web Application<\/em> and give it a name. We’ll name it gantt-rest-net<\/em> for our example:<\/p>\n

\"vs_project\"<\/p>\n

Select an Empty project among available templates and check MVC<\/em> and Web API<\/em> checkboxes below the list of templates:<\/p>\n

\"select_template\"<\/p>\n

Now, we need to install dhtmlxGantt using NuGet. Run the following command in the Package Manager Console:<\/p>\n

Install-<\/span>Package DHTMLX.<\/span>Gantt<\/span><\/div><\/div>\n

Step 2. Adding Models, Views, and Controllers<\/strong><\/h3>\n

At this step we have three main tasks:<\/p>\n

    \n
  • Creating Models<\/strong>, special objects that will represent data in the Gantt chart<\/li>\n
  • Creating Views<\/strong> that will visualize the data<\/li>\n
  • Creating Controller<\/strong> that will process the requests that come from the user and run the needed logic. It’ll call a particular view to generate a necessary HTML for the request<\/li>\n<\/ul>\n

    We’ll start from creating a controller.<\/p>\n

    Creating a Controller<\/h4>\n

    Call the context menu for the Controllers<\/em> folder and choose Add->Controller<\/em>.<\/p>\n

    \"creating_controller\"<\/p>\n

    In the opened window select MVC 5 Controller -> Empty<\/em> and name a newly added controller “HomeController”<\/em>.<\/p>\n

    Our controller has the Index() method of the ActionResult class by default, so it doesn’t require any additional logic. All we need to do is to add a view for it:<\/p>\n

     <\/p>\n

    using System;
    \nusing System.Collections.Generic;
    \nusing System.Linq;
    \nusing System.Web;
    \nusing System.Web.Mvc;<\/p>\n

    namespace gantt_rest_net.Controllers
    \n{
    \npublic class HomeController : Controller
    \n{
    \n\/\/ GET: Home
    \npublic ActionResult Index()
    \n{
    \nreturn View();
    \n}
    \n}
    \n}<\/p>\n

    Creating a View<\/h4>\n

    In the Views<\/em> folder find the Home<\/em> directory. Right click on it to call the context menu and select Add -> View<\/em>.<\/p>\n

    \"creating_view\"<\/p>\n

    Name the new view “Index”<\/em>, then open the newly created view and put the following code into it:<\/p>\n

    @<\/span>{<\/span>
    \nViewBag.Title<\/span> =<\/span> "Index"<\/span>;<\/span>
    \n}<\/span>
    \n<<\/span>script src=<\/span>"~\/scripts\/dhtmlxgantt.js"<\/span> type=<\/span>"text\/javascript"<\/span>><\/<\/span>script><\/span><\/div><\/div>\n
    <\/div>\n