Blazor.JSInterop 1.0.4

Blazor.JSInterop

A library containing abstract classes for loading JavaScript and WebAssembly modules

Example for JavaScript module

We have the following JavaScript module named geolocationModule.js with a function that gets the user's coordinates

const getPosition = () => {
    return new Promise((resolve, reject) => {
        if ("geolocation" in navigator) {
            navigator.geolocation.getCurrentPosition(returnPosition, returnError);
        }

        function returnPosition(position) {
            resolve({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            });
        }

        function returnError(error) {
            let errorMessage;
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    errorMessage = "User denied the request for Geolocation.";
                    break;
                case error.POSITION_UNAVAILABLE:
                    errorMessage = "Location information is unavailable.";
                    break;
                case error.TIMEOUT:
                    errorMessage = "The request to get user location time out.";
                    break;
                case error.UNKNOWN_ERROR:
                    errorMessage = "An unknown error ocurred.";
                    break;
                default:
                    errorMessage = "An error has ocurred.";
            }

            reject(errorMessage);
        }
    });
}

export { getPosition };

Now, you need to create a service to interoperate with the JavaScript code. Here the Blazor.JSInterop library makes things easier for us

using Microsoft.JSInterop;

public record struct GeolocationLatLong(double Latitude, double Longitude);

public class GeolocationService(IJSRuntime jsRuntime)
    : JSLoaderServiceBase(jsRuntime, $"./js/geolocationModule.js")
{
    public async ValueTask<GeolocationLatLong> GetPosition() =>
        await InvokeAsync<GeolocationLatLong>("getPosition");
}

Register the service.

builder.Services.AddScoped<GeolocationService>();

Finally you can use it.

@page "/get-position"
@inject GeolocationService Geolocation

<button class="btn btn-primary mb-2" @onclick=ShowPosition>Show my position</button>
<textarea class="form-control" rows="3" disabled @bind=Result>
</textarea>

@code {
    private string Result;

    private async Task ShowPosition()
    {
        var Coords = await Geolocation.GetPosition();
        Result = $"Latitude: {Coords.Latitude}, Longitude: {Coords.Longitude}";
    }
}