福利视频导航福利,91免费高清视频,午夜视频国产

Gantt圖庫dhtmlxGantt教程：如何在服務器端使用ASP.NET Core 2創建甘特圖？

翻譯|使用教程|編輯：鮑佳佳|2021-05-24 10:05:07.003|閱讀 87 次

概述：本教程為您提供有關如何在服務器端使用ASP.NET Core 2創建Gantt的分步說明。為了組織與數據庫的通信，使用了實體框架核心。該應用程序是在Visual Studio 2017的幫助下構建的。

本教程為您提供有關如何在服務器端使用ASP.NET Core 2創建Gantt的分步說明。為了組織與數據庫的通信，使用了實體框架核心。該應用程序是在Visual Studio 2017的幫助下構建的。

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

步驟1.創建一個項目

啟動Visual Studio 2017并創建一個新項目。打開文件菜單，然后選擇：新建->項目。

接下來，選擇“ ASP.NET Core Web應用程序”，并將其命名為DHX.Gantt。

dhtmlxGantt與ASP.NET Core 2創建項目

選擇一個空模板。

dhtmlxGantt與ASP.NET Core 2創建項目

因此，您已經創建了一個項目，可以繼續為Gantt添加標記和腳本。

第2步。添加甘特標記和JS

轉到wwwroot并創建一個index.html文件。

dhtmlxGantt與ASP.NET Core 2創建項目

在新創建的文件中，為甘特圖制作一個簡單的頁面。

請注意，在此演示中，從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文件夾中搜索以下文件：
- index.html
- index.htm
- default.html
- default.htm因此，您可以選擇其中的任何一個，而在本教程中使用“ index.html”。 UseDefaultFiles()只是一個實際上不提供文件服務的URL重寫器。為此，您還需要添加UseStaticFiles()文件。
app.UseStaticFiles()–負責提供wwwroot文件夾中存在的所有靜態文件。

完成后，在運行應用程序時頁面上將出現一個空的甘特圖。請注意，由于gantt.load()被調用，因此顯示了右上角的“無效數據”標簽，因為仍然沒有適當的后端來提供數據。實施控制器后，甘特將能夠顯示任務和鏈接。

帶有ASP.NET Core 2的dhtmlxGantt添加了甘特圖