使用教程丨如何在服务器端使用ASP.NET Core创建DHTMLX Gantt的分步说明

步骤 1. 创建项目
启动 Visual Studio 2022 并创建一个新项目。选择：创建新项目。

接下来选择“ASP.NET Core Web App”并将其命名为DHX.Gantt。



因此，您已经创建了一个项目并可以继续为甘特图添加标记和脚本。
步骤 2. 添加甘特图标记和 JS
转到wwwroot并创建一个index.html文件。


在新创建的文件中为甘特图制作一个简单的页面。
请注意，在此演示中，甘特图文件是从CDN添加的。如果您有组件的专业版，则需要手动将甘特图文件添加到您的项目中。

当页面加载时，除了初始化甘特图 外，还会立即调用并 设置数据加载dataProcessor，因此用户对甘特图所做的所有更改都会保存到后端。后端尚未实现，因此稍后会更有意义。
接下来转到Program.cs并告诉应用程序使用index.html页面。为此，您需要将应用配置为提供文件wwwroot夹中的静态文件。

该app.UseDefaultFiles()方法允许提供默认文件。它将在wwwroot文件夹中搜索以下文件：
索引.html
索引.htm
默认.html
默认.htm
因此，您可以选择其中任何一个，而在本教程中使用“index.html”。 UseDefaultFiles()只是一个 URL 重写器，实际上并不提供文件。为此，您还需要添加该UseStaticFiles()文件。
完成后，当您运行该应用程序时，页面上应该会出现一个空白的甘特图。请注意，右上角的“无效数据”标签显示是因为gantt.load()被调用了，因为仍然没有合适的后端来提供数据。实施控制器后，甘特图将能够显示任务和链接。

现在基本部分已经完成，是时候实现后端了。让我们从实现模型类开始，然后继续进行 WebAPI 控制器。
步骤 3. 创建模型和数据库
让我们从数据模型开始。甘特图的数据模型包括链接和任务。dhtmlxGantt从 .NET 世界的角度对模型属性使用非常规名称。有时客户端模型还包含一些客户端或后端逻辑的属性，但这些属性不应存储在数据库中。
为了解决这个问题，将使用数据传输对象 (DTO)模式。将定义两种模型：
•将与 EF Core 和应用程序内部一起使用的域模型类
•将用于与 Web API 通信的 DTO 类。
然后应该实现两个模型之间的映射。
楷模
在项目文件夹中创建一个名为Models的新文件夹。这是将实现模型类和 EF 上下文的地方。
任务模型
首先，为任务创建一个类。在 Models 文件夹中创建一个文件并将其命名为Task.cs。这可以通过调用 Models 文件夹的上下文菜单并选择Add->Class来完成。
这是模型必须的样子：

您可以查找Task 对象的所有属性的列表。
链接模型
再添加一个文件并为 Links 创建一个类：

模型准备就绪，您可以开始配置数据库连接。
配置数据库连接
要配置数据库连接，您需要执行以下步骤：
安装实体框架核心
Entity Framework Core将用于管理应用程序与数据库的通信。让我们安装框架：
•在项目树中找到 DHTMLX.Gantt 的依赖项
•调用上下文菜单并选择管理 NuGet 包
•打开浏览选项卡并安装Microsoft.EntityFrameworkCore.SqlServer、Microsoft.EntityFrameworkCore和Microsoft.EntityFrameworkCore.Design

或者使用包管理器命令行：

Entity Framework Core 将用于管理应用程序与数据库的通信。
创建实体上下文
接下来您需要定义与数据库的会话并启用加载和保存数据。为此，创建上下文：
•在Models文件夹中添加GanttContext.cs文件
•在创建的文件中定义GanttContext类

将第一条记录添加到数据库
现在您可以将记录添加到数据库中。让我们创建数据库初始化程序，它将用任务填充数据库。在Models文件夹中定义一个类并将其命名为GanttSeeder。该类将具有Seed()方法，该方法将向数据库添加任务和链接。



注册数据库
现在您应该在Program.cs中注册数据库。但首先你需要一个连接字符串。它将存储在应用程序设置中的 JSON 文件中。创建appsettings.json文件（如果已有，则打开它）并向数据库添加连接字符串：

数据库上下文将通过 依赖注入注册。
将以下命名空间添加到Program.cs：

声明将如下所示：

要启用控制器，调用services.AddControllers()方法：

我们调用app.MapControllers()来注册我们的控制器路由：

这是Program.cs 的完整代码：

最后，您需要在应用程序启动时初始化和播种数据库。通常，您会为此使用迁移，但为简单起见，此处未使用它们。
让我们从创建一个将完成初始化的类开始。在Models文件夹中创建GanttInitializerExtension.cs文件：

接下来调用InitializeDatabase()：

如上所述，本教程中不使用迁移。而是使用简单的EnsureCreated和种子。
当前部分结束，让我们回到甘特图。
定义 DTO 和映射
现在是定义将用于 Web API 的 DTO 类的时候了。让我们从任务的 DTO 类开始。在Models文件夹中创建一个文件并定义WebApiTask.cs类：

这是Models文件夹中名为WebApiLink.cs 的文件中定义的 Link 的 DTO 类：

完成此步骤后，您应该获得以下文件夹结构：

现在您可以运行该应用程序以检查是否一切就绪。如果您没有看到运行时错误，那么一切都很好。
步骤 4. 实施 Web API
现在是实际 REST API 实现的时候了。
添加控制器
创建Controllers文件夹并创建三个空的 API 控制器：一个用于任务，另一个用于链接，另一个用于整个数据集：

任务控制器
让我们为任务创建一个控制器。它将为甘特图任务定义基本的 CRUD 操作。
怎么运行的：
•在 GET 请求中，任务从数据库加载，输出是任务的数据传输对象；
•在 PUT/POST 请求中，任务作为 WebAPITask 类来自客户端。它们在 dhtmlxGantt 中以这种方式表示。因此，您应该将它们转换为我们的 EntityFramework（任务类）数据模型的格式。之后就可以保存 DatabaseContext 中的更改。


链接控制器
接下来你应该为链接创建一个控制器：


数据控制者
最后，您需要为数据操作创建一个控制器：

一切都准备好了。您可以运行该应用程序并查看完整的甘特图。