JavaScript Interop in Blazor

When to Use JS Interop

• Access browser APIs (e.g., clipboard, localStorage)
• Use third-party JS libraries (e.g., Chart.js, jQuery)
• Perform DOM manipulations not available in Blazor

Calling JavaScript from C#

Inject the IJSRuntime service and use InvokeVoidAsync or InvokeAsync to call JS functions.

// wwwroot/js/site.js
function showAlert(message) {
    alert(message);
}

// In a .razor file
@inject IJSRuntime JS

<button @onclick="CallJs">Show Alert</button>

@code {
    async Task CallJs()
    {
        await JS.InvokeVoidAsync("showAlert", "Hello from Blazor!");
    }
}

Calling C# Methods from JavaScript

Register a .NET instance and invoke C# methods from JS:

// wwwroot/js/site.js
function callDotNet(dotNetRef) {
    dotNetRef.invokeMethodAsync("ShowMessage");
}

// In Blazor .razor or .cs file
[JSInvokable]
public static Task ShowMessage()
{
    Console.WriteLine("JS called C#!");
    return Task.CompletedTask;
}

JS Module Isolation

Use ES6 modules with IJSRuntime.InvokeAsync for scoped scripts:

// script.js
export function sayHi() {
    alert("Hello from module!");
}

// Component.razor.cs
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/script.js");
await module.InvokeVoidAsync("sayHi");

JS Interop bridges the gap between C# and JavaScript, enabling Blazor apps to leverage the full power of the web. Next, we'll explore how Blazor manages state across components and pages.