Forem: Shaun Curtis

The Blazor Component Service Scope Conundrum

Shaun Curtis — Tue, 24 Jan 2023 19:27:49 +0000

Apply good design practices to components, and you separate out data management from the display function. A component such as FetchData in the demo project "Fetches(Manages) data AND displays it in a table". There's an AND in there: a very good indicator that FetchData has multiple concerns/responsibilities.

Apply the Single Responsibilty Principle and you have two classes:

WeatherForcastListForm - a component that displays a list of WeatherForecasts
WeatherForecastListPresenter - an object that interfaces with the data pipeline to manage the list of WeatherForecasts.

Take those same design principles further, and you inject an instance of WeatherForecastListPresenter into WeatherForcastListForm from DI with the same lifecycle scope as the form.

In the DotNetCore framework that presents a dilemna.

Scoped is too wide: it's scoped for the duration of the SPA session. It works if used in one place and you want to persist state for the duration of the SPA session.
Transient is too narrow.

Sub-components in the Form can't use DI to access the same instance of WeatherForecastListPresenter.
Any class implementing IDisposable or IAsyncDisposable should never be scoped as Transient. The DI service container maintains a reference to the instance to Dispose it when the container itself is Disposed. You create a "memory leak" in your application as copies of WeatherForecastListPresenter build up every time you visit the form. They are only disposed when you close down or refresh you session with the application.

There's no a clean fit.

Step forward OwningComponentBase. It creates it's own scoped service container which it disposes when the component is disposed. It has the same scope as the component.

Unfortunately there's a fatal flaw: any scoped service your service depends on is also created in the same container. It is after all just a Scoped container.

Consider AuthenticationService. The instance in the SPA scoped container is the one your service needs, but it gets a new vanailla one with no user information. Same with any Notification services, the NavigationManager and many others.

It's Ok for services with no dependancies, but.... we don't code many of those!

Solving the Conundrum

The fact is, the DotNetCore service container configuration is designed around the old MVC server side model. There's no scope, or container, that matches the scope of a component. Until Microsoft provides one, we need a workaround.

My solution is described below. It's uses a simple time service and component that display/update a time value to demonstrate the solution.

The Repo

The repo and latest version of this article can be found here Blazr.ComponentServiceProvider.

The Demo Timer Service

The simple Timer service interface.

public interface ITimeService
{
    public string Message { get;}
    public event EventHandler? TimeChanged;
    public void UpdateTime();
}

The concrete service. Debug code is included to monitor instances and disposal.

public class TimeService : ITimeService, IDisposable, IAsyncDisposable
{
    public readonly Guid InstanceId = Guid.NewGuid();
    private bool asyncdisposedValue;
    private bool disposedValue;

    public string Message { get; private set; } = DateTime.Now.ToLongTimeString();
    public event EventHandler? TimeChanged;

    public TimeService()
        => Debug.WriteLine($"TimeService - instance {InstanceId} created");

    public void UpdateTime()
    {
        Message = DateTime.Now.ToLongTimeString();
        TimeChanged?.Invoke(this, EventArgs.Empty);
    }

    public ValueTask DisposeAsync()
    {
        if (!asyncdisposedValue)
            Debug.WriteLine($"TimeService - instance {InstanceId} async disposed");

        asyncdisposedValue = true;
        return ValueTask.CompletedTask;
    }

    protected virtual void Dispose(bool disposing)
    {
        if (!disposedValue)
        {
            if (disposing)
                Debug.WriteLine($"TimeService - instance {InstanceId} disposed");

            disposedValue = true;
        }
    }

    public void Dispose()
    {
        Dispose(disposing: true);
        GC.SuppressFinalize(this);
    }
}

TimeStamp

TimeStamp is a simple component thats displays and updates the TimeService. ITimeService is cascaded. Debug code shows when SetParametersAsync async is called.

@namespace Blazr.UI
@implements IHandleAfterRender
@implements IHandleEvent

<div class="bg-light p-2 m-2">

    <h3>TimeStamp Component</h3>

    <div class="m-2">
        <button class="btn btn-primary" @onclick=Clicked>Update Timestamp</button>
    </div>

    <div>
        @(this.TimeService?.Message ?? "No message set.")
    </div>

    <div class="mt-2 bg-dark text-white">
        Parameters Set at at @this.ParametersChangedTimeStamp
    </div>

</div>

