Invoking Legacy JavaScript from Blazor WebAssembly using the JSRuntime

#webdev #javascript #csharp

This post, in addition to being the first in the JavaScript Runtime Interop Series is also a part of the C# advent calendar 2022! For other articles in this collection see C# Advent Calendar 2022 and have a very happy holidays.

Sometimes the ocean can't be boiled...
One of the significant challenges of the Modernization of pre-existing or “Legacy” code is how difficult it is to get started because it is too complex or extensive. Refactoring and rewriting can be easier to tackle if you can integrate new code with the existing Legacy code and then migrate slowly and iteratively over time.

For this article, I will start with a placeholder legacy JavaScript function that increments a supplied variable. This function serves only to be emblematic of some more extensive pre-existing Legacy code. I will then use the now infamous Blazor WASM demo project from Microsoft to illustrate how simply the razor counter component can invoke this sample function.

A word about code samples...
Often the most challenging part of exploring a programming topic is successfully setting up a demo to illustrate the points. This sample JavaScript method is internationally grossly simple so it doesn't distract from it's implementation in the Blazor WebAssembly or WASM project.

var arg = 0;


function legacyFunction(arg) {
  //Do stuff and 
  var nxt = arg + 1;
  console.log(arg + ' > ' + nxt );
  return nxt;
}

To explore the code in this article further, use this GitHub Repository! The above function can be found in the wwwroot folder in the legacysample.js file. I have also provided in that folder a Sample.html file you can view with the browser of your choice to test the legacyFunction before exploring the code changes outlined below to understand how simple it is to invoke from the Blazor project.

The three steps to implementing the legacyFunction in the Blazor WASM demo project are:

1) Add the script src to the index.html file

<script src="legacysample.js"></script>

In Counter.Razor
2) Inject the JSRuntime

@inject IJSRuntime JSRuntime

3) Modify the IncrementCount() method to be

async void IncrementCount()
{
     //currentCount++;
     currentCount = await JSRuntime.InvokeAsync<int>("legacyFunction", currentCount);
}

In this third and final step, you can see that currentCount uses the JSRuntime.InvokeAsync call with to indicate the integer value returned by the JavaScript "legacyFunction" and the currentCount passed in for incrementing. Note that the method was changed from private to async to allow the use of await so the JSRuntime can complete the InvokeAsync before returning control to the razor component.

With two supporting lines of code, this one call is all that is needed to invoke the sample function and can be all you need to start looking at the existing legacy javascript functions in your environment. We will explore this further next week when we drill into calling JavaScript methods without parameters, with multiple parameters, and having the legacy javascript method now invoke a C# method.

The complete JavaScript Runtime Interop Series details:
12/4 (This week) – Invoking Legacy Javascript from Blazor WebAssembly using the JSRuntime
12/11 (Next week) – Boomerang: Getting JavaScript to call a method in a Razor component
12/18 – Integrating Blazor Server with Legacy JavaScript
12/25 – JavaScript Runtime Interop in Dot Net 7.0