Blazor.JSInteropPlus 1.0.0

Easily Access Javascript Element Propertys and Functions trough C#

How to Install

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

How to Use

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:

Propertys

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");
    }
}

Methods

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});
    }
}

Events

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()
	{
		...
	}
}

JSEventOptions

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
}

License

Blazor.JSInteropPlus is MIT licensed.