How to call a static JavaScript method from Blazor C# code

Question

First, my JS:

class MyClass {
    static myMethod() {
        alert("TEST");
    }
}

I have my JS runtime injected like this:

[Inject] protected IJSRuntime Js { get; set; }

I want to call a static method like this:

Js.InvokeVoidAsync("MyClass.myMethod");

but I get an error:

Microsoft.JSInterop.JSException: Could not find 'MyClass' in 'window'.

Is there a sane, reasonable way around this, or only by adding window.MyClass = MyClass to my JS?

Nope that's the way to do it. learn.microsoft.com/en-us/aspnet/core/blazor/… — David Masterson
– David Masterson, Commented Nov 16, 2019 at 8:10
Make a wrapper function in JS that calls the class. This way has it's flaws but when you have a million lines of code left to debug, fast and simple has it's benefits as well. — user160357
– user160357, Commented Dec 16, 2022 at 4:39

Michael Washington · Accepted Answer · 2019-11-16 14:18:51Z

4

Try this (assuming server side Blazor).

In your _Host.cshtml file:

(function () {
    window.MyClass = {
        myMethod: function () {
            return alert('TEST');
        }
    };
})();

in .razor file (at top):

@*Inject JSRuntime to allow JavaScript Interop *@
@inject IJSRuntime JSRuntime

In a method in your .razor file:

await JSRuntime.InvokeAsync<string>(
            "MyClass.myMethod", null
            );

See: Blazor JavaScript Interop

answered Nov 16, 2019 at 14:18

Michael Washington

3,10522 silver badges29 bronze badges

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

1 Comment

Postlagerkarte Over a year ago

What is the benefit wrapping it into an IIFE? You still register MyClass into global scope, so the encapsulation is useless, isn't it?

Postlagerkarte · Accepted Answer · 2019-11-16 10:25:41Z

0

Yes, registering your method with the window object is correct.

The relevant part of the source code can be found here:

https://github.com/aspnet/Extensions/tree/master/src/JSInterop

Peeking into it you will find:

invokeJSFromDotNet: (identifier: string, argsJson: string) => { ... }

where

@param identifier Identifies the globally-reachable function to invoke.

Taking a look at the findJSFunction you see the part that checks if the given identifier is registered with the window object and if not generates the error you see:

function findJSFunction(identifier: string): Function {

(...)

    let result: any = window;
    let resultIdentifier = 'window';
    let lastSegmentValue: any;
    identifier.split('.').forEach(segment => {
      if (segment in result) {
        lastSegmentValue = result;
        result = result[segment];
        resultIdentifier += '.' + segment;
      } else {
        throw new Error(`Could not find '${segment}' in '${resultIdentifier}'.`);
      }
    });

answered Nov 16, 2019 at 10:25

Postlagerkarte

7,1775 gold badges39 silver badges54 bronze badges

1 Comment

Harry Over a year ago

Hm, classes are reachable via eval, which is not evil when used correctly. I made my own version of "call static" and "create instance" code, I wonder if there is a way to extend JSInterop to use those methods. I mean I made an extension class, but it uses extra JS to work.

Collectives™ on Stack Overflow

How to call a static JavaScript method from Blazor C# code

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related