How to call isolated JavaScript code in .NET 5.0 Blazor projects with JSObjectReference

Spread the love

A dozen days ago the .NET 5.0 Release Candidate 1 (RC1) became available. And as you probably know, there are a lot of “treats” among the new features of the ASP.NET Core updates. One of them is Blazor JavaScript isolation with aid of JSObjectReference.

Which benefits this feature give us?

First of all, you do not have to save your JavaScript object in the global Window namespace anymore. Just export your Javascript function or object.

And the second convenient thing is you do not have to import JavaScript files manually to your HTML markup. No more forgotten <script> tags 🙂

So, it’s time to taste it.


Installing .NET 5.0 SKD

You have to download and install fresh version of .NET 5.0 SDK. Currently I’m using SDK 5.0.100-rc.1. But, probably, at the moment there is a fresher version, so use it.

Creating ASP.NET Core Blazor WebAssembly application project

It’s quire simple. Just put the next command to your console

dotnet new blazorwasm -o BlazorNet5JsInterOp

Of course, you can create server Blazor app project or put the name of your choice.

After creating the project you may clean it up as described in my previous post.

Adding JavaScript

Inside the wwwroot folder create a new file, let’s call it exampleJsInterop.js. The code inside is very simple. What we’re going to do here is just to export a function that shows a browser dialog window with a user-defined message.

export function showPrompt(message) {
    return prompt(message);
}

And as you can see we don’t need to assign it to the global Window object anymore. So, our JavaScript code is completely isolated.

Calling JavaScript code from the Blazor app

It’s quite simple. You just have to change the content of the ../Pages/index.razor component as below:

@page "/"
@inject IJSRuntime jsRuntime

<h1>Example of .NET 5.0 RC1 Blazor JavaScript Isolation with JSObjectReference</h1>

Welcome to your new app.

<button type="button" class="btn btn-primary" @onclick="OnClick">
    Click Me
</button>

@code {

    JSObjectReference module;

    protected override async void OnInitialized()
    {
        module = await jsRuntime
            .InvokeAsync<JSObjectReference>("import", "./exampleJsInterop.js");
    }

    public async Task OnClick()
    {
        await module.InvokeAsync<string>("showPrompt", "What's up?");
    }
}

Here, on the component initialization, we assign the JSObjectReference instance (or, in other words, we just “load” the JavaScript module into the variable). To do this we use the injected IJSRuntime service, which is part of Blazor. The “import” argument is used specifically for importing a JavaScript module. The path to the module (relatively to the wwwroot directory) is specified inside the second argument.

After the JavaScript module is loaded, we can use it whenever we want inside our component. In our case, it’s an OnClick() handler of the button click event.

And, that’s all.

You can find the complete project in my GitHub repository.

Roman Simuta Blog