Overzicht van ASP.NET Kernstatusbeheer Blazor

In dit artikel en de andere artikelen in dit knooppunt worden algemene benaderingen beschreven voor het onderhouden van de gegevens (status) van een gebruiker terwijl ze een app en in browsersessies gebruiken, waaronder tijdens het voorbereiden van de server.

Een typische vereiste tijdens Blazor het ontwikkelen van apps is het delen van de status van alle onderdelen:

• Bovenliggend naar onderliggend onderdeel: een bovenliggend onderdeel geeft de status door aan een onderliggend onderdeel met behulp van parameters.
• Onderliggend naar bovenliggend onderdeel: Een onderliggend onderdeel maakt gegevensbinding mogelijk met de status of biedt status via callbacks.
• Bovenliggend op afstammelingen: een bovenliggende status deelt met alle onderliggende waarden met behulp van trapsgewijze waarden.
• App-breed: Status wordt gedeeld in de hele app met behulp van geconfigureerde app-statusservices.
• Per circuit: Status wordt gedeeld voor een specifiek circuit met behulp van app-statusservices binnen het bereik.

Persistente status moet mogelijk de pagina's vernieuwen, hervate circuits en prerendering overleven. Status vereist vaak centraal beheer, tracering en testen. De locaties en technieken voor persistente status zijn zeer variabel.

Blazor biedt geen uitgebreid, geveerd statusbeheer. Containerproducten en -services van derden die naadloos werken met Blazor, zoals Flux, Redux en MobX, voldoen aan vrijwel elke app-vereiste.

In de rest van dit artikel worden algemene strategieën voor statusbeheer voor elk type Blazor app besproken.

Statusbeheer met behulp van de URL

Voor tijdelijke gegevens die de navigatiestatus vertegenwoordigen, modelleert u de gegevens als onderdeel van de URL. Voorbeelden van gebruikersstatus die in de URL zijn gemodelleerd, zijn:

• De id van een bekeken entiteit.
• Het huidige paginanummer in een gepaginad raster.

De inhoud van de adresbalk van de browser blijft behouden:

• Als de gebruiker de pagina handmatig opnieuw laadt.
• Alleen scenario's aan de serverzijde: als de webserver niet meer beschikbaar is en de gebruiker wordt gedwongen de pagina opnieuw te laden om verbinding te maken met een andere server.

Zie Blazorvoor informatie over het definiëren van URL-patronen met de -instructie.

Containerservice voor status in het geheugen

Geneste onderdelen binden gegevens doorgaans met behulp van gekoppelde binding zoals beschreven in ASP.NET Core Blazor gegevensbinding. Geneste en niet-geneste onderdelen kunnen toegang tot gegevens delen met behulp van een geregistreerde in-memory statuscontainer. Een aangepaste statuscontainerklasse kan een toewijsbare Action gebruiken om onderdelen in verschillende delen van de app met statuswijzigingen op de hoogte te stellen. In het volgende voorbeeld:

• Een paar onderdelen maakt gebruik van een statuscontainer om een eigenschap bij te houden.
• Het ene onderdeel in het volgende voorbeeld is genest in het andere onderdeel, maar nesten is niet vereist voor deze aanpak.

StateContainer.cs:

public class StateContainer
{
    private string? savedString;

    public string Property
    {
        get => savedString ?? string.Empty;
        set
        {
            savedString = value;
            NotifyStateChanged();
        }
    }

    public event Action? OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

Apps aan de clientzijde (Program bestand):

builder.Services.AddSingleton<StateContainer>();

Apps aan de serverzijde (Program bestand, ASP.NET Core in .NET 6 of hoger):

builder.Services.AddScoped<StateContainer>();

Apps aan de serverzijde (Startup.ConfigureServices meestal Startup.csin .NET 6 of eerder):

services.AddScoped<StateContainer>();

Shared/Nested.razor:

@implements IDisposable
@inject StateContainer StateContainer

<h2>Nested component</h2>

<p>Nested component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the Nested component
    </button>
</p>

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = 
            $"New value set in the Nested component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

StateContainerExample.razor:

@page "/state-container-example"
@implements IDisposable
@inject StateContainer StateContainer

<h1>State Container Example component</h1>

<p>State Container component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the State Container Example component
    </button>
</p>

<Nested />

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = "New value set in the State " +
            $"Container Example component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

De voorgaande onderdelen implementeren IDisposableen de OnChange gemachtigden worden afgemeld bij de Dispose methoden, die door het framework worden aangeroepen wanneer de onderdelen worden verwijderd. Zie ASP.NET Core Razor componentafhandelingvoor meer informatie.

Overlopende waarden en parameters

Gebruik trapsgewijze waarden en parameters om de status te beheren door gegevens van een bovenliggend Razor onderdeel naar afstammende onderdelen te stromen:

• Om de status over veel componenten te gebruiken.
• Als er slechts één statusobject op het hoogste niveau is om vast te houden.

Statuswijzigingen van buiten Blazorde synchronisatiecontext ondersteunen

Wanneer u een aangepaste statusbeheerservice gebruikt waar u statuswijzigingen wilt ondersteunen van buiten Blazorsynchronisatiecontext (bijvoorbeeld van een timer of een achtergrondservice), moeten alle verbruikende onderdelen de StateHasChanged oproep in ComponentBase.InvokeAsyncverpakken. Dit zorgt ervoor dat de wijzigingsmelding wordt verwerkt in de synchronisatiecontext van de renderer.

Wanneer de statusbeheerservice geen StateHasChanged aanroept in de synchronisatiecontext van Blazor, wordt de volgende fout gegenereerd:

System.InvalidOperationException: 'De huidige thread is niet gekoppeld aan de dispatcher. Gebruik InvokeAsync() om de uitvoering over te schakelen naar de Dispatcher bij het activeren van rendering of onderdeelstatus.'

Zie ASP.NET Core Razor component renderingvoor meer informatie en een voorbeeld van het oplossen van deze fout.