Blazor - 从 C# 类调用 JavaScript

Posted 2023-03-27

【中文标题】Blazor - 从 C# 类调用 JavaScript

【英文标题】：Blazor - Call JavaScript from C# class

【发布时间】：2021-10-10 07:49:35

【问题描述】：

这是我想要实现的目标：

我在 Blazor WASM 项目中有一个（普通）类。我想从我的类中调用一个 javascript 函数。 如果我想从 Razor 组件执行此操作，它工作正常，我将 IJSruntime 和 invokevoidasync 注入我的 JavaScript。

但是当我尝试在课堂上这样做时会出错。 首先我尝试像这样注入它：

[Inject]
IJSRuntime JSRuntime  get; set; 

但最终出现错误消息：值不能为空。 （参数'jsRuntime'） 我从this 帖子中了解到我必须“以传统方式注入它”，所以我这样做了：

public class InvokeJavaScript

    private readonly IJSRuntime jSRuntime;

    public InvokeJavaScript(IJSRuntime jSRuntime)
    
        this.jSRuntime = jSRuntime;
    

    public async void InvokeMyJs()
    
        await jSRuntime.InvokeVoidAsync("giveMeAMessage");
    

但从那时起我就被卡住了，我知道这一定是一些关键的 .NET 知识，但我在这里遗漏了一部分。我想调用“InvokeMyJs”方法，例如：

InvokeJavaScript ij = new InvokeJavaScript();
ij.InvokeMyJs();

但是知道我遇到了一个错误：没有给出与“InvokeJavaScript.InvokeJavaScript(IJSRuntime)”所需的形参“jSRuntime”相对应的参数

我得到错误对我来说很有意义，但我不知道如何修复它，我必须向 InvokeJavaScript(IJSRuntime jSRuntime) 发送什么参数以及如何正确执行？谁能举个例子？

【问题讨论】：

您需要提供您的班级InvokeJavaScript 进行注入。类似services.AddScoped<InvokeJavaScript>()....

好的，我将它添加到我的启动课程中，但是如何从那里开始？

这个类然后是可注入的。然后你可以将它注入到任何你想要的组件中。

另外，请注意async void。最好将其设为async Task 并等待它，除非您非常确定您需要开火&忘记模式。

【参考方案1】：

当您使用 DI 时，您必须遵循它。 一般来说，这意味着避免new，如：

InvokeJavaScript ij = new InvokeJavaScript();  // no parameter

在 Startup 中将 InvokeJavaScript 注册为服务。 在需要的地方注入。

程序.cs

builder.Services.AddTransient<InvokeJavaScript>();

SomeComponent.razor

@inject InvokeJavaScript ij 

【讨论】：

好的，这是为了将它注入 Razor，但我怎样才能从“普通”类中进行这项工作？那么从另一个类调用我的 InvokeJavaScript 类中的 Invokemyjs 方法？

再次使用相同的技巧：注入它。因此，也将“正常”类注册为可注入的。正如我所说，DI 一路走来。