Blazor How To: Server App with GPS
blazor blazor web dnetcore aspnetcore gps
GPS capability was added to the Blazor Server app using AspNetMonsters.Blazor.Geolocation. Whilst there was a few issues as covered in an Issues post on GitHub, this post encompasses those issues. I have further improved that solutions covered in that post.
The previous post in this series documented a simple Blazor Server Web App that that logs user details into an Azure SQL database using Entity Framework Core. It also uses QRCodeNetCore to generate a QRCode for the site’s homepage. The Telerik Blazor Web Grid is used for presenting data. This post covers the addition of the GPS capability for including the GPS location of users when they post their information.
The App Summary
djaus2/AEGateLog on GitHub: “A light weight quick response Blazaor Server app for logging participants entry to a sporting facility for COVID-19 contact tracing. Uses a QR Code generated by the site to navigate users to the site.”
About GPS use
The Web App is public. Anyone can make a submission. Athlete’s submissions though would normally only be done at the gate to the Athletics Centre. By logging their GPS location we can filter out spurious entries posted from afar. That way, if there is a need for COVID-19 tracing, then those with the correct GPS location can be prioritised for action.
Useage
When athletes click [Accept] on the main page, they navigate to the Log page. After the page is rendered, a call is made to the GPS API to get the current GPS data. This does pop up an acceptance message as is normally required. The GPS coordinates are then determined if the response is positive. Logging occurs though with or without the GPS acceptance.
The Nuget Packages
As per the project file:
<ItemGroup>
<PackageReference Include="AspNetMonsters.Blazor.Geolocation" Version="0.5.0-preview1" />
<PackageReference Include="QRCoderNetCore" Version="1.0.0" />
<PackageReference Include="Telerik.UI.for.Blazor" Version="2.14.1" />
</ItemGroup>
The first one is the one for the GPS capability
The repository for the package is here on GitHub
Using the GPS Package
My amended version of enabling it follows.
- Modified from the repository ReaddMe on Github
- Also encompasses the 4 issues in the repository Issue #14 Getting Blazor.Geolocation working with GA Blazor
-
In your Blazor app, add the AspNetMonsters.Blazor.Geolocation NuGet package
Install-Package AspNetMonsters.Blazor.Geolocation -IncludePrerelease
-
In your Blazor app’s Startup.cs, register the ‘LocationService’.
public void ConfigureServices(IServiceCollection services) { ... services.AddScoped<LocationService>(); ... }
Note change from AddSingleton to AddScoped
-
Now you can inject the LocationService into any Blazor page (usually near the top of the page) and use it like this:
@using AspNetMonsters.Blazor.Geolocation @inject LocationService LocationService
-
Add some code to display location
<h3>You are here</h3> <div> Lat: @location?.Latitude <br/> Long: @location?.Longitude <br /> Accuracy: @location?.Accuracy <br /> </div>
-
In the code
@code { Location location = null; protected async Task GetLocation() { location = await LocationService.GetLocationAsync(); this.StateHasChanged(); } protected override async Task OnAfterRenderAsync(bool first) { if (first) { base.OnAfterRender(first); await GetLocation(); } } protected override async Task OnInitAsync() { // No location stuff here } }
The GetLocation needs to not occur until the page is rendered.
Also note that the StateHasChanged call to make sure the values are displayed.
An Example
Nb: The usaeage changes as above have been pushed to the repository for inclusion in the repository ReadMe.
Topic | Subtopic | |
This Category Links | ||
Category: | Blazor Index: | Blazor |
Next: > | Blazor | More on App Options |
< Prev: | Blazor | A Server only Web App |