翻譯|使用教程|編輯:鮑佳佳|2021-05-24 10:05:07.003|閱讀 87 次
概述:本教程為您提供有關如何在服務器端使用ASP.NET Core 2創建Gantt的分步說明。為了組織與數據庫的通信,使用了實體框架核心。該應用程序是在Visual Studio 2017的幫助下構建的。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
本教程為您提供有關如何在服務器端使用ASP.NET Core 2創建Gantt的分步說明。為了組織與數據庫的通信,使用了實體框架核心。該應用程序是在Visual Studio 2017的幫助下構建的。
dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求,是最完善的甘特圖圖表庫。它允許你創建動態甘特圖,并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt,你可以顯示活動之間的依賴關系,顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。
步驟1.創建一個項目
啟動Visual Studio 2017并創建一個新項目。打開文件菜單,然后選擇:新建->項目。
接下來,選擇“ ASP.NET Core Web應用程序”,并將其命名為DHX.Gantt。
選擇一個空模板。
因此,您已經創建了一個項目,可以繼續為Gantt添加標記和腳本。
第2步。添加甘特標記和JS
轉到wwwroot并創建一個index.html文件。
在新創建的文件中,為甘特圖制作一個簡單的頁面。
請注意,在此演示中,從CDN添加了甘特文件。如果您擁有該組件的專業版,則需要手動將gantt文件添加到您的項目中。
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link
rel="stylesheet" type="text/css" />
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// specifying the date format
gantt.config.date_format = "%Y-%m-%d %H:%i";
// initializing gantt
gantt.init("gantt_here");
// initiating data loading
gantt.load("/api/data");
// initializing dataProcessor
var dp = new gantt.dataProcessor("/api/");
// and attaching it to gantt
dp.init(gantt);
// setting the REST mode for dataProcessor
dp.setTransactionMode("REST");
});
</script>
</head>
<body>
<div id="gantt_here" style="width: 100%; height: 100vh;"></div>
</body>
</html>
加載頁面時,除了初始化甘特圖 外,還會立即調用數據加載并進行 dataProcessor設置,因此用戶對甘特圖所做的所有更改都將保存到后端。后端尚未實現,因此以后會更有意義。
接下來轉到Startup.cs,并告訴應用程序使用index.html頁面。為此,您需要配置該應用程序以提供該wwwroot文件夾中的靜態文件。它在實現Configure方法調用的app.UseStaticFiles()方法。您可以在此處找到更多詳細信息。
我們還需要將所需的中間件添加到Startup.cs中,Configure()方法是用突出顯示的兩行代碼替換方法中的“ Hello world”存根:
Startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
namespace DHX.Gantt
{
public class Startup
{
// This method gets called by the runtime.
// Use this method to add services to the container.
// For more information on how to configure your application,
// visit //go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime.
// Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseDefaultFiles();
app.UseStaticFiles();
}
}
}
添加的2個中間件是:
app.UseDefaultFiles()–允許提供默認文件。它將在wwwroot文件夾中搜索以下文件:
完成后,在運行應用程序時頁面上將出現一個空的甘特圖。請注意,由于gantt.load()被調用,因此顯示了右上角的“無效數據”標簽,因為仍然沒有適當的后端來提供數據。實施控制器后,甘特將能夠顯示任務和鏈接。
現在基本部分已經完成,現在是實現后端的時候了。讓我們從實現模型類開始,然后繼續到WebAPI控制器。
未完待續……下一章繼續講解如何創建模型和數據庫!、
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: