I was banned...

Jeffrey 'Aztec' Barnes — Tue, 06 Dec 2022 18:15:59 +0000

Finding a home to post content and build a community is hard.

I want to be more involved, but it's been hard to crawl out of the shell my former employer imposed because we weren't allowed to participate in many community events for fear of being seen as representing the company, rather than ourselves. Now, free of those restrictions I have tried to grow more and participate more. I heard about a community effort to link 50 blogs in a C# Advent calendar to help share ideas and build the community so I applied to join in. I got the Dec 4th spot and needed to write an article to link and participate.

I don't yet want to discuss the site I used for my participating entry, I've since moved the content here but I wanted to document what happened.

On Sunday my post when live...

On Monday I saw over 350 people had clicked through to see my article...

On Tuesday I was banned...

Not my post was removed...
not we need to discuss your post...
but GTFO, you've been banned!

I'm trying to backchannel an appeal, but this is an impressively hardcode response.

More to come...

Invoking Legacy JavaScript from Blazor WebAssembly using the JSRuntime

Jeffrey 'Aztec' Barnes — Tue, 06 Dec 2022 17:02:54 +0000

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

Forem: Jeffrey 'Aztec' Barnes

I was banned...

Invoking Legacy JavaScript from Blazor WebAssembly using the JSRuntime