@code {
    [CascadingParameter] private ITimeService? TimeService { get; set; } = default!;

    private string ParametersChangedTimeStamp = "Not Set";

    protected override void OnInitialized()
    {
        if (this.TimeService is null)
            throw new NullReferenceException($"The {this.GetType().FullName} required a cascaded ITimeService");
    }

    protected override void OnParametersSet()
    {
        Debug.WriteLine("TimeStamp - Parameter Change");
        this.ParametersChangedTimeStamp = DateTime.Now.ToLongTimeString();
        base.OnParametersSet();
    }

    private void Clicked()
      => TimeService?.UpdateTime();

    // Saving CPU Cycles - No AfterRender Handling
    Task IHandleAfterRender.OnAfterRenderAsync()
        => Task.CompletedTask;

    // Saving CPU Cycles - shortcut the UI event handling code. One render per UI event
    async Task HandleEventAsync(EventCallbackWorkItem callback, object? arg)
    {
        await callback.InvokeAsync(arg);
        StateHasChanged();
    }
}

Service Utilities

We need code to create and manage our service.

It must create an instance of TService which:

May or may not have DI dependancies.
May or may not implement IDisposable and/or IAsyncDisposable.
May be an interface or base class service definition in the ServiceContainer.

ActivatorUtilities is a little known utility class that creates and populates object instances with dependancies.

The code implements extension methods on IServiceContainer to provide the functionality. It's deceptively simple:

public static class ServiceUtilities
{
    public static TService? GetComponentService<TService>(this IServiceProvider serviceProvider) where TService : class
    {
        var serviceType = serviceProvider.GetService<TService>()?.GetType();

        if (serviceType is null)
            return ActivatorUtilities.CreateInstance<TService>(serviceProvider);

        return ActivatorUtilities.CreateInstance(serviceProvider, serviceType) as TService;
    }
}

serviceType is either the concrete DI registered object for TService, or null.

If ServiceType is null, there's no definition for TService in the service container; it must be activated directly.

If service type is a type, it's activated as the supplied concrete type.

In either case, the method may return a null if CreateInstance can't create an instance.

There's a second Try wrapper method.

    public static bool TryGetComponentService<TService>(this IServiceProvider serviceProvider,[NotNullWhen(true)] out TService? service) where TService : class
    {
        service = serviceProvider.GetComponentService<TService>();
        return service != null;
    }

CascadingComponentService

CascadingComponentService is a a component wrapper to encapsulate service creation and disposal.

The main code is implemented in SetParametersAsync: everything happens before any render event occurs. IAsyncDisposable is implemented to ensure TService is disposed correctly.

@namespace Blazr.UI
@typeparam TService where TService: class
@implements IAsyncDisposable
@implements IHandleAfterRender
@implements IHandleEvent

<CascadingValue Value="this.ComponentService" IsFixed>
    @this.ChildContent
</CascadingValue>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }

    [Inject] private IServiceProvider serviceProvider { get; set; } = default!;

    public TService? ComponentService { get; set; } = default!;

    private bool _firstRender = true;
    private IDisposable? _disposable;
    private IAsyncDisposable? _asyncDisposable;

    public override Task SetParametersAsync(ParameterView parameters)
    {
        parameters.SetParameterProperties(this);

        if (_firstRender)
        {
            this.ComponentService = serviceProvider.GetComponentService<TService>();

            if (this.ComponentService is null)
                throw new NullReferenceException($"No {typeof(TService).FullName} cound be created.");

            _disposable = this.ComponentService as IDisposable;
            _firstRender = false;
        }
        // Saving CPU Cycles - No Initialized/OnParametersSet run
        this.StateHasChanged();
        return Task.CompletedTask;
    }

    public async ValueTask DisposeAsync()
    {
        _disposable?.Dispose();

        if (this.ComponentService is IAsyncDisposable asyncDisposable)
            await asyncDisposable.DisposeAsync();
    }

    // Saving CPU Cycles - No AfterRender Handling
    Task IHandleAfterRender.OnAfterRenderAsync()
        => Task.CompletedTask;

    // Saving CPU Cycles - No automatic rendering
    Task IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, object? arg)
        => callback.InvokeAsync(arg);
}

Demo Page

The display page demonstrates using CascadingComponentService and how to capture the service.

@page "/"
@implements IDisposable
@implements IHandleAfterRender
@implements IHandleEvent

<PageTitle>Index</PageTitle>

<CascadingComponentService TService="ITimeService" @ref=_service >
    <TimeStamp />
