在 Blazor 应用程序中自动注入 javascript

Posted 2023-03-27

【中文标题】在 Blazor 应用程序中自动注入 javascript

【英文标题】：Auto inject javascript in blazor application

【发布时间】：2018-09-05 11:36:19

【问题描述】：

我正在开发 Blazor 扩展库。

这个库中的一件事是重用 javascript alert() 方法。 我知道怎么做，这涉及在 .cshtml 页面中添加它：

<script>
  Blazor.registerFunction('Alert', (message) => 
      alert(message);
  );
</script>

这在我的代码中：

public void Alert(string message)

     RegisteredFunction.Invoke<object>("Alert", message);

如果您使用我的包（或者可能总是），我希望 javascript 部分以某种方式自动注入到 html 中。不确定这是否可能（还）

对此有什么想法吗？

【问题讨论】：

也许通过使用 nuget 安装脚本

【参考方案1】：

编辑

自 blazor 0.2 以来，有一种更受支持的方式来执行此操作。以 blazorlib 模板为例：

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

dotnet new blazorlib

0.1 个答案

我最终创建了包含我的 javascript 的自己的 blazor 组件，如下所示：

public class BlazorExtensionScripts : Microsoft.AspNetCore.Blazor.Components.BlazorComponent


    protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder)
    
        builder.OpenElement(0, "script");
        builder.AddContent(1, "Blazor.registerFunction('Alert', (message) =>  alert(message); );");
        builder.CloseElement();
    

然后像这样将它添加到我的 app.cshtml 中：

@addTagHelper *, BlazorExtensions

<Router AppAssembly=typeof(Program).Assembly />

<BlazorExtensionScripts></BlazorExtensionScripts>

【讨论】：

您能否解释一下@addTagHelper 在 Blazor 中的工作方式

这是因为我的组件位于另一个程序集中。这是一种解决方法：github.com/aspnet/Blazor/issues/394

Balzor.registerFunction 不应直接在razor 或component 中使用。当您重新使用该组件时，您将遇到问题。更多信息github.com/aspnet/Blazor/issues/451

其实这里暴露的方法应该还是可以的，因为标签在Router标签下，应该在启动时调用一次。另外我想我们可以假设这段代码应该被调用一次，我们可以添加一个静态布尔标记，表明该组件已经初始化。

另外，在我自己的项目扩展方面，我创建了一个小工具 (github.com/Daddoon/Daddoon.Blazor/tree/master/…)，它读取为输入 args .js 文件，并输出一个类似 .cs 文件的 BlazorComponent。当然适合我的项目。在开发过程中，您可以使用像这样的简单策略来维护 Blazor .cs 文件之外的所有 js 脚本代码。您只需在包扩展项目的 PreBuild 事件上调用 JstoCsharp 工具。