如何在服务器端使用ASP.NET Core 2创建甘特图?
yuyutoo 2025-07-01 23:58 1 浏览 0 评论
本教程为您提供有关如何在服务器端使用ASP.NET Core 2创建Gantt的分步说明。为了组织与数据库的通信，使用了实体框架核心。该应用程序是在Visual Studio 2017的帮助下构建的。
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。
点击文末“了解更多”下载dhtmlxGantt试用版
步骤1.创建一个项目
启动Visual Studio 2017并创建一个新项目。打开文件菜单，然后选择：新建->项目。
接下来，选择“ ASP.NET Core Web应用程序”，并将其命名为DHX.Gantt。
选择一个空模板。
因此，您已经创建了一个项目，可以继续为Gantt添加标记和脚本。
第2步。添加甘特标记和JS
转到wwwroot并创建一个index.html文件。
在新创建的文件中，为甘特图制作一个简单的页面。
请注意，在此演示中，从CDN添加了甘特文件。如果您拥有该组件的专业版，则需要手动将gantt文件添加到您的项目中。
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css"
rel="stylesheet" type="text/css" />
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// specifying the date format
gantt.config.date_format = "%Y-%m-%d %H:%i";
// initializing gantt
gantt.init("gantt_here");
// initiating data loading
gantt.load("/api/data");
// initializing dataProcessor
var dp = new gantt.dataProcessor("/api/");
// and attaching it to gantt
dp.init(gantt);
// setting the REST mode for dataProcessor
dp.setTransactionMode("REST");
});
</script>
</head>
<body>
<div id="gantt_here" style="width: 100%; height: 100vh;"></div>
</body>
</html>加载页面时，除了初始化甘特图 外，还会立即调用数据加载并进行 dataProcessor设置，因此用户对甘特图所做的所有更改都将保存到后端。后端尚未实现，因此以后会更有意义。
接下来转到Startup.cs，并告诉应用程序使用index.html页面。为此，您需要配置该应用程序以提供该wwwroot文件夹中的静态文件。它在实现Configure方法调用的app.UseStaticFiles()方法。您可以在此处找到更多详细信息。
我们还需要将所需的中间件添加到Startup.cs中，Configure()方法是用突出显示的两行代码替换方法中的“ Hello world”存根：
Startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
namespace DHX.Gantt
{
public class Startup
{
// This method gets called by the runtime.
// Use this method to add services to the container.
// For more information on how to configure your application,
// visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime.
// Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseDefaultFiles();
app.UseStaticFiles();
}
}
}添加的2个中间件是：
- app.UseDefaultFiles()–允许提供默认文件。它将在wwwroot文件夹中搜索以下文件：index.htmlindex.htmdefault.htmldefault.htm因此，您可以选择其中的任何一个，而在本教程中使用“ index.html”。 UseDefaultFiles()只是一个实际上不提供文件服务的URL重写器。为此，您还需要添加UseStaticFiles()文件。
- app.UseStaticFiles()–负责提供wwwroot文件夹中存在的所有静态文件。
完成后，在运行应用程序时页面上将出现一个空的甘特图。请注意，由于gantt.load()被调用，因此显示了右上角的“无效数据”标签，因为仍然没有适当的后端来提供数据。实施控制器后，甘特将能够显示任务和链接。
现在基本部分已经完成，现在是实现后端的时候了。让我们从实现模型类开始，然后继续到WebAPI控制器。
未完待续……下一章继续讲解如何创建模型和数据库！、
点击下方“了解更多”下载dhtmlxGantt试用版
相关推荐
- 网络规划建设原来也可以这么简单!
-
废话少说，直接上干货。天气炎热，请各位看官老爷静心阅读。整体思路下图是关于网络建设的所有相关领域，接下来我为大家逐一讲解。网络分层...
- 网络规划设计师笔记-第 1 章 计算机网络原理
-
计算机网络原理1.1计算机网络概论（P1-10）...
- 别输在远见上，网工这样做职业规划，比啥都强
-
01职业中的规划，人生中的buff“职业规划“这个词，其实对很多年轻人，包括曾经年轻的我来说，都不屑一提。...
- 网络规划设计师学习中(个人自学笔记分享1)，有一起学习的吗?
-
网络规划设计师，上午考试内容学习：第一章：计算机网络概述（上部分）：如果你也在一起学习，那么我们来一起学习吧！坚持1年，争取明年一次性通过！...
- 在微服务中使用 ASP.NET Core 实现事件溯源和 CQRS
-
概述：事件溯源和命令查询责任分离（CQRS）已成为解决微服务设计的复杂性的强大架构模式。基本CQRS表示形式在本文中，我们将探讨ASP.NETCore如何使你能够将事件溯源和CQRS...
- 用 Nginx 部署 ASP.NET Core 应用程序
-
用Nginx部署ASP.NETCore应用程序步骤如下：在Linux中安装.NETCore运行时和Nginx：...
- Asp.net Core启动流程讲解(一)（asp.net core 入门）
-
asp.netcore默认项目包括项目根目录级的Startup.cs、Program.cs、appsettings.json（appsettings.Development.json）launch...
- 十天学会ASP之第五天（十天学会asp教程）
-
学习目的：学会数据库的基本操作1（写入记录）数据库的基本操作无非是：查询记录，写入记录，删除记录，修改记录。今天我们先学习写入记录。先建立一个表单：<formname="form1"met...
- ASP.NET Core 的 WebApplication 类
-
ASP.NETCore提供了3个主机类（Host）。这些类用于配置应用、管理生命周期和启动Web服务。...
- ASP.NET Core中的键控依赖注入（.net依赖注入原理）
-
大家好,我是深山踏红叶,今天我们来聊一聊ASP.NETCore中的FromKeyedServices,它是在.Net8中引入的。这一特性允许通过键（如字符串或枚举）来注册和检索依赖注入（D...
- Asp.net常用方法及request和response-a
-
asp.net教程asp.net常用方法:1、Request.UrlReferrer请求的来源，可以根据这个判断从百度搜的哪个关键词、防下载盗链、防图片盗链，可以伪造(比如迅雷)。(使用全局一般处理...
- asp.net常考面试题（aspnet题库）
-
asp.net常考面试题一，列举ASP.Net页面之间传递值的几种方式？1，使用QueryString，如：......?id=1;response.Redirect()......2，使用Sessi...
- 在Windows系统搭建.NET Core环境并创建运行ASP.NET网站
-
微软于6月27日在红帽DevNation峰会上正式发布了.NETCore1.0、ASP.NET1.0和EntityFrameworkCore1.0，其将全部支持Windows、OSX和...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)