BlazorJS 2.1.6
dotnet add package BlazorJS --version 2.1.6
NuGet\Install-Package BlazorJS -Version 2.1.6
<PackageReference Include="BlazorJS" Version="2.1.6" />
paket add BlazorJS --version 2.1.6
#r "nuget: BlazorJS, 2.1.6"
// Install BlazorJS as a Cake Addin #addin nuget:?package=BlazorJS&version=2.1.6 // Install BlazorJS as a Cake Tool #tool nuget:?package=BlazorJS&version=2.1.6
BlazorJS
BlazorJS is a small package to have better interaction with JavaScript.
- Use a Scripts Component on every page or component to load JavaScript or Stylesheet files when not loaded, and unload automatically on dispose if you want to.
- This library provides extensions for IJSRuntime for dynamic invocation that eliminates the requirement to create JS wrapping functions for everything
- A possibility to hook events on a Blazor component or page.
- Import a module and create a JS object reference from it
<ins>Installation</ins>
Add the nuget Package BlazorJS
to your blazor project
Open _Imports.razor
from your project and add using for BlazorJS
...
@using BlazorJS
<ins>Scripts Component</ins>
The scripts component allows you 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>
This component can also load stylesheet files
<Scripts src="js/myjsfile.js,css/mystyle.css"></Scripts>
Include multiple javascript files
Multiple js files can be loaded with a comma seperator ,
<Scripts src="js/myjsfile.js, js/myjsfile2.js"></Scripts>
<ins>Extended Dynamic JS Invocation</ins>
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
// DONT COPY THIS!! SAMPLE FOR NOT WORKING
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) =>
{
window.alert(c);
window.console.log(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());
Console.WriteLine(res);
Also you can reuse the results as parameter and writing something like this
var hash = await jsRuntime.DInvokeAsync<string>(window =>
{
window.alert(currentCount);
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.
<ins>Simple event interop helper </ins>
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");
<ins>BaseComponent for Js wrapper components </ins>
BlazorJs provides a small base component called BlazorJsBaseComponent<T>
to create a JS wrapper component.
This is a simple way to create a JS object reference from a module and use it in your blazor component.
- Create a razor component
<ins>YourComponent.razor</ins>
@inherits BlazorJs.BlazorJsBaseComponent<YourComponent>
<div @ref="ElementReference">
</div>
<ins>YourComponent.razor.cs</ins>
public partial class YourComponent
{
protected override string ComponentJsFile() => "./js/PathToYourComponent.js";
protected override string ComponentJsInitializeMethodName() => "initializeMethodForYourComponent";
[Parameter]
public string SomeGeneralParam { get; set; }
[Parameter, ForJs]
public int ParamForJs { get; set; } = 100;
[Parameter, ForJs("anotherParamForJsWithDifferentNameInJs")]
public int AnotherParamForJs { get; set; } = 100;
protected override async Task OnJsOptionsChanged()
{
// This method will automatically be called when a parameter marked with [ForJs] has changed
if (JsReference != null)
await JsReference.InvokeVoidAsync("setOptions", MyJsOptions());
}
private object MyJsOptions()
{
return this.AsJsObject(new
{
configValueWirthoutParam = 123,
});
}
/// <summary>
/// Gets the JavaScript arguments to pass to the component.
/// We override here because by default only the element reference abd dotnet reference is passed but we want to have directly the JsOptions available.
/// </summary>
public override object[] GetJsArguments() => new[] { ElementReference, CreateDotNetObjectReference(), MyJsOptions() };
}
- Create your js file thats located in the path you have defined in
ComponentJsFile()
in this case./js/PathToYourComponent.js
<ins>./js/PathToYourComponent.js</ins>
class YourComponent {
elementRef;
dotnet;
constructor(elementRef, dotNet, options) {
this.elementRef = elementRef;
this.dotnet = dotNet;
this.createWhatever(options);
}
createWhatever(options) {
// Do something with the options
console.log(options.paramForJs);
console.log(options.anotherParamForJsWithDifferentNameInJs);
console.log(options.configValueWirthoutParam);
}
setOptions(options) {
// Just update the options with the new ones
}
dispose() {
// Dispose everything you created
}
}
window.YourComponent = YourComponent;
// This method will be called from the BlazorJsBaseComponent and should match the name you have defined in `ComponentJsInitializeMethodName()`
export function initializeMethodForYourComponent(elementRef, dotnet, options) {
return new YourComponent(elementRef, dotnet, options);
}
Product | Versions 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. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.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. |
-
.NETStandard 2.1
- Microsoft.AspNetCore.Components (>= 3.1.0)
- Microsoft.AspNetCore.Components.Web (>= 3.1.0)
- Microsoft.Extensions.FileProviders.Embedded (>= 3.1.1)
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.26)
- Microsoft.Extensions.FileProviders.Embedded (>= 6.0.26)
- Microsoft.JSInterop (>= 6.0.26)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.15)
- Microsoft.Extensions.FileProviders.Embedded (>= 7.0.15)
- Microsoft.JSInterop (>= 7.0.15)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.1)
- Microsoft.Extensions.FileProviders.Embedded (>= 8.0.1)
- Microsoft.JSInterop (>= 8.0.1)
NuGet packages (3)
Showing the top 3 NuGet packages that depend on BlazorJS:
Package | Downloads |
---|---|
MudBlazor.Extensions
MudBlazor.Extensions is a small extension library for MudBlazor from https://mudblazor.com/ |
|
AuralizeBlazor
AuralizeBlazor is a wrapper component for audioMotion-analyzer. |
|
MudExRichTextEditor
MudExRichTextEditor is a custom reusable control that allows us to easily consume Quill combining in a MudBlazor project. |
GitHub repositories (1)
Showing the top 1 popular GitHub repositories that depend on BlazorJS:
Repository | Stars |
---|---|
fgilde/MudBlazor.Extensions
MudBlazor.Extensions from https://www.mudex.org is a small extension for MudBlazor from https://mudblazor.com
|
Version | Downloads | Last updated |
---|---|---|
2.1.6 | 4,277 | 6/28/2024 |
2.1.5 | 21,369 | 2/2/2024 |
2.1.4 | 9,530 | 11/25/2023 |
2.1.3 | 110 | 11/24/2023 |
2.1.2 | 5,039 | 11/2/2023 |
2.0.9 | 6,580 | 9/13/2023 |
2.0.8 | 3,021 | 7/29/2023 |
2.0.7 | 186 | 7/28/2023 |
2.0.6 | 918 | 7/14/2023 |
2.0.5 | 318 | 6/13/2023 |
2.0.4 | 8,386 | 4/21/2023 |
2.0.3 | 4,468 | 3/2/2023 |
2.0.2 | 1,258 | 2/15/2023 |
2.0.1 | 291 | 2/8/2023 |
2.0.0 | 2,742 | 1/23/2023 |
1.0.4 | 2,296 | 12/9/2022 |
1.0.3 | 306 | 12/9/2022 |
1.0.2 | 297 | 12/9/2022 |
1.0.1 | 341 | 11/19/2022 |
1.0.0 | 586 | 2/3/2020 |
0.1.0-preview.200127215053 | 293 | 1/28/2020 |