Let’s Learn Blazor: Blazor Javascript Communications with JS Interop

Using the JSInterop library, you can have your Blazor app communicate with Javascript and vice-versa

This is one of several articles on Blazor I’ll be writing, all so engineers can get familiar with the capabilities and tricks of this burgeoning and exciting web technology

So in our last session, we saw how easy it was to build, package and deploy a Blazor WebAssembly application and have this run directly in our browser.

For today’s session, we’ll be taking a look at one of the most compelling tools in your Blazor toolkit, the Javascript Interop library, and how this can help you connect these two technologies seamlessly.

I’ve added a repo in GitHub with all the code from this article, so you can pull this down and try all the things I’m about to show you.

All of the code you’ll find in here comes from articles written by Marinko Spasojevic from CodeMaze. Having followed the tutorials Marinko created, I have learned a great deal about the Javascript Interop functionality, and will link those tutorials at the end if you want to follow along with step-by-step instructions on what is going on and how to do so yourself. If this technology intrigues you, I highly recommend going through these amazing tutorials .

JS Interop: What is it?

When building a Blazor application, there are times when you want to be able to do things with the browser which just may be outside your power to do in C#, or which are done far more easily in Javascript.

The creators of Blazor recognised this, and so made it very easy for you to wire your C# Blazor code up to Javascript code and libraries by using the JS Interop.

From Microsoft’s docs:

A Blazor app can invoke JavaScript (JS) functions from .NET methods and .NET methods from JS functions. These scenarios are called JavaScript interoperability (JS interop).

In essence, JS Interop is a .NET library you can use in your code to allow for this kind of .NET -> JS, JS ->.NET interoperability.

Let’s have a look.

Blazor -> Javascript

Let’s assume you want to throw up a dialog box from the browser to get some bit of input from the user which you then process in some way. This is a very common scenario and easily handled in Javascript. Here’s a Javascript function of us requesting a user’s email address.

export function emailRegistration(message) {
    const result = prompt(message);
    if (result === '' || result === null)
        return 'Please provide an email'

    const returnMessage = 'Hi ' + result.split('@')[0] + ' your email: ' + result + ' has been accepted.';
    return returnMessage;
}

Simple as could be. You get the input from the prompt, then return back some kind of message you can display on the screen somewhere.

So how do we wire this to our Blazor code?

First thing, you’ll need to ensure your _Imports.razor contains a reference to the JSInterop package

@using Microsoft.JSInterop

Next, let’s add our function to a javascript file in wwwroot/scripts/jsExample.js

Now, let’s make sure this .js file is included in our Blazor’s wwwroot/index.html file as so

Great! Now that we’ve done this, let’s go ahead and open up our razor page.

Now, in this scenario, we’re collecting more and more .NET code than in our previous session, so now it makes sense to NOT have our C# inline at the bottom of the Razor page. Once your logic grows to a certain size, it makes editing a lot easier if you separate the markup (presentation) from your code (logic).

To do so, you can simply create your <pagename>.razor razor page, and then create a code class for it named <pagename>.razor.cs which indicates to the compiler that the razor page and the .cs file are linked in terms of functionality.

Let’s start with the .cs code. At the top of the cs file, add an injection reference to the JSInterop IJSRuntime interface. Then add the IJSObjectReference interface (which is the hook to our jsExample.js file above). We’ll also add a reference to the string the user will provide (their email address).

[Inject]
public IJSRuntime JsRuntime { get; set; }
private IJSObjectReference _jsModule;
private string _registrationResult;

Now, we need to wire up the Javascript file we added to our index.html to this razor functionality. In order to do so, we need to override a method. All razor pages and components extend from the class ComponentBase. This class has a variety of functionality about rendering a component, its state, and so on. In this case, it exposes a method known as Task OnAfterRenderAsync(bool firstRender). This method, if overridden, allows you to do specific things when the component has finished rendering. In this case, we want to hook up our IJSObjectReference _jsModule the first time the page is rendered.

protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                _jsModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/jsExamples.js");
            }
        }

As you can see, we’re creating a reference to our jsExamples.js script file so we can call the functions found in this Javascript file. That’s it. Now you have a hook to your Javascript functions which can now be called in C#.

How do we do this? Well, let’s create a .NET function in our .razor.cs to call our email registration JS code.

private async Task RegisterEmail() =>
            _registrationResult = await _jsModule.InvokeAsync<string>("emailRegistration", "Please provide your email");

A few things are going on here. We’re attempting to invoke the emailRegistration function, and our second argument is the parameters / arguments we want to pass to this function. The return type is a string, thus the InvokeAsync method we’re calling on our _jsModule.

So now we just need to wire this .NET function up in our razor page.

<div class="row">
    <div class="col-md-2">
        <button type="button" class="btn btn-info" @onclick="RegisterEmail">Register Email</button>
    </div>
    <div class="col-md-4">
        @_registrationResult
    </div>
</div>

Super simple razor logic. A button to click which calls our RegisterEmail C# method, and a div with a reference to our _registrationResult string property to be displayed on screen.

It’s that easy!

Javascript-> Blazor

So let’s flip it on its head. Now I want to call my .NET code from inside my Javascript. Useful, clearly, because now you have the power of Javascript but with the extra oomph of .NET logic behind it. You can do things in C# with about 1/10th the required Javascript code.

So here we go:

First, you need to create a static method in your Blazor code-behind file. It must be marked with the “JsInvokable” attribute for it to be called by Javascript code. (there are ways to call instantiated instances’ methods, but let’s go simple for our example)

[JSInvokable]
public static string CalculateSquareRoot(int number)
{
     var result = Math.Sqrt(number);
     return $"The square from {number} is {result}";
 }

Sure, you can calculate a square root in Javascript. This is just an example.

The JSInvokable method attribute should be self-explanatory. It allows Javascript to call this method. That’s it.

Now for the Javascript to call our method. Let’s add a new .js file to our wwwroot/scripts folder named jsExamplesDotNet.js

First, let’s link it in our index.html as we did with the jsExamples.js above

Now let’s write the Javascript function to call our .NET code.

var jsFunctions = {};

     jsFunctions.calculateSquareRoot = function () {
         const number = prompt("Enter your number, and I'll give you its square root");
     DotNet.invokeMethodAsync("BlazorWasmJSInteropExamples", "CalculateSquareRoot", parseInt(number))
        .then(result => {
            var el = document.getElementById("string-result");
            el.innerHTML = result;
        });
}

A bunch is taking place above, but the important part is in bold.

We call the DotNet.invokeMethodAsync method. The DotNet object is included as part of the Blazor framework, and built into the _framework/blazor.webassembly.js. This manages the communication between your .NET code and your Javascript code.

And you can call more than just code inside your Blazor app. If you look closely at the above example, we’re passing 3 variables:

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

Any library which is loaded into your Blazor app and which has methods available can be called with this same syntax.

For a complete listing of how you can call .NET from Javascript inside Blazor WASM, check out the Microsoft docs

Here’s our code in the Razor page. It looks very much like our Razor markdown above, but this is pure HTML

<div class="col-md-2">
        <button type="button" class="btn btn-success" onclick="jsFunctions.calculateSquareRoot()">
            Calculate
        </button>
    </div>
    <div class="col-md-4">
        <span id="string-result" class="form-text"></span>
    </div>

And when we call it?

Nice!

Wrapping up and Source Material

So what I’ve shown you is only scratching the surface of the power you have in Blazor using the JS Interop. You can call browser functionality, wrap Razor components with javascript libraries that get called when your component does something. The possibilities are near endless to combine the power of the two languages into the best possible experiences you can create.

If you want to get to know these and other amazing capabilities you can build into your Blazor pages and components, I really recommend you go check out Marinko Spasojevic’s CodeMaze tutorials I mentioned at the start of the article. I learned a great deal from them and so will you.

Hope this helps