甘特图控件DHTMLX Gantt入门使用教程【引入】:dhtmlxGantt 与 ASP.NET MVC(上)

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求,具备完善的甘特图图表库,功能强大,价格便宜,提供丰富而灵活的JavaScript API接口,与各种服务器端技术(PHP,ASP.NET,Java等)简单集成,满足多种定制开发需求。

DHTMLX JavaScript UI 库所开发的 JavaScript 组件易于使用且功能丰富,非常适合任何领域和任何复杂性的解决方案,能够节省创建和维护业务应用程序的时间,提高生产力。

DHTMLX Gantt 最新下载(qun:764148812)icon-default.png?t=N3I4https://www.evget.com/product/4213/download

本教程将为您提供有关在服务器端使用 ASP.NET 和 REST API 创建甘特图的分步说明。

我们将利用 ASP.NET MVC 5 Web 平台和用于 REST API API 的 Web API 2 控制器来创建甘特图应用程序。 为了组织与数据库的通信,我们将使用实体框架。 我们将在Visual Studio IDE的帮助下构建我们的应用程序。

第 1 步:创建项目

创建新的 Visual Studio 项目
启动 Visual Studio 2022,然后选择“创建新项目”。

接下来选择“ASP.NET Web 应用程序”并将其命名为 DHX。如果找不到必要的模板,请查看故障排除部分。

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

第2步:将甘特图添加到页面

创建控制器

现在我们有一个空项目,一切都准备好实施我们的甘特图。

首先,我们将添加一个 MVC 控制器,它将显示一个带有甘特图的页面。

若要创建它,请调用“控制器”文件夹的上下文菜单,然后选择“加载项->控制器”。 在打开的窗口中,选择 MVC 5 控制器 -> 空,并将新添加的控制器命名为“HomeController”。

HomeController 默认具有 ActionResult 类的 Index() 方法,因此它不需要任何其他逻辑。我们将为它添加一个视图。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;namespace DHX.Gantt.Web.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}

创建视图

现在是时候创建我们的索引页了。转到“视图/主页”并添加一个名为“索引”的空视图:

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

@{
Layout = null;
}<!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>

我们在这一步做了什么:

  • 为我们的甘特图应用程序定义了一个简单的页面标记
  • 添加了使用 CDN 链接的 DHTMLX 甘特 JS/CSS 源
  • 并在页面上创建了甘特图

请注意配置:我们已指定来自数据源的日期格式。

gantt.config.date_format = "%Y-%m-%d %H:%i";

我们的客户端需要能够解析来自服务器的日期。

我们还告诉甘特图,它将在后端与 RESTful API 一起使用,并使用“/api/”作为默认路由:

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");

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

第3步:创建模型和数据库

创建模型

现在我们应该为甘特图定义模型类。甘特图数据模型由链接和任务组成。 如您所见,dhtmlxGantt 对数据模型使用某种命名约定,该约定不同于 C# 中传统上使用的命名约定。 客户端模型还可以包含一些不需要存储在数据库中但将在客户端或后端逻辑中使用的属性。

因此,我们将在此处使用数据传输对象模式:我们将定义将与 EF 一起使用并在应用内部使用的域模型类,以及将用于与 Web API 通信的 DTO 类。然后,我们将在两个模型之间实现某种映射。

让我们开始吧!

任务模型

首先,我们将为 Task 创建一个类。它的内容可以类似于这个:

using System;namespace DHX.Gantt.Web.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 对象的完整属性列表(必需属性和可选属性)。

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

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

配置数据库连接

安装实体框架

您还记得,我们将在实体框架的帮助下使用数据库组织工作。

因此,首先我们需要安装框架。为此,您需要在程序包管理器控制台中运行以下命令:

Install-Package EntityFramework

创建数据库上下文

下一步是创建上下文。上下文表示与数据库的会话。它允许获取和保存数据。

调用“模型”文件夹的上下文菜单,然后选择“添加类>类”。新类将称为“甘特上下文”,并将具有以下内容:

using System.Data.Entity;namespace DHX.Gantt.Web.Models
{
public class GanttContext : DbContext
{
public DbSet<Task> Tasks { get; set; }
public DbSet<Link> Links { get; set; }
}
}

将初始记录添加到数据库

现在我们可以将一些记录添加到数据库中。

实体框架可以在应用程序运行时自动创建数据库。 我们应该指定每当模型更改时都应删除并重新创建数据库。

首先,我们应该创建一个数据库初始值设定项。为此,我们需要在 App_Start 文件夹中添加一个新类 它将继承自 DropCreateDatabaseIfModelChanges 类。我们称之为“甘特初始值设定项”。

在此类中,我们将重新定义 Seed() 方法以用测试数据填充它。然后,我们将使用 Add() 方法将实体集合添加到上下文中。