</CascadingComponentService>

<div class="alert alert-info">
    @(_service?.ComponentService?.Message ?? "No message set.")
</div>

@code {
    private CascadingComponentService<ITimeService>? _service;

    protected async override Task OnInitializedAsync()
    {
        await Task.Yield();
        // Yields to let the UI do a first render and ensure _service is assigned
        if (_service is not null && _service.ComponentService is not null)
            _service.ComponentService.TimeChanged += this.OnTimeChanged;
    }

    private void OnTimeChanged(object? sender, EventArgs e)
        => StateHasChanged();

    public void Dispose()
    {
        if (_service is not null && _service.ComponentService is not null)
            _service.ComponentService.TimeChanged -= this.OnTimeChanged;
    }

    // Saving CPU Cycles - No AfterRender Handling
    Task IHandleAfterRender.OnAfterRenderAsync()
        => Task.CompletedTask;
}

You can unwrap the cascade and do it yourself within the root component.

Wrapping Up

That's it, not rocket science or very orignial.

Controlling Routing and Navigation in Blazor Edit Forms

Shaun Curtis — Wed, 15 Jul 2020 21:21:08 +0000

CEC.Routing

Single Page Applications have several issues running as applications in a web browser. One such is navigation: the user can navigate away from the page in a variety of ways where the application has little control over what happens. Data loss often occurs in a less than satisfactory experience for the user.

This library seeks to address the following navigation issues:

Intercepting and potentially cancelling intra-application routing when the page is dirty.
Intercepting and warning on a navigation event away from the application - there's no browser mechanism to prevent this. Entering a new URL in the URL bar, clicking on a favourite, ...

Library and Example Repositories

CEC.Routing is an implementation of the standard Blazor router with functionality needed to control intra-application routing and the onbeforeunload browser event behaviour. It's released and available as a Nuget Package. The source code is available at https://github.com/ShaunCurtis/CEC.Routing.

All the source code is available under the MIT license.

Intra-Application Routing

Intercept routing on a dirty i.e. unsaved data page isn't possible with the out-of-the-box Blazor navigator/router. In fact we have no way to get to the internal routing decision making, so need to start from scratch.

A quick digression on the basics of Blazor navigation/routing.

DOM navigation events such as anchors, etc are captured by the Blazor JavaScript Interop code. They surface in the C# Blazor world through the NavigationManager. The user clicks on an HTML link or navlink in the browser, the NavigationManager service instance gets populated with the relevant URL data and the NavigationManager.LocationChanged event is fired. That's it for the NavigationManager. The heavy lifting is done by the Router. It gets initialized through app.razor on a page load, and wires itself into the NavigationManager.LocationChanged event. The developer has no access to its internal workings, so can't cancel anything.

Fortunately, we can clone the standard router and add the necessary functionality. The new router is called RecordRouter. The key changes to the out-of-the-box router are as follows:

RouterSessionService

Create a new scoped Service called RouterSessionService for controlling and interacting with the RecordRouter.

 public class RouterSessionService
{
/// <summary>
/// Property containing the currently loaded component if set
/// </summary>
public IRecordRoutingComponent ActiveComponent { get; set; }

 /// <summary>
/// Boolean to check if the Router Should Navigate
 /// </summary>

public bool IsGoodToNavigate => this.ActiveComponent?.IsClean ?? true;

/// <summary>
/// Url of Current Page being navigated from
/// </summary>
public string PageUrl => this.ActiveComponent?.PageUrl ?? string.Empty;

 /// <summary>
 /// Url of the previous page
 /// </summary>
public string LastPageUrl { get; set; }

/// <summary>
/// Url of the navigation cancelled page
 /// </summary>

public string NavigationCancelledUrl { get; set; }

/// <summary>
/// Event to notify Navigation Cancellation
/// </summary>

public event EventHandler NavigationCancelled;

/// <summary>
/// Event to notify that Intra Page Navigation has taken place
/// useful when using Querystring controlled pages
 /// </summary>
public event EventHandler IntraPageNavigation;

private readonly IJSRuntime _js;

private bool _ExitShowState { get; set; }

public RouterSessionService(IJSRuntime js) => _js = js;

/// <summary>
/// Method to trigger the NavigationCancelled Event
/// </summary>
public void TriggerNavigationCancelledEvent() => this.NavigationCancelled?.Invoke(this, EventArgs.Empty);

/// <summary>
/// Method to trigger the IntraPageNavigation Event
/// </summary>
public void TriggerIntraPageNavigation() => this.IntraPageNavigation?.Invoke(this, EventArgs.Empty);

/// <summary>
/// Method to set or unset the browser onbeforeexit challenge
/// </summary>
/// <param name="action"></param>
/// <returns></returns>
public void SetPageExitCheck(bool show)
 {
   if (show != _ExitShowState) _js.InvokeAsync<bool>("cec_setEditorExitCheck", show);
    _ExitShowState = show;
 }
}

