在 Blazor 中，如何从 static C# 方法中调用 JS function？

Question

在 razor 文件中，我注入@inject IJSRuntime JSRuntime 。 在后面的代码中，我使用以下代码调用 JS function：

private async Task DownloadPdf(bool foo)
{
    await using var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./create-pdf.js");
    await module.InvokeVoidAsync("generatePdf", foo);
}

这很好用，但现在我需要从 C# 代码调用 JS function，它不是代码隐藏，而是一个单独的 *.cs 文件：

public static class Bar
{
    public static double Baz()
    {
        // do something
        // call JS function
        return baz;
    }
}

我试过这种方法，但JSRuntime始终是null 。 如何从我的 static C# 方法调用 JS？

Answer 1

• 假设Baz始终是static方法，那么您需要将IJSRuntime object 传递到Bar.Baz中。
  • 不要试图通过IJSRuntime字段或class Bar上的属性传递static ：这将破坏您的应用程序，因为static数据由所有线程共享。
• 此外，看起来IJSRuntime.InvokeAsync是一个Task返回async方法，您将需要使Bar.Baz同样异步。

像这样：

public static class Bar
{
    public static async Task<Double> BazAsync( IJSRuntime js, CancellationToken cancellationToken = default )
    {
        if( js is null ) throw new ArgumentNullException(nameof(js));

        // do something

        // call JS function:
        _ = await js.InvokeAsync<TReturnValue>( identifier: "someFunction", cancellationToken, args: new Object[] { "abc", 123 } );


        // return
        Double baz = 123.45d;
        return baz;
    }
}

然后你可以从你的 Blazor 代码隐藏 class 中调用它，如下所示：

public partial class MyCodeBehindClass
{
    [Inject]
    IJSRuntime JSRuntime { get; set; }

    private async Task DoSomethingAsync()
    {
        Double baz = await Bar.BazAsync( this.JSRuntime );
    }
}