Prerender ASP.NET Core Razor-componenten

Om de voorgerenderde status te behouden, gebruikt u het [SupplyParameterFromPersistentComponentState]-kenmerk om de status in eigenschappen te behouden. Eigenschappen met dit kenmerk worden tijdens het prerenderen automatisch opgeslagen met behulp van de PersistentComponentState service. De status wordt opgehaald wanneer het onderdeel interactief wordt weergegeven of wanneer de service wordt geïnstantieerd.

Standaard worden eigenschappen geserialiseerd met behulp van de System.Text.Json serialisatiefunctie met standaardinstellingen. Serialisatie is niet veilig en vereist behoud van de gebruikte typen. Zie De trimmer configureren voor ASP.NET Core Blazorvoor meer informatie.

Het volgende telleronderdeel blijft de tellerstatus behouden tijdens het prerenderen en haalt de status op om het onderdeel te initialiseren:

• Het [SupplyParameterFromPersistentComponentState] kenmerk wordt toegepast op het CounterState type (State).
• De status van de teller wordt toegewezen wanneer null in OnInitialized en automatisch hersteld wanneer het onderdeel interactief wordt gerenderd.

PrerenderedCounter2.razor:

@page "/prerendered-counter-2"
@inject ILogger<PrerenderedCounter2> Logger

<PageTitle>Prerendered Counter 2</PageTitle>

<h1>Prerendered Counter 2</h1>

<p role="status">Current count: @State?.CurrentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    [SupplyParameterFromPersistentComponentState]
    public CounterState? State { get; set; }

    protected override void OnInitialized()
    {
        if (State is null)
        {
            State = new() { CurrentCount = Random.Shared.Next(100) };
            Logger.LogInformation("CurrentCount set to {Count}", 
                State.CurrentCount);
        }
        else
        {
            Logger.LogInformation("CurrentCount restored to {Count}", 
                State.CurrentCount);
        }
    }

    private void IncrementCount()
    {
        if (State is not null)
        {
            State.CurrentCount++;
        }
    }

    public class CounterState
    {
        public int CurrentCount { get; set; }
    }
}

Wanneer het onderdeel wordt uitgevoerd, wordt CurrentCount slechts eenmaal ingesteld tijdens het prerenderen. De waarde wordt hersteld wanneer het onderdeel opnieuw wordt gebruikt. Hier volgt voorbeelduitvoer.

info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
CurrentCount set to 96
info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
CurrentCount restored to 96

In het volgende voorbeeld wordt de status voor meerdere onderdelen van hetzelfde type geserialiseerd:

• Eigenschappen die zijn geannoteerd met het [SupplyParameterFromPersistentComponentState] kenmerk, worden geserialiseerd en gedeserialiseerd tijdens het prerendering.
• Het @key instructiekenmerk wordt gebruikt om ervoor te zorgen dat de status correct is gekoppeld aan het onderdeelexemplaar.
• De Element eigenschap wordt geïnitialiseerd in de OnInitialized levenscyclusmethode om null-verwijzingsonderzonderingen te voorkomen, net zoals null-verwijzingen worden vermeden voor queryparameters en formuliergegevens.

PersistentChild.razor:

<div>
    <p>Current count: @Element.CurrentCount</p>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</div>

@code {
    [SupplyParameterFromPersistentComponentState]
    public State Element { get; set; }

    protected override void OnInitialized()
    {
        Element ??= new State();
    }

    private void IncrementCount()
    {
        Element.CurrentCount++;
    }

    private class State
    {
        public int CurrentCount { get; set; }
    }
}

Parent.razor:

@page "/parent"

@foreach (var element in elements)
{
    <PersistentChild @key="element.Name" />
}

In het volgende voorbeeld wordt de status voor een afhankelijkheidsinjectieservice geserialiseerd:

• Eigenschappen die zijn geannoteerd met het [SupplyParameterFromPersistentComponentState] kenmerk, worden geserialiseerd tijdens het prerendering en gedeserialiseerd wanneer de app interactief wordt.
• De RegisterPersistentService extensiemethode wordt gebruikt om de service te registreren voor persistentie. De rendermodus is vereist omdat de weergavemodus niet kan worden afgeleid van het servicetype. Gebruik een van de volgende waarden:
  • RenderMode.Server: De service is beschikbaar voor de weergavemodus Interactive Server.
  • RenderMode.Webassembly: De service is beschikbaar voor de weergavemodus Interactive WebAssembly.
  • RenderMode.InteractiveAuto: De service is beschikbaar voor zowel de weergavemodi Interactieve Server als Interactieve Webassembly als een component in een van die modi wordt weergegeven.
• De service wordt opgelost tijdens de initialisatie van een interactieve rendermodus en de eigenschappen die zijn geannoteerd met het [SupplyParameterFromPersistentComponentState] kenmerk, worden gedeserialiseerd.

CounterService.cs:

