I ❤️ .NET

In this article let's learn about Javascript Interop and Javascript Isolation.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Styles and CSS Isolation.

Table of Contents

1. Introduction
2. Javascript Interop
   1. Calling JS functions from .Net
   2. Calling .Net methods from JS
3. Javascript Isolation
4. Summary

Introduction

In Blazor WASM we should try to have minimal usage of Javascript. Though Blazor WASM runs on top of web assembly, we might sometime require access to javascript for certain operations like displaying alert, prompt setting theme on html element, focusing a suggestion from autocomplete input on up and down keyboard key press, getting viewport size or at few cases we might need to use the existing javascript library to render chart, grid, etc.

The above usecases can be solved in two different ways as mentioned below.

Javascript Interop

To start using Javascript using JS interop, first we need our javascript code in a separate js file place inside wwwroot and we need to inject IJSRuntime in the component to invoke our javascript function.

Let's look on how to display a simple javascript alert in blazor. We'll start with defining a blazorInterop object just to make sure we don't pollute the global window object. Now let's register a simple displayAlert function which will take text and display it in javascript alert().

Calling JS from .Net

Befor we proceed on invoking the function make sure to add a reference to your jsvascript file in index.html. Now let's inject IJSRuntimr into our component and call blazorInterop.displayAlert("I ❤️ DotNet") using InvokeVoidAsync as we don't have any return value from the javascript function.

Voila.. now we are using javascript logics in our blazor app. That's a fairly simple example. Let's look at another example where we need some values from javascript function. If we want to find the current viewport width and height, then we can levearge javascript to get window height and width and return it back to blazor. The steps are same like before except this time we need to call the javascript function using InvokeAsync<WindowDimensions>("blazorInterop.getViewportDimensions").

Calling .Net from JS

There are situations where you need to call a .Net method from JS function. One example is clicking on a point in chart to display additional information. Now you need to pass some information from JS to .NET and make API call to retrieve additional information. You can call static method or .NET instance method from JS. Let's see how to do this in blazor.

Invoking Static Method

Calling a static method is pretty simple. All you need to do is to add [JSInvokable] attribute to your .NET static method and call the static .Net method from JS using DotNet.invokeMethod('Namespace', '.Net Static Method Name').

Invoking Instance Method

Calling an component instance method needs an .NET instance by reference to be passed to JS. This can be done by warpping the component instance inside DotNetObjectReference<ComponentInstance> and calling create on it. Then we can invoke .NET method from JS using InvokeMethod or InvokeMethodAsync from the passed instance reference. Finally we need to dispose the DotNetObjectReference.

Javascript Isolation

Blazor supports JS isolation in standard JS modules. This has the following benefits:

1. No need to add reference to js file in index.html
2. Imported JS no longer pollutes the global namespace.
3. Consumers of a library and components aren't required to import the related JS.

With Javascript Isolation, the steps are same but with an extra step to load JS Module using IJSRuntime into IJSObjectReference (module). After loading the module, we need to call JS functions using IJSObjectReference module InvokeAsync instead of IJSRuntime. We also need to make sure the module is disposed on component dispose.

Summary

I'm happy that you have reached to the end of this article. We learnt what is Javascript Interop and Javascript Isolation. We saw how to call JS functions from .NET and vice versa with a live working demo. I hope you enjoyed this.