将 JavaScript 组件包含到 Blazor 组件中

Question

我只是从 Blazor 开始，尝试建立一些简单的项目，看看如何与不同的零件和组件进行交互。 我一直在尝试将 dhtmlxGantt 包含到 Blazor 索引页中。 它似乎通过用 dhtmlxGantt 中的示例替换 index.html 内容来工作。 然而，结果我只得到甘特图，没有任何其他 Blazor 组件。 如何以正确的方式进行操作，以便在第一页 index.razor 上看到甘特图？

索引.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>

Answer 1

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

我们可以实现此目的的一种方法是更改 Blazor 在页面首次加载时开始的方式。

在wwwroot/index.html (Blazor WebAssembly) 或Pages/_Host.cshtml (Blazor Server) 我们可以修改 Blazor 初始化以在 Z98AD8B3C99B3CA16F1F7FA84EE6 启动后调用脚本

例如（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>

如果您需要动态地任意调用此 function（例如，在不同的组件上），另一种选择可能是。 您可以在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 组件中

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-05-16 19:28:52

将 JavaScript 组件包含到 Blazor 组件中

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-05-16 19:28:52

解决方案1
2 已采纳 2021-05-16 19:28:52