In Blazor, how can I call a JS function from within a static C# method?

Question

In a razor file, I inject @inject IJSRuntime JSRuntime. In the code behind, I invoke a JS function with the following code:

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

This works well but now I need to call a JS function from C# code that is not code behind but a separate *.cs file:

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

I tried this approach but JSRuntime is always null. How can I invoke JS from my static C# method?

Not using `static` members - unless you add an `IJSRuntime` method parameter. — Dai, Oct 07 '22 at 09:29
But `Bar` is `static` and if possible, I'd like to keep it `static`. What do you mean with adding an "`IJSRuntime` method parameter"? — Flippowitsch, Oct 07 '22 at 09:43

Dai · Accepted Answer · 2022-10-07T10:38:04.563

4

Assuming that Baz will always be a static method then you will need to pass in the IJSRuntime object into Bar.Baz.
- Do not be tempted to pass IJSRuntime via a static field or property on class Bar: this will break your application as static data is shared by all threads.
Also, seeming as IJSRuntime.InvokeAsync is a Task-returning async method, you will need to make Bar.Baz similarly also async.

Like so:

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;
    }
}

Then you can call it from your Blazor code-behind class like so:

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

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

edited Oct 07 '22 at 10:38

answered Oct 07 '22 at 09:44

Dai

141,631
28
261
374

In a further *.cs file with static class there is a property `public static bool Xyz`. In the setter I need `Bar.BazAsync(this.JSRuntime)` but what is `this.JSRuntime`? – Flippowitsch Oct 07 '22 at 10:11
@Flippowitsch `this.JSRuntime` is the `[Injected] IJSRuntime JSRuntime` in your code-behind. – Dai Oct 07 '22 at 10:14
@Flippowitsch You cannot invoke `async` methods in property getters nor setters. You need to reconsider your software-design. – Dai Oct 07 '22 at 10:14
But the further *.cs file is also separate and not a code behind file. OK agreed, I must reconsider. But is it really this complicated to invoke a JS function? Is there another option? – Flippowitsch Oct 07 '22 at 10:22
@Flippowitsch _"But is it really this complicated to invoke a JS function?"_ - **yes** - think carefully about the sheer amount of voodoo that goes on inside Blazor. – Dai Oct 07 '22 at 10:22
OK. Could you please help with what `this.JSRuntime` is in C# that is not code behind? – Flippowitsch Oct 07 '22 at 10:25
@Flippowitsch I already told you that `this.JSRuntime` is the `[Injected] IJSRuntime JSRuntime` in your code-behind. To use that `IJSRuntime` object instance elsewhere in your application (i.e. in other classes) you need to pass it as a method parameter (_from_ your code-behind class to whereever it's needed), like how `BazAsync` above has the `IJSRuntime js` parameter. – Dai Oct 07 '22 at 10:26

In Blazor, how can I call a JS function from within a static C# method?

1 Answers1