public class CounterService
{
    [SupplyParameterFromPersistentComponentState]
    public int CurrentCount { get; set; }

    public void IncrementCount()
    {
        CurrentCount++;
    }
}

In Program.cs:

builder.Services.RegisterPersistentService<CounterService>(
    RenderMode.InteractiveAuto);

Geserialiseerde eigenschappen worden geïdentificeerd vanuit het werkelijke service-exemplaar:

• Met deze benadering kunt u een abstractie markeren als een permanente service.
• Hiermee kunnen werkelijke implementaties intern of verschillende typen zijn.
• Ondersteunt gedeelde code in verschillende assembly's.
• Resulteert in elk exemplaar dat dezelfde eigenschappen toont.

Als alternatief voor het gebruik van het declaratieve model voor persistentie met het [SupplyParameterFromPersistentComponentState] kenmerk kunt u de PersistentComponentState service rechtstreeks gebruiken, wat meer flexibiliteit biedt voor complexe scenario's voor statuspersistentie. Roep PersistentComponentState.RegisterOnPersisting aan om een callback te registreren om de status van het onderdeel tijdens het voorrenderen te behouden. De status wordt opgehaald wanneer het onderdeel interactief wordt weergegeven. Maak de aanroep aan het einde van de initialisatiecode om tijdens het afsluiten van de app een potentiële raceconditie te voorkomen.

In het volgende voorbeeld van het tellerelement wordt de tellerstatus behouden tijdens het prerenderen en wordt de status opgehaald om het element te initialiseren.

PrerenderedCounter3.razor:

@page "/prerendered-counter-3"
@implements IDisposable
@inject ILogger<PrerenderedCounter3> Logger
@inject PersistentComponentState ApplicationState

<PageTitle>Prerendered Counter 3</PageTitle>

<h1>Prerendered Counter 3</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override void OnInitialized()
    {
        if (!ApplicationState.TryTakeFromJson<int>(
            nameof(currentCount), out var restoredCount))
        {
            currentCount = Random.Shared.Next(100);
            Logger.LogInformation("currentCount set to {Count}", currentCount);
        }
        else
        {
            currentCount = restoredCount!;
            Logger.LogInformation("currentCount restored to {Count}", currentCount);
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistCount);
    }

    private Task PersistCount()
    {
        ApplicationState.PersistAsJson(nameof(currentCount), currentCount);

        return Task.CompletedTask;
    }

    private void IncrementCount() => currentCount++;

    void IDisposable.Dispose() => persistingSubscription.Dispose();
}

Wanneer het onderdeel wordt uitgevoerd, wordt currentCount slechts eenmaal ingesteld tijdens het prerenderen. De waarde wordt hersteld wanneer het onderdeel opnieuw wordt gebruikt. Hier volgt voorbeelduitvoer.

info: BlazorSample.Components.Pages.PrerenderedCounter3[0]
currentCount set to 96
info: BlazorSample.Components.Pages.PrerenderedCounter3[0]
currentCount restored to 96

Als u de vooraf samengestelde status wilt behouden, bepaalt u welke status moet worden behouden met behulp van de PersistentComponentState-service. PersistentComponentState.RegisterOnPersisting registreert een callback om de status van het onderdeel tijdens het voorbereiden vast te houden. De status wordt opgehaald wanneer het onderdeel interactief wordt weergegeven. Maak de aanroep aan het einde van de initialisatiecode om tijdens het afsluiten van de app een potentiële raceconditie te voorkomen.

In het volgende voorbeeld van het tellerelement wordt de tellerstatus behouden tijdens het prerenderen en wordt de status opgehaald om het element te initialiseren.

PrerenderedCounter2.razor:

@page "/prerendered-counter-2"
@implements IDisposable
@inject ILogger<PrerenderedCounter2> Logger
@inject PersistentComponentState ApplicationState

<PageTitle>Prerendered Counter 2</PageTitle>

<h1>Prerendered Counter 2</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override void OnInitialized()
    {
        if (!ApplicationState.TryTakeFromJson<int>(
            nameof(currentCount), out var restoredCount))
        {
            currentCount = Random.Shared.Next(100);
            Logger.LogInformation("currentCount set to {Count}", currentCount);
        }
        else
        {
            currentCount = restoredCount!;
            Logger.LogInformation("currentCount restored to {Count}", currentCount);
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistCount);
    }

    private Task PersistCount()
    {
        ApplicationState.PersistAsJson(nameof(currentCount), currentCount);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose() => persistingSubscription.Dispose();

    private void IncrementCount() => currentCount++;
}

Wanneer het onderdeel wordt uitgevoerd, wordt currentCount slechts eenmaal ingesteld tijdens het prerenderen. De waarde wordt hersteld wanneer het onderdeel opnieuw wordt gebruikt. Hier volgt voorbeelduitvoer.

info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
currentCount set to 96
info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
currentCount restored to 96