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

DHTMLX JavaScript UI 庫所開發的 JavaScript 組件易于使用且功能豐富，非常適合任何領域和任何復雜性的解決方案，能夠節省創建和維護業務應用程序的時間，提高生產力。

DHTMLX Gantt 最新下載

錯誤處理

為了處理錯誤，你需要聲明一個特殊的中間件類，它將捕獲運行時的異常并寫入響應。接下來，它將被添加到應用程序的請求管道中。按照下面的步驟進行：

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

歡迎進群交流討論，獲取更多幫助請聯系