Add the Nuget Package to your Solution
Install-Package Blazor.JSInteropPlus
Add the JavaScript File to your _Host.cshtml
<script src="_content/Blazor.JSInteropPlus/JSInteropPlus.js"></script>
Add the Namespace to your _Imports.razor
@using Blazor.Blazor.JSInteropPlus
This Library exposes extensions Methods for the Original IJSRuntime Interface provided by Blazor.
Inject the IJSRuntime Interface to your Component
@inject IJSRuntime _jsRuntime
And use one of the Following extension Methods:
Get the Value of a Property of a specific JS Element / Window
<div @ref=_divRef>...</div>
@code{
private ElementReference _divRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var width = await _jsInterop.GetElementPropertyAsync<double>(_divRef, "clientWidth");
//Or for the Window Object
var windowWidth = await _jsInterop.GetWindowPropertyAsync<double>("innerWidth");
}
}
Set the Value of a Property of a specific JS Element / Window
<div @ref=_divRef>...</div>
@code{
private ElementReference _divRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await _jsInterop.SetElementPropertyAsync(_divRef, "clientWidth", 500);
//Or for the Window Object
await _jsInterop.SetWindowPropertyAsync("name", "ThisIsMyNewName");
}
}
Call a Method a specific JS Element / Window
<div @ref=_divRef>...</div>
@code{
private ElementReference _divRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await _jsInterop.InvokeElementMethodAsync(_divRef, "scrollIntoView", {Optional Parameters});
//Or for the Window Object
await _jsInterop.InvokeWindowMethodAsync("print", {Optional Parameters});
}
}
Subscribe to a Event of a specific Javascript Element /Window
<div @ref=_divRef>...</div>
@code{
private ElementReference _divRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await _jsRuntime.SubscribeToElementEventAsync(_divRef, "click", FunctionToCall, new JSEventOptions() { CallbackTime = TimeSpan.FromSeconds(1), CallbackType = Callback.Debounce });
//Or for the Window Object
await _jsRuntime.SubscribeToWindowEventAsync("blur", FunctionToCall, new JSEventOptions() { CallbackTime = TimeSpan.FromSeconds(1), CallbackType = Callback.Debounce });
}
private async Task FunctionToCall()
{
...
}
}
The Class 'JSEventOptions' is a Optional Parameter to Specify the behavior of the Callback, more down below.
Unsubscribe from a already subscribed Event of a specific Javascript Element /Window
<div @ref=_divRef>...</div>
@code{
private ElementReference _divRef;
protected async Task Unsubscribe()
{
await _jsRuntime.UnsubscribeFromElementEventAsync(_divRef, "click", FunctionToCall);
//Or for the Window Object
await _jsRuntime.UnsubscribeFromWindowEventAsync("blur", FunctionToCall);
}
private async Task FunctionToCall()
{
...
}
}
You can specify the behavior of JSEvent Callbacks:
public class JSEventOptions
{
/// <summary>
/// Specifies how the JS Event will invoke the C# Method
/// </summary>
public required Callback CallbackType { get; set; }
public TimeSpan CallbackTime { get; set; }
}
public enum Callback
{
/// <summary>
/// The C# Event will immediatly be triggered once the JS Event happens
/// </summary>
Instant,
/// <summary>
/// The C# Event will be triggered in a fixed interval
/// </summary>
Throttle,
/// <summary>
/// The C# Event will only be triggered if there are no more JS Events in a specified interval
/// </summary>
Debounce
}
Blazor.JSInteropPlus is MIT licensed.