日韩成人电影导航,黃色高潮片三三級三,午夜在线免费

帶有ASP.NET Core的dhtmlxGantt教程：如何創(chuàng)建一個(gè)項(xiàng)目

翻譯|使用教程|編輯：楊鵬連|2020-08-10 13:57:12.870|閱讀 215 次

概述：本教程為您提供有關(guān)如何在服務(wù)器端使用ASP.NET Core 2 創(chuàng)建Gantt的分步說(shuō)明。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿(mǎn)足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。它允許你創(chuàng)建動(dòng)態(tài)甘特圖，并以一個(gè)方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt，你可以顯示活動(dòng)之間的依賴(lài)關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動(dòng)到樹(shù)結(jié)構(gòu)。

點(diǎn)擊下載dhtmlxGantt試用版

步驟1.創(chuàng)建一個(gè)項(xiàng)目

啟動(dòng)Visual Studio 2017并創(chuàng)建一個(gè)新項(xiàng)目。打開(kāi)文件菜單，然后選擇：新建->項(xiàng)目。
接下來(lái)，選擇ASP.NET Core Web Application，并將其命名為DHX.Gantt。

dhtmlxGantt???ASP.NET Core 2?????oé?1??®

選擇一個(gè)空模板。

因此，您已經(jīng)創(chuàng)建了一個(gè)項(xiàng)目，可以繼續(xù)為Gantt添加標(biāo)記和腳本。

步驟2.添加甘特標(biāo)記和JS

轉(zhuǎn)到wwwroot并創(chuàng)建一個(gè)index.html文件。

在新創(chuàng)建的文件中，為甘特圖制作一個(gè)簡(jiǎn)單的頁(yè)面。

請(qǐng)注意，在此演示中，從CDN添加了甘特文件。如果您擁有該組件的專(zhuān)業(yè)版，則需要手動(dòng)將gantt文件添加到您的項(xiàng)目中。

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>

加載頁(yè)面時(shí)，除了初始化甘特圖之外，還會(huì)立即調(diào)用數(shù)據(jù)加載并進(jìn)行 dataProcessor設(shè)置，因此，用戶(hù)對(duì)甘特圖所做的所有更改都將保存到后端。后端尚未實(shí)現(xiàn)，因此以后會(huì)更有意義。

接下來(lái)轉(zhuǎn)到Startup.cs，并告訴應(yīng)用程序使用index.html頁(yè)面。為此，您需要配置該應(yīng)用程序以從該wwwroot文件夾提供靜態(tài)文件。它在實(shí)現(xiàn)Configure方法調(diào)用的app.UseStaticFiles()方法。您可以在此處找到更多詳細(xì)信息。

我們還需要通過(guò)將方法中的“ Hello world”存根替換為突出顯示的兩行代碼，來(lái)將所需的中間件添加到Startup.csConfigure()：

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個(gè)中間件是：
app.UseDefaultFiles()–允許提供默認(rèn)文件。它將在wwwroot文件夾中搜索以下文件：

index.html
索引
default.html
default.htm因此，您可以選擇其中的任何一個(gè)，而在本教程中使用“ index.html”。 UseDefaultFiles()只是實(shí)際上不提供文件的URL重寫(xiě)器。為此，您還需要添加UseStaticFiles()文件。
app.UseStaticFiles()–負(fù)責(zé)提供wwwroot文件夾中存在的所有靜態(tài)文件。

完成后，在運(yùn)行應(yīng)用程序時(shí)頁(yè)面上將出現(xiàn)一個(gè)空的甘特圖。請(qǐng)注意，由于gantt.load()被調(diào)用，因此顯示了右上角的“無(wú)效數(shù)據(jù)”標(biāo)簽，因?yàn)槿匀粵](méi)有適當(dāng)?shù)暮蠖藖?lái)提供數(shù)據(jù)。實(shí)施控制器后，甘特將能夠顯示任務(wù)和鏈接。