dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表。可滿足項目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動態(tài)甘特圖，并以一個方便的圖形化方式可視化項目進(jìn)度。有了dhtmlxGantt，你可以顯示活動之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。

點(diǎn)擊下載dhtmlxGantt試用版

步驟3.創(chuàng)建模型和數(shù)據(jù)庫

讓我們從數(shù)據(jù)模型開始。Gantt的數(shù)據(jù)模型包括鏈接和任務(wù)。從.NET世界的角度來看，dhtmlxGantt 對模型屬性使用非常規(guī)名稱。有時，客戶端模型還包含一些用于客戶端或后端邏輯的屬性，但是這些屬性不應(yīng)存儲在數(shù)據(jù)庫中。

• 將與EF Core一起使用且在應(yīng)用程序內(nèi)部的域模型類
• 用于與Web API通信的DTO類。

然后應(yīng)在兩個模型之間實現(xiàn)映射。

任務(wù)模型

DHX.Gantt /Models/Task.cs
using System;
 
namespace DHX.Gantt.Models
{
    public class Task
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public DateTime StartDate { get; set; }
        public int Duration { get; set; }
        public decimal Progress { get; set; }
        public int? ParentId { get; set; }
        public string Type { get; set; }
    }
}

鏈接模型

DHX.Gantt /Models/Link.cs
namespace DHX.Gantt.Models
{
    public class Link
    {
        public int Id { get; set; }
        public string Type { get; set; }
        public int SourceTaskId { get; set; }
        public int TargetTaskId { get; set; }
    }
}

配置數(shù)據(jù)庫連接

安裝實體框架核心

• 在項目樹中找到DHTMLX.Gantt的依賴項
• 調(diào)用上下文菜單，然后選擇“ 管理NuGet包”
• 打開瀏覽選項卡并安裝Microsoft.EntityFrameworkCore.SqlServer

創(chuàng)建實體上下文

接下來，您需要定義與數(shù)據(jù)庫的會話并啟用加載和保存數(shù)據(jù)。為此，創(chuàng)建上下文：

DHX.Gantt /ModelsGanttContext.cs
using Microsoft.EntityFrameworkCore;
 
namespace DHX.Gantt.Models
{
    public class GanttContext : DbContext
    {
        public GanttContext(DbContextOptions<GanttContext> options)
           : base(options)
        {
        }
        public DbSet<Task> Tasks { get; set; }
        public DbSet<Link> Links { get; set; }
 
    }
}

將第一條記錄添加到數(shù)據(jù)庫

DHX.Gantt /Models/GanttSeeder.cs
using System;
using System.Collections.Generic;
using System.Linq;
 
using Microsoft.EntityFrameworkCore;
 
namespace DHX.Gantt.Models
{
    public static class GanttSeeder
    {
        public static void Seed(GanttContext context)
        {
            if (context.Tasks.Any())
            {
                return;   // DB has been seeded
            }
 
            using (var transaction = context.Database.BeginTransaction())
            {
               List<Task> tasks = new List<Task>()
               {
                  new Task()
                    {
                       Id = 1,
                       Text = "Project #2",
                       StartDate = DateTime.Today.AddDays(-3),
                       Duration = 18,
                       Progress = 0.4m,
                       ParentId = null
                    },
                    new Task()
                    {
                       Id = 2,
                       Text = "Task #1",
                       StartDate = DateTime.Today.AddDays(-2),
                       Duration = 8,
                       Progress = 0.6m,
                       ParentId = 1
                    },
                    new Task()
                    {
                       Id = 3,
                       Text = "Task #2",
                       StartDate = DateTime.Today.AddDays(-1),
                       Duration = 8,
                       Progress = 0.6m,
                       ParentId = 1
                    }
               };
 
               tasks.ForEach(s => context.Tasks.Add(s));
               context.Database.ExecuteSqlCommand("SET IDENTITY_INSERT Tasks ON;");
               context.SaveChanges();
 
               context.Database.ExecuteSqlCommand("SET IDENTITY_INSERT Tasks OFF;");
               List<Link> links = new List<Link>()
               {
                   new Link() {Id = 1, SourceTaskId = 1, TargetTaskId = 2, Type = "1"},
                   new Link() {Id = 2, SourceTaskId = 2, TargetTaskId = 3, Type = "0"}
               };
 
               links.ForEach(s => context.Links.Add(s));
               context.Database.ExecuteSqlCommand("SET IDENTITY_INSERT Links ON;");
               context.SaveChanges();
               context.Database.ExecuteSqlCommand("SET IDENTITY_INSERT Links OFF;");
               transaction.Commit();
            }
        }
    }
}

注冊數(shù)據(jù)庫

appsettings.json
{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;
        Database=GanttDatabase;Trusted_Connection=True;"
  }
}

using Microsoft.EntityFrameworkCore;
using DHX.Gantt.Models;
using Microsoft.Extensions.Configuration;

