使用教程丨如何在服务器端使用ASP.NET和 REST API创建DHTMLX Gantt

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

接下来选择“ASP.NET Web 应用程序”并将其命名为DHX.Gantt.Web。

在可用模板中选择一个空项目，然后选中模板列表附近的 MVC 和 Web API 复选框。

步骤 2. 将甘特图添加到页面
创建控制器
现在我们有一个空项目，一切都准备好实施我们的甘特图。
首先，我们将添加一个 MVC 控制器，它将显示带有甘特图的页面。
要创建它，请调用 Controllers 文件夹的上下文菜单并选择 Add->Controller。在打开的窗口中选择 MVC 5 Controller -> Empty 并将新添加的控制器命名为“HomeController”。

HomeController 默认有ActionResult类的Index()方法，所以它不需要任何额外的逻辑。我们将为它添加一个视图。

创建视图
现在是时候创建我们的索引页面了。转到 Views/Home 并添加一个名为 Index 的空视图：

打开新创建的视图并将以下代码放入其中：

我们在这里做了什么：
•为我们的甘特图应用程序定义了一个简单的页面标记
•使用CDN 链接添加了 dhtmlx 甘特图 js/css 源
•并在页面上创建了甘特图
注意配置：我们已经指定了来自数据源的日期格式。

我们的客户端需要能够解析来自服务器的日期。
我们还告诉甘特图，它将在后端使用 RESTful API，并使用“/api/”作为默认路由：

服务器端本身将稍后实现。现在，您可以运行该应用程序并查看页面上呈现的甘特图。

步骤 3. 创建模型和数据库
创建模型
现在我们应该为甘特图定义模型类。甘特图数据模型由Links 和 Tasks组成。如您所见，dhtmlxGantt 使用特定的数据模型命名约定，这与 C# 中传统使用的命名约定不同。客户端模型还可以包含一些不需要存储在数据库中但将在客户端或后端逻辑中使用的属性。
因此，我们将在此处使用数据传输对象 模式：我们将定义将与 EF 和应用程序内部一起使用的域模型类，以及将用于与 Web API 通信的 DTO 类。然后我们将在两个模型之间实现某种映射。
开始吧！
任务模型
首先，我们将为任务创建一个类。它的内容可以类似于这个：

链接模型
现在是 Link 类的时候了，它可能如下所示：

配置数据库连接
安装实体框架
您还记得，我们将在实体框架的帮助下使用数据库组织工作。
所以，首先我们需要安装框架。为此，您需要在包管理器控制台中运行以下命令：
Install-Package EntityFramework
创建数据库上下文
下一步是创建上下文。上下文表示与数据库的会话。它允许获取和保存数据。
调用Models文件夹的上下文菜单并选择 Add->Class。新类将被称为“GanttContext”并将具有以下内容：

将初始记录添加到数据库
现在我们可以向数据库中添加一些记录。
实体框架可以在应用程序运行时自动创建数据库。我们应该指定在模型更改时删除并重新创建数据库。
首先，我们应该创建一个数据库初始化器。为此，我们需要在App_Start文件夹中添加一个新类，该类将从DropCreateDatabaseIfModelChanges类继承。我们称它为“GanttInitializer”。
在此类中，我们将重新定义Seed()方法以使用测试数据填充它。然后我们将使用Add()方法将实体集合添加到上下文中。
GanttInitializer类的完整代码如下：



打开Global.asax文件。它包含在应用程序启动时运行的代码。在Application_Start()方法中添加必要的命名空间和为我们的上下文设置 Initializer 的代码行：

定义 DTO 和映射
是时候声明将用于 Web API 的 DTO 类了。至于 Model 和 DTO 之间的映射，我们将采用最简单的方法，为这些类定义一个显式转换运算符。
TaskDto 类将如下所示：


下面给出了 LinkDto 类的代码：

最后，让我们为数据源添加一个模型：

步骤 4. 实施 Web API
使用 REST API 加载数据的一般技术
最后是实施 API 的时候了。
正如您从API 详细信息中看到的那样，我们需要两个控制器：一个用于任务，一个用于链接。我们还需要一个控制器来执行“加载数据”操作，因为甘特图希望在那里得到混合结果。
任务控制器
要创建一个新的控制器：
•激活 Controllers 文件夹的上下文菜单并选择添加 -> 控制器。
•选择 Web API 2 控制器 -> 空。新控制器将被称为“TaskController”。
现在我们需要为任务条目实现基本的 CRUD 操作：



这里的一切都非常简单：
•在 GET 操作中，我们从数据库加载任务并输出它们的数据传输对象
•在 PUT/POST 操作中，我们将 DTO 作为输入，将其转换为任务模型并将更改保存到数据库上下文
现在让我们对链接做同样的事情。
链接控制器
我们将为这样的链接创建一个空的 Web API 控制器：



数据控制者
最后，我们将为数据操作添加一个控制器：

现在一切就绪。运行应用程序，页面上应该会出现一个完整的甘特图：