我刚从Blazor开始，试图建立一些简单的项目，看看如何与不同的部件和组件交互。我一直在尝试将dhtmlxGantt包含到Blazor索引页中。它似乎是通过用dhtmlxGantt中的示例替换index.html内容来工作的。然而，结果我只得到了甘特图表，没有任何其他Blazor组件。如何以正确的方式做到这一点，这样我就会在第一页上看到甘特图？
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>DHX.Gantt</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="DHX.Gantt.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet" type="text/css" />
<script src="https://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>
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
索引.razor
@page "/"
@inject IJSRuntime jsRuntime
<h1>Hello, world!</h1>
Welcome to your new app. OOOO 1123154
<SurveyPrompt Title="How is Blazor working for you? jjjj" />
<div id="gantt_here" style="width: 100%; height: 100vh;"></div>
@code{
}
基本上，我需要以某种方式将下面的部分放入Index.razor，否则Index.razon上的甘特图无法找到必要的资源：
<script src="https://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>
考虑注入javascript，以便在Blazor在页面上启动后立即运行。
我们可以通过更改Blazor在首次加载页面时的开始方式来实现这一点。
在wwwroot/index.html(BlazorWebAssembly(或Pages/_Host.cshtml(BlazorServer(中，我们可以修改Blazor初始化，以便在Blazor启动后调用脚本。
例如(Blazor WebAssembly(：
<body>
<!-- The Rest of the wwwroot/index.html -->
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<script src="_framework/blazor.{webassembly|server}.js"
autostart="false"></script>
<script>
Blazor.start().then(function () {
// 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>
</body>
如果您需要任意动态调用此函数(例如，在不同的组件上(，则可以选择。您可以在wwwroot/MyCustomScript.js中创建一个本地.jsjavascript文件，导入https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js并创建一个初始化dhtmlxgantt的方法，我们可以使用IJSRuntime从任何组件调用该方法。
例如：wwwroot/MyCustomScript.js
import 'https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js';
export function InitDHTML() {
// 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");
}
我们可以使用IJSRuntime从任何组件调用该方法。
例如：Pages/Index.razor
// inject the runtime so we can import javascript from local files
@inject IJSRuntime JS
@{
private IJSObjectReference importedDHTML;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
// import the script from the file
importedDHTML = await JS.InvokeAsync<IJSObjectReference>(
"import", "./MyCustomScript.js");
// Initialize dhtmlxgantt
await importedDHTML.InvokeAsync<IJSObjectReference>(
"InitDHTML");
}
}
}