将 JavaScript 组件包含到 Blazor 组件中

Question

我刚开始使用 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>

Index.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>

Answer 1

考虑 injecting the javascript 以便它在 Blazor 在页面上启动后立即运行。

我们可能能够实现此目的的一种方法是更改 Blazor 在首次加载页面时的启动方式。

在wwwroot/index.html（Blazor WebAssembly）或Pages/_Host.cshtml（Blazor Server）中，我们可以修改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 中创建一个本地 .js javascript 文件并导入 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 组件包含到 Blazor 组件中

Include JavaScript component into Blazor component

.net

javascript

c#

blazor

blazor-webassembly