Blazor - Call JavaScript from C# class

Question

Here is what I want to achieve:

I have a (normal) class in a Blazor WASM project. I want to invoke a JavaScript function from my class. If I want to do this from a Razor component it is working fine, I inject IJSruntime and invokevoidasync to my JavaScript.

But it goes wrong when I try to do it from a class. First I tried to inject it like this:

[Inject]
IJSRuntime JSRuntime { get; set; }

But ended up with error message: Value cannot be null. (Parameter 'jsRuntime') I learned from this post that I have to "Inject it in the traditonal way", so I did this:

public class InvokeJavaScript
{
    private readonly IJSRuntime jSRuntime;

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

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

But from there on I am stuck, I know that this must be some key .NET knowledge but I am missing a piece here.. I want to call the "InvokeMyJs" methode like:

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

But know I am facing an error: There is no argument given that corresponds to the required formal parameter 'jSRuntime' of 'InvokeJavaScript.InvokeJavaScript(IJSRuntime)'

That I get the error makes sense to me but I dont know how to fix it, what parameter must I send to InvokeJavaScript(IJSRuntime jSRuntime) and how do I do it correctly? Can anyone give an example?

You need to provide your class InvokeJavaScript for injection. Something like services.AddScoped<InvokeJavaScript>().... — Brian Parker
– Brian Parker, Commented Aug 5, 2021 at 9:48
Ok, I added that to my startup class, but how to go from there? — Mart Apon
– Mart Apon, Commented Aug 5, 2021 at 9:56
This class is then injectable. You can then inject it into any component you want. — Brian Parker
– Brian Parker, Commented Aug 5, 2021 at 10:05
Also, be very carful with async void. Better make it async Task and await it unless you are very very sure you need fire&forget mode. — Henk Holterman
– Henk Holterman, Commented Aug 5, 2021 at 10:13

Karl Grittner · Accepted Answer · 2024-08-13 18:12:22Z

2

Initialize the class from the .razor page in @code {}

@inject IJSRuntime JsRuntime
  @code {
   protected override void OnInitialized()
   {
       InvokeJavaScript = new(JsRuntime);
   }}

answered Aug 13, 2024 at 18:12

Karl Grittner

362 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Blazor - Call JavaScript from C# class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related