在 Blazor 中，如何从静态 C# 方法中调用 JS 函数？

Question

在剃刀文件中，我注入@inject IJSRuntime JSRuntime. 在后面的代码中，我使用以下代码调用 JS 函数：

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 函数，该函数不是代码隐藏，而是一个单独的 *.cs 文件：

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

我尝试过这种方法但JSRuntime始终如此null。如何从静态 C# 方法调用 JS？

Answer 1

• 假设它Baz始终是一个static方法，那么您需要将IJSRuntime对象传递到Bar.Baz.
  • 不要试图IJSRuntime通过 的static字段或属性传递class Bar：这会破坏您的应用程序，因为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 代码隐藏类中调用它，如下所示：

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

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