BlazorJS 2.0.4

.NET 6.0 .NET Standard 2.1
dotnet add package BlazorJS --version 2.0.4
NuGet\Install-Package BlazorJS -Version 2.0.4
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BlazorJS" Version="2.0.4" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorJS --version 2.0.4
#r "nuget: BlazorJS, 2.0.4"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorJS as a Cake Addin
#addin nuget:?package=BlazorJS&version=2.0.4

// Install BlazorJS as a Cake Tool
#tool nuget:?package=BlazorJS&version=2.0.4


BlazorJS is a small package to use a Scripts Component on every page or component to load JavaScript files when not loaded, and unload automatically. Also this library provides small extensions for IJSRuntime like dynamic invocation

Using Scripts Component

Add the nuget Package BlazorJS to your blazor project

Open _Imports.razorfrom your project and add using for BlazorJS

@using BlazorJS

Now your are able to include every javascipt file easily to your pages or components. For example open any page like the index.razor and add

<Scripts src="js/myjsfile.js"></Scripts>
Include multiple javascript files

Multiple js files can be loaded with a comma seperator ,

<Scripts src="js/myjsfile.js, js/myjsfile2.js"></Scripts>

Extension Dynamic JS Invocation

The Dynamic Invocation extension for IJSRuntime allows for dynamic invocation of JavaScript functions from C#. This extension provides a single method, DInvokeVoidAsync, which takes in two arguments: a function to be invoked and an array of objects to be passed as arguments to that function.

Usage The DInvokeVoidAsync method can be called on any instance of IJSRuntime, and takes in general two arguments: a function to be invoked and an array of objects to be passed as arguments to that function.

Here are some examples of how the method can be used:

Simple Call
await jsRuntime.DInvokeVoidAsync(window => window.alert("test"));
Passing Parameters
if in your scope a variable is available. (In the base Blazor Sample the currentCount for example) Something like this is not enough
await jsRuntime.DInvokeVoidAsync(window => window.alert(currentCount));
For doing this we need to pass the parameters. You can do it like this
await jsRuntime.DInvokeVoidAsync((window, c) => window.alert(c), currentCount);
await jsRuntime.DInvokeVoidAsync((window, c, p2, p3..) => window.alert(c), currentCount, param2, param3, ...);
await jsRuntime.DInvokeVoidAsync((window, c, x) =>
        }, currentCount, "Flo");
or you can add parameters with the class JSArgument and an approach like this
await jsRuntime.DInvokeVoidAsync(window => window.alert(currentCount), JSArgument.For(currentCount).ToArray());
await jsRuntime.DInvokeVoidAsync(window => window.alert(currentCount + " - " + date + name), JSArgument.For(currentCount).And(date).And(name));
..if you here need more parameters you can simple add them to an array or use the And method
var date = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
var name = "John";
await jsRuntime.DInvokeVoidAsync(window => window.alert(currentCount + " - " + date + name), JSArgument.For(currentCount).And(date).And(name));
Using return values

All seen samples are also callable with an generic arg to use return values.

You can use return values from javascript functions like this
var res = await jsRuntime.DInvokeAsync<string>(window => window.prompt());
Also you can reuse the results as parameter and writing something like this
var hash = await jsRuntime.DInvokeAsync<string>(window =>
    return window.location.hash + "_" + currentCount;
}, new[] { JSArgument.For(currentCount) });
await jsRuntime.DInvokeVoidAsync(document => document.location.hash = hash, new[] { JSArgument.For(hash) });
// After alerting the currentCount we update the url in browser like this #1_2_3_4...

It is important to note that the function passed to DInvokeVoidAsync must be a lambda expression that takes in a dynamic and dynamic parameter.

Conclusion This extension provides a simple and easy way to invoke JavaScript functions from C# with support for dynamic arguments.

Simple event interop helper

A simple possibility to hook events that should be extended more but currently supports an easy OnBlur extension for any element.

private BlazorJSEventInterop<PointerEventArgs> _jsEvent;

_jsEvent = new BlazorJSEventInterop<PointerEventArgs>(_jsRuntime);
await _jsEvent.OnBlur(OnFocusLeft, ".element-selector");

private Task OnFocusLeft(PointerEventArgs arg)
    return Task.CompletedTask;

You can also use it manually with any event you want to.

private BlazorJSEventInterop<PointerEventArgs> _jsEvent;

_jsEvent = new BlazorJSEventInterop<PointerEventArgs>(_jsRuntime);
await _jsEvent.AddEventListener("NameOfEvent", async args => { await YourCallBack(); }, ".element-selector");

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed. 
.NET Core netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.1 is compatible. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on BlazorJS:

Package Downloads

MudBlazor.Extensions is a small extension for MudBlazor from

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
2.0.4 806 4/21/2023
2.0.3 1,967 3/2/2023
2.0.2 619 2/15/2023
2.0.1 169 2/8/2023
2.0.0 1,635 1/23/2023
1.0.4 1,640 12/9/2022
1.0.3 224 12/9/2022
1.0.2 224 12/9/2022
1.0.1 257 11/19/2022
1.0.0 512 2/3/2020
0.1.0-preview.200127215053 259 1/28/2020