public IConfiguration Configuration { get; }
public Startup(IConfiguration configuration)
{
    Configuration = configuration;
}
 
public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<GanttContext>(options => 
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
}

這是Startup.cs的完整代碼：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
 
using Microsoft.EntityFrameworkCore;
using DHX.Gantt.Models;
using Microsoft.Extensions.Configuration;
 
namespace DHX.Gantt
{
 public class Startup
   {
    public IConfiguration Configuration { get; }
    public Startup(IConfiguration configuration)
     {
        Configuration = configuration;
     }
 
 
     //This method is called by the runtime. Use it to add services to the container.
     //More info on app config here - //go.microsoft.com/fwlink/?LinkID=398940
     public void ConfigureServices(IServiceCollection services)
     {
       services.AddDbContext<GanttContext>(options => 
         options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
     }
 
     //The method is called by the runtime. Use it to configure HTTP request pipeline.
     public void Configure(IApplicationBuilder app, IHostingEnvironment env)
     {
       if (env.IsDevelopment())
       {
          app.UseDeveloperExceptionPage();
       }
 
       app.UseDefaultFiles();
       app.UseStaticFiles();
     }
  }
}

最后，您需要在應(yīng)用程序啟動時初始化數(shù)據(jù)庫并為其添加種子。通常，您希望為此使用遷移，但為簡單起見，此處未使用它們。

Models/GanttInitializerExtension.cs
using Microsoft.Extensions.DependencyInjection;
using Microsoft.AspNetCore.Hosting;
 
namespace DHX.Gantt.Models
{
  public static class GanttInitializerExtension
  {
    public static IWebHost InitializeDatabase(this IWebHost webHost)
    {
      var serviceScopeFactory = 
       (IServiceScopeFactory)webHost.Services.GetService(typeof(IServiceScopeFactory));
 
      using (var scope = serviceScopeFactory.CreateScope())
       {
          var services = scope.ServiceProvider;
          var dbContext = services.GetRequiredService<GanttContext>();
          dbContext.Database.EnsureCreated();
          GanttSeeder.Seed(dbContext);
       }
 
       return webHost;
     }
   }
}

Program.cs
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using DHX.Gantt.Models;
 
namespace DHX.Gantt
{
    public class Program
    {
 
        public static void Main(string[] args)
        {
            BuildWebHost(args)
                .InitializeDatabase() 
                .Run();
        }
 
        public static IWebHost BuildWebHost(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>()
                .Build();
    }
}

當(dāng)前部分已經(jīng)完成，讓我們回到甘特。

定義DTO和映射

Models/WebApiTask.cs
using System;
 
namespace DHX.Gantt.Models
{
    public class WebApiTask
    {
        public int id { get; set; }
        public string text { get; set; }
        public string start_date { get; set; }
        public int duration { get; set; }
        public decimal progress { get; set; }
        public int? parent { get; set; }
        public string type { get; set; }
        public bool open
        {
            get { return true; }
            set { }
        }
 
        public static explicit operator WebApiTask(Task task)
        {
            return new WebApiTask
            {
                id = task.Id,
                text = task.Text,
                start_date = task.StartDate.ToString("yyyy-MM-dd HH:mm"),
                duration = task.Duration,
                parent = task.ParentId,
                type = task.Type,
                progress = task.Progress
            };
        }
 
        public static explicit operator Task(WebApiTask task)
        {
            return new Task
            {
                Id = task.id,
                Text = task.text,
                StartDate = DateTime.Parse(task.start_date, 
                    System.Globalization.CultureInfo.InvariantCulture),
                Duration = task.duration,
                ParentId = task.parent,
                Type = task.type,
                Progress = task.progress
            };
        }
    }
}

Models/WebApiLink.cs
namespace DHX.Gantt.Models
{
    public class WebApiLink
    {
        public int id { get; set; }
        public string type { get; set; }
        public int source { get; set; }
        public int target { get; set; }
 
        public static explicit operator WebApiLink(Link link)
        {
            return new WebApiLink
            {
                id = link.Id,
                type = link.Type,
                source = link.SourceTaskId,
                target = link.TargetTaskId
            };
        }
 
        public static explicit operator Link(WebApiLink link)
        {
            return new Link
            {
                Id = link.id,
                Type = link.type,
                SourceTaskId = link.source,
                TargetTaskId = link.target
            };
        }
    }
}

是否想嘗試DHTMLX Gantt來構(gòu)建自己的Salesforce應(yīng)用？訪問我們的GitHub存儲庫，您可以在其中找到Salesforce的Gantt組件的完整源代碼，并按照我們的視頻指南中的步驟進(jìn)行操作。

關(guān)產(chǎn)品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務(wù)和時間的分配管理的甘特圖

APS幫助提升企業(yè)生產(chǎn)效率，真正實現(xiàn)生產(chǎn)計劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計劃，提高準(zhǔn)時交貨能力，提高產(chǎn)能和資源利用率