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

news2024/9/23 13:00:08

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

错误处理

异常筛选器可用于捕获 CRUD 处理程序中的异常并返回客户端响应 客户端甘特图可以识别。

要为甘特图提供错误处理,请执行以下步骤:

转到App_Start并添加一个名为 GanttAPIExceptionFilterAttribute 的新类:

using System.Net;
using System.Net.Http;
using System.Web.Http.Filters;

namespace DHX.Gantt.Web
{
public class GanttAPIExceptionFilterAttribute : ExceptionFilterAttribute
{
public override void OnException(HttpActionExecutedContext context)
{

context.Response = context.Request.CreateResponse(
HttpStatusCode.InternalServerError, new
{
action = "error",
message = context.Exception.Message
}
);
}
}
}

然后我们将此类添加到我们的 WebAPI 控制器中:

  • 数据控制者:
namespace DHX.Gantt.Web.Controllers
{
[GanttAPIExceptionFilter]
public class DataController : ApiController
  • 链路控制器:
namespace DHX.Gantt.Web.Controllers
{
[GanttAPIExceptionFilter]
public class LinkController : ApiController
  • 和任务控制器:
namespace DHX.Gantt.Web.Controllers
{
[GanttAPIExceptionFilter]
public class TaskController : ApiController

现在,如果任何 Web API 控制器在处理请求时触发异常, 客户端将收到错误状态和错误消息,可以以某种方式处理或向用户显示。

请注意,向客户端返回异常消息可能不是生产环境的最佳主意。

存储任务的顺序

客户端甘特图允许使用拖放对任务进行重新排序。因此,如果您使用此功能,则必须将此订单存储在数据库中。 您可以在此处查看常见说明。

现在让我们将此功能添加到我们的应用程序中。

在客户端上启用任务重新排序

首先,我们需要允许用户在 UI 中更改任务顺序。

打开索引视图并更新甘特图的配置:

gantt.config.order_branch = true;
gantt.config.order_branch_free = true;

// specifying the date format
gantt.config.date_format = "%Y-%m-%d %H:%i";
// initializing gantt
gantt.init("gantt_here");

向模型添加任务顺序

现在,让我们在后端反映这些更改。

我们将订单存储在名为 SortOrder 的属性中,因此让我们相应地更新 Task 类:

using System;
using System.ComponentModel.DataAnnotations;

namespace DHX.Gantt.Web.Models
{
public class Task
{
public int Id { get; set; }
[MaxLength(255)]
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; }
public int SortOrder { get; set; }
}
}

现在我们需要更新任务控制器,即:

