如何正确将dhtmlxGantt JavaScript组件集成到Blazor的Index.razor页面

问题根因 #

你当前的问题是：dhtmlxGantt初始化脚本执行时，Blazor还没完成页面渲染，Index.razor里的gantt_here容器还不存在，要么初始化失败，要么直接把甘特图写死在index.html里覆盖了Blazor的挂载节点，导致其他Blazor组件无法加载。

步骤1：修改index.html #

保留dhtmlxGantt的静态资源引用，删除原来写在DOMContentLoaded里的初始化逻辑，新增一个全局的甘特图初始化方法：

<!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" />
  <!-- 保留dhtmlx的css和js引用 -->
  <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>
  <!-- 新增全局初始化方法，删掉原来的DOMContentLoaded监听逻辑 -->
  <script>
    window.initGantt = 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>
  <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>

步骤2：修改Index.razor #

在组件渲染完成的生命周期回调里，通过JS互操作调用刚才定义的初始化方法，Razor组件内不允许直接嵌入script标签，必须通过这种方式调用JS逻辑：

@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: 600px;"></div>

@code{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 只有第一次渲染完成后执行初始化，避免重复初始化
            await jsRuntime.InvokeVoidAsync("initGantt");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

注意事项 #

• 原来的甘特图容器高度设为100vh会占满整个视口，挤压上方其他Blazor组件的显示空间，可以根据需求调整为固定高度比如600px，或者用flex布局分配高度
• 如果后续需要把Blazor侧的甘特图数据传递给dhtmlxGantt，可以给initGantt方法加参数，在调用时把C#侧的数据序列化为JSON后传入即可

内容的提问来源于stack exchange，提问作者10101