Skip to main content

Blazor Dynamic JavaScript Runner

14 Mar 2020 - Cody Merritt Anhorn

Even with Blazor you still need to use javascript in some form or fashion. And with this post we will go over how to create a simple JavaScript runner. The runner will just take a method identifier, the script as a string, and some arguments in the form of a simple object in C#.

The Need

The main need for my personal work was to be able to focus an element on the page with very minimal code, not having to craft a whole interop between the C# and JavaScript code. The output was a simple JavaScript function that will be called by a simple abstraction in C#. With Blazor having a way to pass a reference to an element on the page thorough the JS Interop functionality this make is really easy to just focus the element using a short string script.

Project Example

Below is an example Component and the the necessary interop files.

Here is project: EventHorizon.Blazor.Scripter


<button @onclick="HandleAlertUser">Show Alert</button>
<br />
<button @onclick="HandlePromptUser">Prompt User</button>

@code {
    // Make sure to Register JavaScriptRunner with DI
    public JavaScriptRunner JSRunner { get; set; }

    public async Task HandlePromptUser()
        // Close the window with JavaScript.
        await JSRunner.Run(
            "var name = prompt('What is your name?'); if(name) alert(name);",
            new { }

    public async Task HandleAlertUser()
        // Say Hello to the UserName
        await JSRunner.Run(
            // To note that passed props will be converted to camel-case
            "alert('Hello, ' + $args.userName)",
                UserName = "Awesome",


public class JavaScriptInteropRunner : JavaScriptRunner
    readonly IJSRuntime _runtime;

    public JavaScriptInteropRunner(
        IJSRuntime runtime
        _runtime = runtime;

    public ValueTask Run(
        string methodName,
        string script,
        object args
        return _runtime.InvokeVoidAsync(
            new JavaScriptMethodRunner
                MethodName = methodName,
                Script = script,
                Args = args

public class JavaScriptMethodRunner
    public string MethodName { get; set; }
    public string Script { get; set; }
    public object Args { get; set; }


// This file is to show how a library package may provide JavaScript interop features
// wrapped in a .NET API

((_window) => {
    const methodCache = {};

    _window.scripter = {
        runScript: (methodRunner) => {
            methodCache[methodRunner.methodName] = new Function(


Categories: blog blazor

Tags: .NET C# Blazor

Cody Merritt Anhorn