  • 客户端应接收按 SortOrder 值排序的任务:
namespace DHX.Gantt.Web.Controllers
{
[GanttAPIExceptionFilter]
public class TaskController : ApiController
{
private GanttContext db = new GanttContext();

// GET api/Task
public IEnumerable<TaskDto> Get()
{
return db.Tasks
.OrderBy(t => t.SortOrder)
.ToList()
.Select(t => (TaskDto)t);
}
  • 新任务应接收默认值 SortOrder:
namespace DHX.Gantt.Web.Controllers
{
[System.Web.Http.HttpPost]
public IHttpActionResult CreateTask(TaskDto taskDto)
{
var newTask = (Task)taskDto;

newTask.SortOrder = db.Tasks.Max(t => t.SortOrder) + 1;

db.Tasks.Add(newTask);
db.SaveChanges();

return Ok(new
{
tid = newTask.Id,
action = "inserted"
});
}
  • 在客户端上修改任务顺序时,应更新 SortOrder。

当用户更改任务顺序时,gantt 将调用 PUT 操作,在请求的“target”属性中提供有关新任务位置的信息,以及任务属性的其余部分。

因此,我们应该为任务 DTO 类添加一个额外的属性:

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 string target { get; set; }

...
}
}

现在我们将在 PUT (EditTask) 操作中实现重新排序:

// PUT api/Task/5
[System.Web.Http.HttpPut]
public IHttpActionResult EditTask(int id, TaskDto taskDto)
{
var updatedTask = (Task)taskDto;
updatedTask.Id = id;

if (!string.IsNullOrEmpty(taskDto.target))
{
// reordering occurred
this._UpdateOrders(updatedTask, taskDto.target);
}

db.Entry(updatedTask).State = EntityState.Modified;
db.SaveChanges();

return Ok(new
{
action = "updated"
});
}

private void _UpdateOrders(Task updatedTask, string orderTarget)
{
int adjacentTaskId;
var nextSibling = false;

var targetId = orderTarget;

// adjacent task id is sent either as '{id}' or as 'next:{id}' depending
// on whether it's the next or the previous sibling
if (targetId.StartsWith("next:"))
{
targetId = targetId.Replace("next:", "");
nextSibling = true;
}

if (!int.TryParse(targetId, out adjacentTaskId))
{
return;
}

var adjacentTask = db.Tasks.Find(adjacentTaskId);
var startOrder = adjacentTask.SortOrder;

if (nextSibling)
startOrder++;

updatedTask.SortOrder = startOrder;

var updateOrders = db.Tasks
.Where(t => t.Id != updatedTask.Id)
.Where(t => t.SortOrder >= startOrder)
.OrderBy(t => t.SortOrder);

var taskList = updateOrders.ToList();

taskList.ForEach(t => t.SortOrder++);
}

已知问题

当应用在 IIS 上运行时,HTTP PUT 和 DELETE 请求返回 405 或 401 错误。 此问题可能是由 WebDAV 模块引起的,该模块可能与 RESTful 处理程序冲突。

作为常见的解决方案,可以从 web.config 文件中禁用该模块。此处提供了更多详细信息。

应用程序安全性

甘特图不提供任何方法来防止应用程序受到各种威胁,例如SQL注入或XSS和CSRF攻击。重要的是,确保应用程序安全的责任在于实现后端的开发人员。阅读相应文章中的详细信息。

故障排除

ASP.NET Web 应用程序模板不存在

如果在 Visual Studio 2022 中找不到必要的“ASP.NET Web 应用程序”项目模板,请执行以下步骤:

1. 关闭视觉工作室 2022

2. 开始菜单 - > Visual Studio 安装程序

3. 查找视觉工作室社区 2022 ->点击修改

4. 在打开的窗口中,选择单个组件,选中列表中的“.NET Framework 项目和项模板”点,然后单击“修改”

之后,您可以启动 Visual Studio 2022 并找到必要的模板。

初始化数据库时发生异常

有时,您可能会遇到 DropCreateDatabaseIfModelChanges 初始值设定项的问题,该初始值设定项会删除现有数据库,但不创建新数据库。

在这种情况下,打开 GanttInitializer.cs并将 DropCreateDatabaseIfModelChanges 替换为 DropCreateDatabaseAlways

using System;
using System.Collections.Generic;
using System.Data.Entity;

namespace DHX.Gantt.Web.Models
{
public class GanttInitializer : DropCreateDatabaseAlways<GanttContext>
{
...
}
}

然后再次运行该应用程序。

呈现任务和链接的问题

如果您已完成上述步骤以实现甘特图与 MVC ASP.NET 集成,但甘特图未在页面上呈现任务和链接,请查看排查后端集成问题一文。它描述了确定问题根源的方法。

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023爱分析・可观测性平台市场厂商评估报告:乘云科技

1. 研究范围定义 IT运维是企业信息化建设中不可或缺的一环&#xff0c;其作用在于确保系统稳定性、提高效率和降低成本&#xff0c;对企业的业务生产和服务质量有着至关重要的影响。自十四五规划以来&#xff0c;随着企业数字化转型的加速推进&#xff0c;以及信创转型的大…

Spring IoC 深度学习

Io回顾 IoC 是 Inversion of Control 的简写&#xff0c;译为“控制反转”&#xff0c;它不是一门技术&#xff0c;而是一种设计思想&#xff0c;是一个重要的面向对象编程法则&#xff0c;能够指导我们如何设计出松耦合、更优良的程序。 Spring 通过 IoC 容器来管理所有 Jav…

【代码随想录】刷题Day21

1.二叉搜索树的最小绝对值 530. 二叉搜索树的最小绝对差 首先对于单个节点而言&#xff0c;其最小绝对值有两个可能 一是根节点和左节点的最右节点绝对值 二是根节点和右节点的最左节点绝对值 其实这俩条件的实现就是我们代码的关键&#xff0c;不过这题和二叉搜索树的判断殊途…

Es分布式搜索引擎

目录 一、什么是ES&#xff1f; 二、什么是elk&#xff1f; 三、什么是倒排索引&#xff1f; 四、正向索引和倒排索引的优缺点对比 五、mysql数据库和es的区别&#xff1f; 六、索引库&#xff08;es中的数据库表&#xff09;操作有哪些&#xff1f; 八、ES分片存储原理 …

AutoCV第七课:ML基础

目录 ML基础前言1. 复习sqrt函数2. 线性回归预测房价2.1 问题分析2.2 代码实现2.3 总结 个人总结 ML基础 前言 手写AI推出的全新保姆级从零手写自动驾驶CV课程&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考。 本次课程主要学习复习 sqrt 函数和线性回归预测房…

Java开发手册-8

Java开发手册-8 MySQL 数据库SQL语句ORM映射 工程结构应用分层二方库依赖 MySQL 数据库 SQL语句 【强制】不要使用count(列名)或count(常量)来替代count(*)&#xff0c;count(*)是SQL92定义的标准统计行数的语法&#xff0c;跟数据库无关&#xff0c;跟NULL和非NULL无关。 说…

深入了解云计算:发展历程、服务与部署模型、未来趋势与挑战

开篇博主 bluetata 的观点&#xff1a;PaaS 服务必将是未来10年云计算权重最高的趋势&#xff08;05/02/2023 15:32&#xff09; 文章目录 一、前言二、认识了解云计算2.1 什么是云计算2.1.1 维基百科上的云计算定义2.1.2 NIST 标准云计算定义2.1.3 如果被面试如何解释云计算 2…

177_模型_Power BI 进销存6大日期维度期初与期末

177_模型_Power BI 进销存6大日期维度期初与期末 一、背景 在经销存报表设计中&#xff0c;经常会遇到的便是期初与期末。当然我们这里说期初与期末指的是期初库存与期末库存。 这里的期一般常见的会有&#xff1a;年月日。本案例将演示 6 大日期维度&#xff0c;分别是&…

(二)运行微信小程序:单页面和多页面

使用微信开发者工具创建项目后&#xff0c;默认将运行一个单页面的小程序&#xff0c;运行效果和文件对应修改处如下。 根据上图&#xff0c;通过修改对应内容&#xff0c;可以修改界面显示的文字。 这是一个单页面的小程序&#xff0c;假如要实现多页面的小程序&#xff0c;我…

基于matlab使用被动声纳系统定位声学信标

一、前言 此示例演示如何模拟被动声纳系统。固定的水声信标由浅水通道中的拖曳无源阵列检测和定位。声信标以每秒 10.37 千赫兹的速度传输 5 毫秒脉冲&#xff0c;并建模为各向同性投影仪。定位器系统在表面下方拖曳一个无源阵列&#xff0c;该阵列被建模为均匀线性阵列。一旦检…

电磁兼容三要素和三规律

EMC是业界的一个难点&#xff1b;来谈谈EMC三个规律、EMC问题三要素、电磁骚扰的特性、以及五层次EMC设计法。 EMC改进要如诊治疾病一样对症施治&#xff1b;我们倡导坚持EMC规律&#xff0c;趁早考虑和解决EMC问题-进行EMC设计。下面我们认识以下EMC领域的三个要 素和三个重要…

二十四、SQL 数据分析实战(12个简单的SQL题目)

文章目录 题目1: "双十一"活动的电商GMV分析题目2: 网站访问量分析题目3: 用户购物信息统计题目4: 连续售出的商品题目5: 奇偶互换位置题目6: 商品销量同环比题目7: 文本记录连接题目8: 行列互换题目9: 寻找符合要求的订单题目10: 优惠券使用分析题目11: 员工绩效考核…

国产仪器 3986A/3986D/3986E/3986F/3986H噪声系数分析仪

3986系列噪声系数分析仪产品包括3986A(10MHz&#xff5e;4GHz)、3986D(10MHz&#xff5e;18GHz)、3986E(10MHz&#xff5e;26.5GHz)、3986F(10MHz&#xff5e;40GHz)和3986H(10MHz&#xff5e;50GHz)&#xff0c;具有频率覆盖范围宽、频段选择灵活、接收灵敏度高、用户界面友好…

玩客云直刷armbian自带宝塔7.5

文章目录 前言一、短接玩客云1.1、流程1.2、短接操作 二、获取固件底包2.1、下载固件2.2、刷入成功后获取ip地址2.3、登陆2.4、其他 总结 前言 一开始25买了一个玩客云&#xff08;主机电源&#xff09;玩玩&#xff0c;成功刷入armbian&#xff0c;但是就是安装不了宝塔&…

MGV2000_2+16_当贝纯净桌面卡刷固件包-内有教程

MGV2000_216_当贝纯净桌面卡刷固件包-内有教程 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0c;运行速度提…

什么是零拷贝?

零拷贝 什么是零拷贝 零拷贝指的是&#xff0c;从一个存储区域到另一个存储区域的copy任务无需CPU参与就可完成。零拷贝的底层是 通过DMA总线技术实现的。零拷贝与具体的编程语言无关&#xff0c;完全依赖于OS&#xff0c;OS支持就可使用&#xff0c;不支持 设置了也不起作用…

MySQL基础(二十二)逻辑架构

1.逻辑架构剖析 1.1 第1层&#xff1a;连接层 系统&#xff08;客户端&#xff09;访问MySQL服务器前&#xff0c;做的第一件事就是建立TCP连接。 经过三次握手建立连接成功后&#xff0c;MySQL服务器对TCP传输过来的账号密码做身份认证、权限获取。 用户名或密码不对&#…

单脉冲测角和差波束法原理

和差波束测角及仿真 和差波束法原理MATLAB仿真 和差波束法原理 和差波束法是等信号测角方法中的一种&#xff0c;该方法利用两个形状完全相同但是部分重叠的波束&#xff0c;两个波束再形成和波束和差波束&#xff0c;由和差波束测量目标回波的入射角。 如下图所示&#xff0c…

seL4 操作系统微内核生态-ACM协会

美国计算机协会 (ACM) 将 2022 年 ACM 软件系统奖项授予 seL4 微内核团队。 SeL4是世界上第一个通过数学方法被证明安全的操作系统内核&#xff0c;并且在安全的基础上还强调高性能&#xff0c;是世界上最快、最先进的 OS 微内核。它对于嵌入式计算系统的安全可信赖方面将会有极…

先人一步了解Go 1.21版本新特性前瞻

本文首发自「慕课网」&#xff0c;想了解更多IT干货内容&#xff0c;程序员圈内热闻&#xff0c;欢迎关注"慕课网"&#xff01; 作者&#xff1a;tonybai|慕课网讲师 正在如火如荼地开发当中&#xff0c;按照Go核心团队的一年两次的发布节奏来算&#xff0c;Go 1.21…