文檔金喜正規買球>>DHTMLX中文文檔>>步驟二：添加甘特標記和JS
步驟二：添加甘特標記和JS
轉到wwwroot并創建一個index.html文件。
在新創建的文件中創建一個簡單的甘特圖頁面。
注意，在這個演示中gantt文件是從CDN添加的，如果您擁有該組件的專業版則需要手動向項目中添加gantt文件。
<!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，因此用戶對甘特圖所做的所有更改都將保存到后端。目前后端還沒有實現，所以以后會更有意義。
接下來轉到Program.cs并告訴應用程序使用index.html頁面，為了做到這一點您需要配置應用程序來提供來自wwwroot文件夾的靜態文件。為此，您需要添加app.UseDefaultFiles()方法。
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days.
// You may want to change this for production scenarios,
// see //aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.Run();
app.UseDefaultFiles()方法允許提供默認文件，它將在wwwroot文件夾中搜索以下文件：
- index.html
- index.htm
- default.html
- default.htm
因此，您可以選擇其中的任何一個，而在本教程中使用“index.html”。UseDefaultFiles()只是一個url重寫器，它實際上并不服務于文件，為此您還需要添加UseStaticFiles()文件。
完成后，在運行應用程序時頁面上應該出現一個空的甘特。注意，右上角出現“無效數據”標簽是因為調用了gantt.load()，因為仍然沒有適當的后端來提供數據。當控制器被實現時，gantt將能夠顯示任務和鏈接。
現在基本部分已經完成，是時候實現后端了，讓我們從實現模型類開始然后繼續到WebAPI控制器。
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線