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

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

DHTMLX Gantt 最新下載

甘特圖控件交流群：764148812

錯誤處理

異常篩選器可用于捕獲 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享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是較為完善的甘特圖圖表庫

甘特圖控件交流群：764148812

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