DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的大部分開發(fā)需求，具備完善的甘特圖圖表庫，功能強(qiáng)大，價(jià)格便宜，提供豐富而靈活的JavaScript API接口，與各種服務(wù)器端技術(shù)（PHP，ASP.NET，Java等）簡(jiǎn)單集成，滿足多種定制開發(fā)需求。

DHTMLX JavaScript UI 庫所開發(fā)的 JavaScript 組件易于使用且功能豐富，非常適合任何領(lǐng)域和任何復(fù)雜性的解決方案，能夠節(jié)省創(chuàng)建和維護(hù)業(yè)務(wù)應(yīng)用程序的時(shí)間，提高生產(chǎn)力。

DHTMLX Gantt 最新下載

錯(cuò)誤處理

為了處理錯(cuò)誤，你需要聲明一個(gè)特殊的中間件類，它將捕獲運(yùn)行時(shí)的異常并寫入響應(yīng)。接下來，它將被添加到應(yīng)用程序的請(qǐng)求管道中。按照下面的步驟進(jìn)行：

1. 從項(xiàng)目文件夾中的模板創(chuàng)建一個(gè)中間件類。

2. 為 ASP.NET 核心安裝 JSON 框架，你可以通過NuGet包管理器進(jìn)行安裝：

或者使用軟件包管理器命令行：

PM> Install-Package NewtonSoft.JSON

3.找到invoke方法并注意調(diào)用。一些處理程序可以拋出異常讓我們來捕捉它們，用一個(gè)塊包住調(diào)用，如果捕捉到錯(cuò)誤就運(yùn)行我們的處理程序。

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.中間件已經(jīng)準(zhǔn)備好了。現(xiàn)在轉(zhuǎn)到Program.cs并連接中間件。添加以下命名空間：

using DHX.Gantt;

接下來調(diào)用app.UseGanttErrorMiddleware()方法：

app.UseGanttErrorMiddleware();

存儲(chǔ)任務(wù)的順序

用戶可以通過在客戶端甘特圖中拖放來重新排列任務(wù)。如果使用此功能，則應(yīng)將任務(wù)的順序存儲(chǔ)在數(shù)據(jù)庫中。

請(qǐng)繼續(xù)閱讀，了解如何啟用甘特圖任務(wù)順序的存儲(chǔ)。

在客戶端重新排序
首先在客戶端啟用任務(wù)的重新排序。將這些行添加到索引.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");

向模型添加任務(wù)順序
接下來，您必須更改后端，使其反映任務(wù)的當(dāng)前順序。向任務(wù)模型再添加一個(gè)方法：

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. 客戶端應(yīng)接收按 SortOrder 值排序的任務(wù)。將突出顯示的行添加到數(shù)據(jù)控制器：

[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. 新任務(wù)也應(yīng)接收默認(rèn)值 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. 在客戶端修改任務(wù)順序時(shí)，應(yīng)更新排序順序。當(dāng)用戶重新排列任務(wù)時(shí)，gantt 將調(diào)用 PUT 操作，并在請(qǐng)求的“target”屬性中提供有關(guān)新任務(wù)位置的信息，以及任務(wù)屬性的其余部分。

添加到 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 { }
}
}

現(xiàn)在讓我們?cè)?PUT （EditTask） 操作中實(shí)現(xiàn)重新排序，修改任務(wù)控制器的放置操作：

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

并添加將更新任務(wù)順序的方法：

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++);
}

應(yīng)用程序安全性

甘特圖不提供任何方法來防止應(yīng)用程序受到各種威脅，例如SQL注入，XSS和CSRF攻擊。確保應(yīng)用程序安全的責(zé)任在于開發(fā)人員 誰實(shí)現(xiàn)后端。閱讀相應(yīng)文章中的詳細(xì)信息。

XSS 保護(hù)
一個(gè)簡(jiǎn)單的解決方案是在將數(shù)據(jù)項(xiàng)的文本屬性發(fā)送到客戶端時(shí)對(duì)其進(jìn)行編碼。

例如，在下面的代碼中，內(nèi)置的 HtmlEncoder 用于轉(zhuǎn)義任務(wù)文本中的 HTML 值。這樣，您的數(shù)據(jù)庫將包含未修改的數(shù)據(jù)，但客戶端將收到安全值

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，并在保存/加載數(shù)據(jù)時(shí)完全剝離任何HTML任務(wù)。

故障排除

如果您已完成上述步驟以實(shí)現(xiàn)甘特圖與 ASP.NET Core 的集成，但甘特圖未在頁面上呈現(xiàn)任務(wù)和鏈接，請(qǐng)查看排查后端集成問題一文。它描述了 找出問題根源的方法。

下一步是什么

現(xiàn)在你有一個(gè)功能齊全的甘特圖。您可以在 GitHub 上查看完整代碼，克隆或下載它并將其用于您的項(xiàng)目。

您還可以查看有關(guān)甘特圖眾多功能的指南或有關(guān)將甘特圖與其他后端框架集成的教程。

DHTMLX Gantt享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺(tái)，性價(jià)比高，可滿足項(xiàng)目管理控件應(yīng)用的所有需求，是較為完善的甘特圖圖表庫

甘特圖控件交流群：764148812

歡迎進(jìn)群交流討論，獲取更多幫助請(qǐng)聯(lián)系