提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:颜馨|2023-04-20 11:11:44.373|阅读 53 次
概述:本章讲述dhtmlxGantt在ASP.NET Core(下)的使用方法,欢迎查阅!
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求,具备完善的甘特图图表库,功能强大,价格便宜,提供丰富而灵活的JavaScript API接口,与各种服务器端技术(PHP,ASP.NET,Java等)简单集成,满足多种定制开发需求。
DHTMLX JavaScript UI 库所开发的 JavaScript 组件易于使用且功能丰富,非常适合任何领域和任何复杂性的解决方案,能够节省创建和维护业务应用程序的时间,提高生产力。
为了处理错误,你需要声明一个特殊的中间件类,它将捕获运行时的异常并写入响应。接下来,它将被添加到应用程序的请求管道中。按照下面的步骤进行:
1. 从项目文件夹中的模板创建一个中间件类。
2. 为 ASP.NET 核心安装 JSON 框架,你可以通过NuGet包管理器进行安装:
或者使用软件包管理器命令行:
PM> Install-Package NewtonSoft.JSON
3.找到invoke方法并注意调用。一些处理程序可以抛出异常让我们来捕捉它们,用一个块包住调用,如果捕捉到错误就运行我们的处理程序。
public async Task Invoke(HttpContext httpContext) { try { await _next(httpContext); }catch(Exception e) { await HandleExceptionAsync(httpContext, e); } } private static Task HandleExceptionAsync(HttpContext context, Exception exception) { var result = JsonConvert.SerializeObject(new { action = "error" }); context.Response.ContentType = "application/json"; context.Response.StatusCode = StatusCodes.Status500InternalServerError; return context.Response.WriteAsync(result); }
4.在GanttErrorMiddleware.cs中添加以下命名空间:
using Newtonsoft.Json;
5.中间件已经准备好了。现在转到Program.cs并连接中间件。添加以下命名空间:
using DHX.Gantt;
接下来调用app.UseGanttErrorMiddleware()方法:
app.UseGanttErrorMiddleware();
用户可以通过在客户端甘特图中拖放来重新排列任务。如果使用此功能,则应将任务的顺序存储在数据库中。
请继续阅读,了解如何启用甘特图任务顺序的存储。
在客户端重新排序
首先在客户端启用任务的重新排序。将这些行添加到索引.html:
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");
向模型添加任务顺序
接下来,您必须更改后端,使其反映任务的当前顺序。向任务模型再添加一个方法:
namespace DHX.Gantt.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; } public int SortOrder { get; set; } } }
更新控制器
您还需要更新控制器。
1. 客户端应接收按 SortOrder 值排序的任务。将突出显示的行添加到数据控制器:
[HttpGet] public object Get() { return new { data = _context.Tasks .OrderBy(t => t.SortOrder) .ToList() .Select(t => (WebApiTask)t), links = _context.Links .ToList() .Select(l => (WebApiLink)l) }; }
2. 新任务也应接收默认值 SortOrder:
// POST api/task [HttpPost] public IActionResult Post(WebApiTask apiTask) { var newTask = (Models.Task)apiTask; newTask.SortOrder = _context.Tasks.Max(t => t.SortOrder) + 1; _context.Tasks.Add(newTask); _context.SaveChanges(); return Ok(new { tid = newTask.Id, action = "inserted" }); }
3. 在客户端修改任务顺序时,应更新排序顺序。当用户重新排列任务时,gantt 将调用 PUT 操作,并在请求的“target”属性中提供有关新任务位置的信息,以及任务属性的其余部分。
添加到 WebApiTask.cs 类:target
public class WebApiTask { 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 string? target { get; set; } public bool open { get { return true; } set { } } }
现在让我们在 PUT (EditTask) 操作中实现重新排序,修改任务控制器的放置操作:
// PUT api/task/5 [HttpPut("{id}")] public IActionResult? Put(int id, WebApiTask apiTask) { var updatedTask = (Models.Task)apiTask; updatedTask.Id = id; var dbTask = _context.Tasks.Find(id); if (dbTask == null) { return null; } dbTask.Text = updatedTask.Text; dbTask.StartDate = updatedTask.StartDate; dbTask.Duration = updatedTask.Duration; dbTask.ParentId = updatedTask.ParentId; dbTask.Progress = updatedTask.Progress; dbTask.Type = updatedTask.Type; if (!string.IsNullOrEmpty(apiTask.target)) { // reordering occurred this._UpdateOrders(dbTask, apiTask.target); } _context.SaveChanges(); return Ok(new { action = "updated" }); }
并添加将更新任务顺序的方法:
private void _UpdateOrders(Models.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 = _context.Tasks.Find(adjacentTaskId); var startOrder = adjacentTask!.SortOrder; if (nextSibling) startOrder++; updatedTask.SortOrder = startOrder; var updateOrders = _context.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++); }
甘特图不提供任何方法来防止应用程序受到各种威胁,例如SQL注入,XSS和CSRF攻击。确保应用程序安全的责任在于开发人员 谁实现后端。阅读相应文章中的详细信息。
XSS 保护
一个简单的解决方案是在将数据项的文本属性发送到客户端时对其进行编码。
例如,在下面的代码中,内置的 HtmlEncoder 用于转义任务文本中的 HTML 值。这样,您的数据库将包含未修改的数据,但客户端将收到安全值
using System.Text.Encodings.Web; public static explicit operator WebApiTask(Task task) { return new WebApiTask { id = task.Id, text = HtmlEncoder.Default.Encode(task.Text != null ? task.Text : ""), start_date = task.StartDate.ToString("yyyy-MM-dd HH:mm"), duration = task.Duration, parent = task.ParentId, type = task.Type, progress = task.Progress }; }
另一种方法是使用专门的库,例如HtmlAgilityPack,并在保存/加载数据时完全剥离任何HTML任务。
如果您已完成上述步骤以实现甘特图与 ASP.NET Core 的集成,但甘特图未在页面上呈现任务和链接,请查看排查后端集成问题一文。它描述了 找出问题根源的方法。
现在你有一个功能齐全的甘特图。您可以在 GitHub 上查看完整代码,克隆或下载它并将其用于您的项目。
您还可以查看有关甘特图众多功能的指南或有关将甘特图与其他后端框架集成的教程。
DHTMLX Gantt享有超十年声誉,支持跨浏览器和跨平台,性价比高,可满足项目管理控件应用的所有需求,是较为完善的甘特图图表库
甘特图控件交流群:764148812
欢迎进群交流讨论,获取更多帮助请联系
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn
Visual Paradigm中的Doc. Composer菜单,可让您以完全可自定义的方式输出模型和图表的每个细节。在本文中,您将学习如何创建自定义模板来输出项目中图表或模型元素的注释。
对于银行金融、政府、医疗等需要处理大量信息的组织来说,高效的数据管理至关重要。对于大型数据扫描项目,Dynamic Web TWAIN SDK 提供强大的功能,只需极少的设置即可支持大量文档处理,让我们看看 Dynamsoft 如何简化此过程中的每个步骤。
在 Microsoft Excel 中,复制行、列和单元格是日常数据处理中的常见操作。本文将介绍如何使用 Spire.XLS for Java 和 Java 在 Excel 中复制行、列和单元格数据并保留格式。
雷达图又称蜘蛛图,是一种显示二维多元数据的图形方法。图表上的每个辐条代表一个不同的变量,数据点沿着这些辐条绘制。雷达图尤其适用于比较不同实体在多个标准中的表现。本文将演示如何使用 Spire.XLS for Python 通过 Python 在 Excel 中创建雷达图。
针对您的解决方案的交互式JavaScript / HTML5甘特图
DHTMLX Scheduler一个类似于Google日历的强大JavaScript日程安排控件。
DHTMLX Suite一个用于构建跨浏览器Web应用和移动应用的强大JavaScript UI库。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@capbkgr.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