dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。
點擊下載dhtmlxGantt試用版
步驟3.創建模型和數據庫
讓我們從數據模型開始。Gantt的數據模型包括鏈接和任務。從.NET世界的角度來看，dhtmlxGantt 對模型屬性使用非常規名稱。有時，客戶端模型還包含一些用于客戶端或后端邏輯的屬性，但是這些屬性不應存儲在數據庫中。
為了解決這個問題，將使用數據傳輸對象（DTO）模式。將定義兩種模型：
-
將與EF Core一起使用且在應用程序內部的域模型類
-
用于與Web API通信的DTO類。
然后應在兩個模型之間實現映射。
在項目文件夾中創建一個名為Models的新文件夾。在此處將實現模型類和EF上下文。
任務模型
首先，為“任務”創建一個類。在文件夾中的模型創建一個文件并將其命名為Task.cs。可以通過調用Models文件夾的上下文菜單并選擇Add-> Class來完成。
該模型必須如下所示：
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; }
}
}
您可以查找Task對象的所有屬性的列表。
鏈接模型
再添加一個文件并為Links創建一個類：
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; }
}
}
模型已準備就緒，您可以開始配置數據庫連接。
配置數據庫連接
要配置數據庫連接，您需要采取以下步驟：
安裝實體框架核心
在實體框架的核心將被用來管理與數據庫應用程序的通信。讓我們安裝框架：
-
在項目樹中找到DHTMLX.Gantt的依賴項
-
調用上下文菜單，然后選擇“ 管理NuGet包”
-
打開瀏覽選項卡并安裝Microsoft.EntityFrameworkCore.SqlServer
創建實體上下文
接下來，您需要定義與數據庫的會話并啟用加載和保存數據。為此，創建上下文：
-
在模型文件夾中添加GanttContext.cs文件
-
在創建的文件中定義GanttContext類
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; }
}
}
將第一條記錄添加到數據庫
現在您可以將記錄添加到數據庫。讓我們創建一個數據庫初始化程序，用任務填充數據庫。在“ 模型”文件夾中定義一個類，并將其命名為GanttSeeder。該類將具有Seed（）方法，該方法將向數據庫添加任務和鏈接。
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();
}
}
}
}
注冊數據庫
現在，您應該在Startup.cs中注冊數據庫。但是首先，您需要一個連接字符串。它將存儲
在應用程序設置中的JSON文件中。創建appsettings.json文件（如果已有，請打開它）并將連接字符串添加到數據庫：
appsettings.json
{
"ConnectionStrings": {
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;
Database=GanttDatabase;Trusted_Connection=True;"
}
}
數據庫上下文將通過依賴項注入進行注冊 。
將以下名稱空間添加到Startup.cs：
啟動文件
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();
}
}
}
最后，您需要在應用程序啟動時初始化數據庫并為其添加種子。通常，您希望為此使用遷移，但為簡單起見，此處未使用它們。
讓我們從創建一個將要完成初始化的類開始。在“ 模型”文件夾中創建GanttInitializerExtension.cs文件：
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.Main管道中調用InitializeDatabase（）：
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();
}
}
如上所述，本教程中未使用遷移。取而代之的是使用簡單的ConfirmCreated和seed。
當前部分已經完成，讓我們回到甘特。
定義DTO和映射
現在是時候定義將用于Web API的DTO類了。讓我們從Task的DTO類開始。在“ 模型”文件夾中，創建一個文件并定義WebApiTask.cs類：
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的文件中定義的Link的DTO類：
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來構建自己的Salesforce應用？訪問我們的GitHub存儲庫，您可以在其中找到Salesforce的Gantt組件的完整源代碼，并按照我們的視頻指南中的步驟進行操作。
關產品推薦：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包
phGantt Time Package：對任務和時間的分配管理的甘特圖
APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
想要購買dhtmlxGantt正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
11次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線