甘特初始值设定项类的完整代码如下:

using System;
using System.Collections.Generic;
using System.Data.Entity;namespace DHX.Gantt.Web.Models
{
public class GanttInitializer : DropCreateDatabaseIfModelChanges<GanttContext>
{
protected override void Seed(GanttContext context)
{
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.SaveChanges();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.SaveChanges();
}
}
}打开 Global.asax 文件。它包含在

应用程序启动时运行的代码。 将必要的命名空间和将为上下文设置初始值设定项的代码行添加到 Application_Start() 方法中:

using System;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Http;using System.Data.Entity;
using DHX.Gantt.Web.Models;namespace DHX.Gantt.Web
{
public class Global : HttpApplication
{
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);Database.SetInitializer(new GanttInitializer());
}
}
}

定义 DTO 和映射

是时候声明将用于 Web API 的 DTO 类了。 至于模型和 DTO 之间的映射,我们将采用最简单的方法,只为这些类定义一个显式转换运算符。

TaskDto 类将如下所示:

using System;namespace DHX.Gantt.Web.Models
{
public class TaskDto
{
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 TaskDto(Task task)
{
return new TaskDto
{
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(TaskDto 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
};
}
}
}

LinkDto 类的代码如下:

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

最后,让我们为数据源添加一个模型:

using System.Collections.Generic;namespace DHX.Gantt.Web.Models
{
public class GanttDto
{
public IEnumerable<TaskDto> data { get; set; }
public IEnumerable<LinkDto> links { get; set; }
}
}

第 4 步:实现网络应用程序接口

使用 REST API 加载数据的一般技术
最后是时候实现 API 了。

从 API 详细信息中可以看到,我们需要两个控制器:一个用于任务,一个用于链接。 我们还需要一个控制器来执行“加载数据”操作,因为甘特图预计那里的结果会好坏参半。

任务控制器

要创建新控制器:

  • 激活“控制器”文件夹的上下文菜单,然后选择“添加 ->控制器”。
  • 选择 Web API 2 控制器 ->为空。新控制器将称为“任务控制器”。

现在我们需要为任务条目实现基本的 CRUD 操作:

using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web.Http;
using System.Web.UI.WebControls;using DHX.Gantt.Web.Models;namespace DHX.Gantt.Web.Controllers
{
public class TaskController : ApiController
{
private GanttContext db = new GanttContext();// GET api/Task
public IEnumerable<TaskDto> Get()
{
return db.Tasks
.ToList()
.Select(t => (TaskDto)t);
}// GET api/Task/5
[System.Web.Http.HttpGet]
public TaskDto Get(int id)
{
return (TaskDto)db
.Tasks
.Find(id);
}// PUT api/Task/5
[System.Web.Http.HttpPut]
public IHttpActionResult EditTask(int id, TaskDto taskDto)
{
var updatedTask = (Task)taskDto;
updatedTask.Id = id;
db.Entry(updatedTask).State = EntityState.Modified;
db.SaveChanges();return Ok(new
{
action = "updated"
});
}// POST api/Task
[System.Web.Http.HttpPost]
public IHttpActionResult CreateTask(TaskDto taskDto)
{
var newTask = (Task)taskDto;db.Tasks.Add(newTask);
db.SaveChanges();return Ok(new
{
tid = newTask.Id,
action = "inserted"
});
}// DELETE api/Task/5
[System.Web.Http.HttpDelete]
public IHttpActionResult DeleteTask(int id)
{
var task = db.Tasks.Find(id);
if (task != null)
{
db.Tasks.Remove(task);
db.SaveChanges();
}return Ok(new
{
action = "deleted"
});
}protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}

这里的一切都非常简单:

  • 在GET操作中,我们从数据库加载任务并输出其数据传输对象
  • 在 PUT/POST 操作中,我们将 DTO 作为输入,将其转换为任务模型并将更改保存到数据库上下文中

现在让我们对链接做同样的事情。

链路控制器

我们将为如下所示的链接创建一个空的 Web API 控制器:

using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web.Http;
using DHX.Gantt.Web.Models;namespace DHX.Gantt.Web.Controllers
{
public class LinkController : ApiController
{
private GanttContext db = new GanttContext();// GET api/Link
[System.Web.Http.HttpGet]
public IEnumerable<LinkDto> Get()
{
return db
.Links
.ToList()
.Select(l => (LinkDto)l);
}// GET api/Link/5
[System.Web.Http.HttpGet]
public LinkDto Get(int id)
{
return (LinkDto)db
.Links
.Find(id);
}// POST api/Link
[System.Web.Http.HttpPost]
public IHttpActionResult CreateLink(LinkDto linkDto)
{
var newLink = (Link)linkDto;
db.Links.Add(newLink);
db.SaveChanges();return Ok(new
{
tid = newLink.Id,
action = "inserted"
});
}// PUT api/Link/5
[System.Web.Http.HttpPut]
public IHttpActionResult EditLink(int id, LinkDto linkDto)
{
var clientLink = (Link)linkDto;
clientLink.Id = id;db.Entry(clientLink).State = EntityState.Modified;
db.SaveChanges();return Ok(new
{
action = "updated"
});
}// DELETE api/Link/5
[System.Web.Http.HttpDelete]
public IHttpActionResult DeleteLink(int id)
{
var link = db.Links.Find(id);
if (link != null)
{
db.Links.Remove(link);
db.SaveChanges();
}
return Ok(new
{
action = "deleted"
});
}protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}}
}

数据控制者

最后,我们将为数据操作添加一个控制器:

using System.Web.Http;using DHX.Gantt.Web.Models;namespace DHX.Gantt.Web.Controllers
{
public class DataController : ApiController
{
// GET api/
[System.Web.Http.HttpGet]
public GanttDto Get()
{
return new GanttDto
{
data = new TaskController().Get(),
links = new LinkController().Get()
};
}
}
}

现在一切都准备好了。运行应用程序,页面上应出现一个成熟的甘特图:

DHTMLX Gantt享有超十年声誉,支持跨浏览器和跨平台,性价比高,可满足项目管理控件应用的所有需求,是较为完善的甘特图图表库。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/53886.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

效果图底图 线框图_线框图初学者指南

效果图底图 线框图 线框图是任何屏幕设计过程中的重要一步。 它主要允许您定义设计的信息层次结构&#xff0c;从而使您可以轻松地根据希望用户处理信息的方式来规划布局。 如果您还没有使用线框图&#xff0c;是时候让您的脚湿了。 在开始之前&#xff0c;有一个简单的问题&a…

平面图,对偶图,

平面图定义&#xff1a; 图存在一种形式&#xff0c;所有的边只在顶点处相交&#xff0c;那么这个图就是平面图。 对偶图定义&#xff1a; 对于每一个平面图&#xff0c; 都有与其相对应的对偶图. 我们假设上面的例图是图G&#xff0c; 与其对应的对偶图G*&#xff0c; 那么对…

eplan图框制作

1、 首先&#xff0c;新建一个原理图项目 2、 新建图框。选择“工具”→“主数据”→“图框”→“新建” 在“文件名”中输入文件名&#xff0c;保存。 3、添加新建图框属性选项。选中“新建符号*”&#xff0c;添加选项 4、 设置图框的属性 a、 列/行字符数&#xff0c;设置为…

【WhatsApp营销】跨境电商推动销售和增长的 7 种方法

WhatsApp 如何帮助推动跨境电商销售&#xff1f;它提供什么样的跨境电商集成&#xff1f;在这篇文章中&#xff0c;我们将探讨跨境电商利用 WhatsApp 发展在线业务的七种方法。 鉴于 WhatsApp 的巨大影响力&#xff0c;与买家联系、营销和销售您的产品并最终在该平台上发展跨境…

关于这次寒武纪裁员的细节

寒武纪是一家看起来很神奇的公司&#xff0c;主营业务和智能芯片相关&#xff0c;今年的股价非常亮眼&#xff0c;年初到现在短短几个月&#xff0c;翻了四五倍。说实话有点小羡慕&#xff0c;要是年初买了它&#xff0c;现在估计也会说&#xff0c;寒武纪真牛皮&#xff0c;毕…

机器学习实战:Python基于支持向量机SVM-RFE进行分类预测(三)

文章目录 1 前言1.1 支持向量机的介绍1.2 支持向量机的应用 2 demo数据集演示2.1 导入函数2.2 构建数据集拟合2.3 预测模型及可视化 3 实例演示分类&#xff08;非SVM&#xff09;3.1 导入函数和数据3.2 简单线性分类3.3 最大间隔决定分类 4 实例演示分类&#xff08;SVM&#…

周期性分析

周期性分析就是探索某个变量是否随着时间的变化而呈现出周期性变化的趋势。具体的周期时间的选取可以根据情况而自定。 具体的代码展现如下&#xff1a; 我遇到的问题&#xff1a; 解决办法&#xff1a; 已解决SyntaxError: (unicode error) ‘unicodeescape’ codec can’t…

从0到1理解ChatGPT, GPT-4【文末送书】

作为一项人工智能技术&#xff0c;ChatGPT正在以飞快的速度向前发展&#xff0c;其强大的学习能力甚至可以用超乎想象来形容。 OpenAI公司带着最新的GPT-4开始“大杀四方”了~OpenAI推出GPT-4文本生成AI系统。紧随其后百度发布文心一言,开启智能对话新时代。&#xff08;文末送…

chatgpt赋能python:Python画图符号详解:入门必知的基础功能

Python画图符号详解&#xff1a;入门必知的基础功能 如果你是初学者&#xff0c;刚刚接触Python编程的话&#xff0c;你可能会感到一点无从下手。但是&#xff0c;随着你的学习深入&#xff0c;你会发现Python的一些非常有用的功能——如画图功能&#xff0c;非常实用又好玩。…

chatgpt赋能python:Python快速画图的不可替代性

Python快速画图的不可替代性 Python作为一个高级编程语言&#xff0c;在科学计算和数据处理领域已经越来越受欢迎。不仅如此&#xff0c;Python也拥有强大的图形库&#xff0c;使其成为一种快速、简便且便于部署的绘图方案。 1. Matplotlib 在Python的图形库中&#xff0c;M…

AIGC浪潮下裁员已至,谈谈居安思危

目录 1、创始人的裁员公告 2、18个月奇迹 3、ChatGPT终结了一切 4、大树之下寸草不生 6、任何一家企业都应居安思危 5、写在最后&#xff1a;既是风口也是浪尖 参考链接&#xff1a; 让所有人都没想到的是&#xff0c;正值人工智能之火烧遍全球之时&#xff0c;一家估值…

2月datawhale组队学习:大数据

文章目录 一、大数据概述二、 Hadoop2.1 Hadoop概述2.2 su:Authentication failure2.3 使用sudo命令报错xxx is not in the sudoers file. This incident will be reported.2.4 创建用户datawhale&#xff0c;安装java8&#xff1a;2.5 安装单机版Hadoop2.5.1 安装Hadoop2.5.2 …

这里有110+公开的专业数据集

&#x1f446;点击关注&#xff5c;设为星标&#xff5c;干货速递&#x1f446; 哈喽大家好&#xff0c;我是俊欣 如果你不是会爬虫的技术流&#xff0c;那下面这110网站可以解决你90%的数据需求。 首先&#xff0c;常见的公开数据网站在 https://hao.199it.com/ 都可以搜索到。…

基于Python的世界各个国家的幸福度的公开数据集的数据挖掘

目录 一&#xff0e; 问题背景 1 二&#xff0e; 准备工作 2 三&#xff0e; 具体实施 2 1.数据存储及基本加载 2 数据整理到数组之中 2 2.数据清洗 2 ① 多余列清除 2 ② 列属性归一 3 ③ 空值处理 4 3.数据挖掘算法 6 ① 基本特征 6 ② 总体热力图分析 7 ③ 对指定数据的热…

【博览群书】《实战大数据》——属于我的第一本大数据图书

文章目录 前言简介目录其他 前言 Hello家人们&#xff0c;博主前不久参加了CSDN图书馆和机械工业出版社联合举办的图书类活动&#xff0c;很荣幸在活动中获得了属于自己的第一本大数据图书&#xff0c;《实战大数据—— 分布式大数据分析处理系统开发与应用》。作为大数据专业…

大数据与AI的16个实践分享

↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习&#xff0c;不错过 Datawhale活动 主办方&#xff1a;DataFun&#xff0c;指导单位&#xff1a;北京智源研究院 文章作者&#xff1a;Hoh Xil 出品平台&#xff1a;DataFunTalk 导读&#xff1a;12.19-20&…

用最诙谐的语言提升你对大数据的认知

写在前面 本文隶属于专栏《100个问题搞定大数据理论体系》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见100个问题搞定大数据理论体系 引子 小明又来了~ …

大数据平台技术回忆版

liu老师当时也没给我们怎么画重点 我主要是到mooc上面 还有刷题软件上找了题做做 确实有原题 怎么说呢 光看ppt是不太行的 因为有的知识点出的很细。 可以到刷题神器上看看做做题 简单举几个例子 比如这种是吧 选择题跟判断题也是到网上找找题做 确实碰到了原题目 是吧 …

hahabet05:com浅谈大数据一之认识大数据

浅谈大数据一之认识大数据 ***数据&#xff0c;相信在大部分人的脑海中会有一个大概的意识。没错&#xff0c;数据并不是一个新的概念&#xff0c;在这几天年的发展中&#xff0c;人类一直在利用着数据做着记录&#xff0c;而数据的价值&#xff0c;特别是大数据的价值却是近几…

话题讨论征文--谈论大数据时我们在谈什么 获奖名单公布

从社会发展趋势的角度&#xff0c;很明显大数据会是目前肉眼可及的视野范围里能看到的最大趋势之一。从传统IT 业到互联网、互联网到移动互联网&#xff0c;从以智能手机和Pad 为主要终端载体的移动互联网到可穿戴设备的移动互联网&#xff0c;然后再到万物互联的物联网&#x…