RecordRouter

This is a straight clone of the shipped router. The only changes are in the OnLocationChanged event handler. It now looks like this:

private void OnLocationChanged(object sender, LocationChangedEventArgs args)
{

  // Get the Page Uri minus any query string
  var pageurl = this.NavigationManager.Uri.Contains("?") ? this.NavigationManager.Uri.Substring(0, this.NavigationManager.Uri.IndexOf("?")): this.NavigationManager.Uri ;
  _locationAbsolute = args.Location;

  // CEC ADDED - SessionState Check for Unsaved Page
  if (_renderHandle.IsInitialized && Routes != null && this.RouterSessionService.IsGoodToNavigate)
  {
    // Clear the Active Component - let the next page load itself into it if required
    this.RouterSessionService.ActiveComponent = null;
    this.RouterSessionService.NavigationCancelledUrl = null;
    Refresh(args.IsNavigationIntercepted);
  }
  else
  {
    // CEC ADDED - Trigger a Navigation Cancelled Event on the SessionStateService
    if (this.RouterSessionService.PageUrl.Equals(_locationAbsolute, StringComparison.CurrentCultureIgnoreCase))
      {
        // Cancel routing
        this.RouterSessionService.TriggerNavigationCancelledEvent();
      }
    else
    {
      // we're cancelling routing, but the Navigation Manager is current set to the aborted page
      // so we set the navigation cancelled url so the page can navigate to it if necessary
      // and do a dummy trip through the Navigation Manager again to set this back to the original page
      this.RouterSessionService.NavigationCancelledUrl = this.NavigationManager.Uri;
      this.NavigationManager.NavigateTo(this.RouterSessionService.PageUrl);
    }
  }
  if (RouterSessionService.LastPageUrl != null && RouterSessionService.LastPageUrl.Equals(pageurl, StringComparison.CurrentCultureIgnoreCase)) RouterSessionService.TriggerIntraPageNavigation();
  RouterSessionService.LastPageUrl = pageurl;
}

On a NavigationManager.LocationChanged event, the method:

Gets the page URL minus any query string, and checks if we are good to route. (I like to use a combination of routing and query strings - more flexible than all routing in many instances).

Yes - clears out the relevant fields on the RouterSessionService and routes through the Refresh method.

No - triggers a NavigationCancelled event. We solve the displayed URL issue by making a second dummy run through navigation to reset the displayed URL. Anyone know a better way?
Check for Intra-Page Navigation and trigger the IntraPageNavigation event if needed. Useful where only the query string changes.

The routing is controlled by the IsGoodToNavigate property on the RouterSessionService.

public bool IsGoodToNavigate => this.ActiveComponent?.IsClean ?? true;

This is only false when we cancel routing - i.e. the ActiveComponent exists and is dirty. A lot of coding/refactoring to make a binary check!

Setting up you site to use the Router

Install the Nuget Package

Startup.cs

Add the CEC.Routing services

using CEC.Routing;
 
public void ConfigureServices(IServiceCollection services)
{
....
services.AddCECRouting();
....
}

_Imports.razor

Add the following namespace references

@using CEC.Routing
@using CEC.Routing.Services
@using CEC.Routing.Router

App.razor

Change the name of the Router to RecordRouter

<RecordRouter AppAssembly="@typeof(Program).Assembly">
......
</RecordRouter>

Implementing the Router

There's a sample site on the Github repository demonstrating the use of the library on a WeatherForecast editor.

NOTE - Record routing only kicks in if you set up a page component to use it. Normal pages will route as normal: you don't need to configure them not to.

You interact with the router through the RouterSessionService. To configure a page to use the extra routing functionality:

Inject the service into any edit page.
Implement the IRecordRoutingComponent Interface on the page

Next you need to add an event handler for the navigation cancelled event. This should contain code to tell the user that navigation was cancelled and potentially ask them if they really want to leave the page.

