步骤二：添加甘特标记和JS

转到wwwroot并创建一个index.html文件。

在新创建的文件中创建一个简单的甘特图页面。

注意，在这个演示中gantt文件是从CDN添加的，如果您拥有该组件的专业版则需要手动向项目中添加gantt文件。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="//cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css"
rel="stylesheet" type="text/css" />
<script src="//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控制器。

彩票走势图

步骤二：添加甘特标记和JS

用科技创就卓越

Create excellence with technology