我刚刚开始使用 Blazor，尝试建立一些简单的项目来了解如何与不同的部件和组件进行交互。我一直在尝试将 dhtmlxGantt 包含到 Blazor 索引页中。它似乎通过用 dhtmlxGantt 中的示例替换 index.html 内容来工作。然而，结果我只得到甘特图，没有任何其他 Blazor 组件。如何以正确的方式执行此操作，以便我能在首页index.razor 上看到甘特图？
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.razor 上的甘特图无法找到必要的资源:
<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>
最佳答案
考虑injecting the javascript以便它在 Blazor 在页面上启动后立即运行。
我们可以实现此目的的一种方法是更改 Blazor 在页面首次加载时启动的方式。
在 wwwroot/index.html (Blazor WebAssembly) 或 Pages/_Host.cshtml (Blazor 服务器)我们可以修改 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>
如果您需要动态地任意调用此函数(例如在不同的组件上)，则可以选择另一种选择。您可以创建本地 .js javascript 文件 wwwroot/MyCustomScript.js并导入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");
}
}
}
关于javascript - 将 JavaScript 组件包含到 Blazor 组件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67560407/