protected virtual void OnNavigationCancelled(object sender, EventArgs e)
{
  this.NavigationCancelled = true;
  this.ShowExitConfirmation = true;
  this.AlertMessage.SetAlert("<b>THIS RECORD ISN'T SAVED</b>. Either <i>Save</i> or <i>Exit Without Saving</i>.", Alert.AlertDanger);
  InvokeAsync(this.StateHasChanged);
}

This one (from the EditRecordComponentBase boilerplate in the project):

Sets a couple of local properties used in controlling which buttons display when.
Sets an alert box to display.
Calls StateHasChanged to refresh the UI.

Add the following code to the component OnInitialized or OnInitializedAsync event

  this.PageUrl = this.NavManager.Uri;
  this.RouterSessionService.ActiveComponent = this;
  this.RouterSessionService.NavigationCancelled += this.OnNavigationCancelled;

This:

Sets the PageURL property to the current URL (pages names/directories and routing URLs are now very different).
Sets the RouterSessionService ActiveComponent reference to the component.
Attaches the above event hander to the RouterSessionService NavigationCancelled Event.

The final bit of the jigsaw is connecting the IRecordRoutingComponent.IsClean property. Its important to get this right. The router uses this property to route/cancel routing.

In my projects it's wired directly to the IsClean property on the specific data service associated with the record. It gets set when the record in the service changes.

In the CEC.Routing sample project it's set and unset in the CheckForChanges method which is called whenever an edit control is changed.

The following code shows how to override the cancel routing event - such as when the users wants to exit regardless.

        protected void ConfirmExit()
        {
            this.IsClean = true;
            if (!string.IsNullOrEmpty(this.RouterSessionService.NavigationCancelledUrl)) this.NavManager.NavigateTo(this.RouterSessionService.NavigationCancelledUrl);
            else if (!string.IsNullOrEmpty(this.RouterSessionService.LastPageUrl)) this.NavManager.NavigateTo(this.RouterSessionService.LastPageUrl);
            else this.NavManager.NavigateTo("/");
        }

Note that the RouterSessionService holds the cancelled URL.

Intercepting/Warning on external Navigation

You can't lock down the browser window to stop this - I wish we could. The only control browsers offer is the onbeforeunload event. When a function is registered on this event, the browser displays a popup warning dialog, giving the user the option to cancel navigation. The degree of control, what appears in the box, and what you need the attached function to do differs across browsers.

The sledgehammer approach is to add the following to your _Host.html file:

<script>
  window.onbeforeunload = function () {
    return "Do you really want to leave?";
  };
</script>

It forces a popup exit box whenever the users tries to leave the application, like using a wrecking ball to crack a nut. There are many instances where you want to leave the application - authentication, print pages to name a couple. Having the exit popup box coming up every time is a pain.

CEC.Routing implements a more nuanced and focused alternative. It still uses the onbeforeunload event, but dynamically registers and unregisters with the event as needed. i.e. only when a form is dirty.

CEC.Routing.js

The client side Javascript files looks like this (pretty self explanatory):

window.cec_setEditorExitCheck = function (show) {
  if (show) {
    window.addEventListener("beforeunload", cec_showExitDialog);
  }
  else {
    window.removeEventListener("beforeunload", cec_showExitDialog);
  }
}

window.cec_showExitDialog = function (event) {
  event.preventDefault();
  event.returnValue = "There are unsaved changes on this page. Do you want to leave?";
}

The JSInterop code is implemented as a method in RouteSessionService.

private bool _ExitShowState { get; set; }
public void SetPageExitCheck(bool show)
  {
    if (show != _ExitShowState) _js.InvokeAsync<bool>("cec_setEditorExitCheck", show);
   _ExitShowState = show;
  }

Add the following script reference to the _Host.html next to the blazor.server.js reference.

<script src="_content/CEC.Routing/cec.routing.js"></script>

In the CEC.Routing sample WeatherForcastEditor:

protected void CheckClean(bool setclean = false)
{
    if (setclean) this.IsClean = true;
    if (this.IsClean)
    {
      this.Alert.ClearAlert();
      this.RouterSessionService.SetPageExitCheck(false);
    }
    else
    {
      this.Alert.SetAlert("Forecast Changed", Alert.AlertWarning);
      this.RouterSessionService.SetPageExitCheck(true);
    }
}

This method is called by the OnFieldChanged event handler, and the Save and ConfirmExit methods.