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.

In this post we are going to see how to use JavaScript Interop in Blazor application and how to invoke JavaScript function from C# and vice versa.

Invoke JavaScript function from C#

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

A simple JavaScript function call from C# involves the below steps.

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.

The following shows the result of the above invoke operation.

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.

Now I have refactored the previously used function as below to handle return value from the 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.

Now the result will be as follows.

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.

The method to be called from JavaScript should have the below mentioned constrains.

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.

Now the proper C# method which can be invoked from the JavaScript side will look like below.

You can invoke the method showed in the above image using the below JavaScript code.

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

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

The output will be as follows.

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.

And in the button click, I am sending the class instance reference to the client side as follows.

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

The following shows the output of the above explained operation.

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

I hope that this post have given you some idea about Blazor JS Interop concept. You can use the JS Interop to leverage the web features that cannot be achieved, at least for now.

I would recommend to avoid the below things while using JS interop.

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.

Also I would say that adhering to the JS Interop completely is a bad idea as it would results in stability issues and performance.

Happy WASMing….

References

https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0

If you find this article interesting, follow me on Twitter for more..