JavaScript Interop and ASP.NET Core Blazor

Blazor is here, Will JavaScript be dead? I would say that the answer is NO at-least for now.

Even though Blazor is creating revolution in web technology, it need JavaScript to use web features that cannot be achieved by Blazor for now. To do this Blazor team has provided JavaScript Interop support that will enable us to do use JavaScript functions from C# and vice versa.

Invoke JavaScript function from C#

JavaScript function invoking is handled in Blazor using Microsoft.JsInterop package.

1. Inject JSRuntime in the component page.

2. JSRuntime instance has a method named InvokeAsync using which you can invoke JS functions. JSRuntime will search the given method in the window object, hence place your function in the window object. I have placed my function in jsexample.js file.

3. We need to place the client resources in the wwwroot folder and hence place the jsexample.js file in the wwwroot folder and refer it in the _Host.cshtml file.

4. The second parameter of the InvokeAsync method will accept the params which will be passed as the arguments to the JavaScript function.

Handling return value from JavaScript function

We can get the return value from the invoked JavaScript function and use it at the C# end. The InvokeAsync method will return value from the invoked JS function.

Since here we need to wait for the result from the JavaScript function invoking, I have marked button click with async keyword and used awaitkeyword to get the result from the InvokeAsync function.

Invoking C# method from JavaScript

To call C# methods from JavaScript, Blazor provide window.DotNet object in the client side which contains methods to invoke C# functions.

1. The method should be static
2. The method should be decorated with JsInvokable attribute and give identifier to be used at the JavaScript side.

Syntax:
DotNet.invokeMethodAsync(APPLICATION_NAME, FUNCTION_NAME, [ARGS,...]);

Example:
DotNet.invokeMethodAsync("BlazorKeyApp", "invokeFromJs", "Hello World");

Invoking class instance method from JavaScript

It is also possible to call a class method and to do so we need to send the class instance to the client side by wrapping it using DotNetObjectRef.Create method and invoke the appropriate method using invokeMethodAsync method of that particular DotNet class instance.

To explain this, I have created the below Helper class and going to invoke the MyMethod from this instance using JsInterop. Here the MyMethod must be decorated with JsInvokable attribute.

Now you can get the DotNet instance at the client side using the below JavaScript function and invoke that particular instance method using invokeMethodAsync.

Handling return value from C# method

The invokeMethodAsync will return a Promise object, you can get the return value by simply adding then function handler as follows.

DotNet.invokeMethodAsync(
            "BlazorKeyApp", 
            "invokeFromJs", 
            "Hello World").then((data) => console.log(data))

You can perform error handling by adding catch function to the same method.

Conclusion

1. Don`t send Large data through JS Interop as it would cause buffer side exceeded exception.
2. Don`t send DOM elements through JS Interop.
3. Try to reduce the number of calls using JS Interop.

References