Предварительный рендеринг компонентов ASP.NET Core Razor

Чтобы сохранить предварительно созданное состояние, используйте [SupplyParameterFromPersistentComponentState] атрибут для сохранения состояния в свойствах. Свойства с этим атрибутом автоматически сохраняются с помощью службы PersistentComponentState при предпросмотре. Состояние извлекается при интерактивном рендеринге компонента или при создании экземпляра службы.

По умолчанию свойства сериализуются с помощью сериализатора System.Text.Json с параметрами по умолчанию. Сериализация не является безопасной и требует сохранения используемых типов. Дополнительные сведения см. в статье Настройка средства обрезки для ASP.NET Core Blazor.

В следующем примере показан общий шаблон, в котором {TYPE} заполнитель представляет тип сохраняемых данных.

@code {
    [SupplyParameterFromPersistentComponentState]
    public {TYPE} Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Data ??= await ...;
    }
}

Следующий пример компонента счетчика сохраняет состояние счетчика во время предварительной отрисовки и извлекает его для инициализации компонента.

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: @CurrentCount</p>

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

@code {
    [SupplyParameterFromPersistentComponentState]
    public int CurrentCount { get; set; }

    protected override void OnInitialized()
    {
        CurrentCount ??= Random.Shared.Next(100);
        Logger.LogInformation("CurrentCount set to {Count}", CurrentCount);
    }

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

В следующем примере, который демонстрирует сериализацию состояния для нескольких компонентов одного типа:

• Свойства, аннотированные атрибутом [SupplyParameterFromPersistentComponentState] , сериализуются и десериализируются во время предварительной подготовки.
• Атрибут@key директивы используется для обеспечения правильности связи состояния с экземпляром компонента.
• Свойство Element инициализируется в методеOnInitialized жизненного цикла, чтобы избежать исключений нулевой ссылки, аналогично тому, как предотвращаются нулевые ссылки для параметров запроса и данных формы.

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" />
}

В следующем примере, который сериализует состояние службы:

• Свойства, аннотированные атрибутом [SupplyParameterFromPersistentComponentState] , сериализуются во время предварительной отрисовки и десериализации, когда приложение становится интерактивным.
• Метод AddPersistentService используется для регистрации службы для сохраняемости. Режим отрисовки является обязательным, так как режим отрисовки не может быть выведен из типа службы. Используйте любое из следующих значений:
  • RenderMode.Server: Услуга доступна для режима рендеринга Интерактивного Сервера.
  • RenderMode.Webassembly: Услуга доступна для режима интерактивной отрисовки WebAssembly.
  • RenderMode.InteractiveAuto: служба доступна для режимов отрисовки интерактивного сервера и интерактивного вебассембли, если компонент отрисовывается в любом из этих режимов.
• Служба определяется во время инициализации интерактивного режима рендеринга, а свойства, аннотированные атрибутом [SupplyParameterFromPersistentComponentState], десериализируются.

CounterService.cs:

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

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

В Program.cs:

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

Сериализованные свойства определяются из фактического экземпляра службы:

• Такой подход позволяет пометить абстракцию как устойчивую службу.
• Позволяет фактическим реализациям быть внутренними или разными типами.
• Поддерживает общий код в разных сборках.
• Приводит к тому, что каждый экземпляр обнаруживает одинаковые свойства.

В качестве альтернативы использованию декларативной модели для сохранения состояния с [SupplyParameterFromPersistentComponentState] атрибутом можно использовать PersistentComponentState службу напрямую, которая обеспечивает большую гибкость для сложных сценариев сохраняемости состояния. Вызовите PersistentComponentState.RegisterOnPersisting, чтобы зарегистрировать обратный вызов для сохранения состояния компонента во время предварительного рендеринга. Состояние извлекается при интерактивном отображении компонента. Выполните вызов в конце кода инициализации, чтобы избежать потенциального условия гонки при завершении работы приложения.

В следующем примере показан общий шаблон:

• Заполнитель {TYPE} представляет тип сохраняемых данных.
• Заполнитель {TOKEN} — это строка идентификатора состояния. Рекомендуется использовать nameof({VARIABLE}), где {VARIABLE} заполнитель — это имя переменной, содержащей состояние. Использование nameof() для идентификатора состояния позволяет избежать использования кавычек.

@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }

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

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Следующий пример компонента счетчика сохраняет состояние счетчика во время предварительной отрисовки и извлекает его для инициализации компонента.

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();
}

Чтобы сохранить предварительно созданное состояние, определите, какое состояние следует сохранить с помощью PersistentComponentState службы. PersistentComponentState.RegisterOnPersisting регистрирует обратный вызов для сохранения состояния компонента во время предварительной подготовки. Состояние извлекается при интерактивном отображении компонента. Выполните вызов в конце кода инициализации, чтобы избежать потенциального состояния гонки во время завершения работы приложения.

В следующем примере показан общий шаблон:

• Заполнитель {TYPE} представляет тип сохраняемых данных.
• Заполнитель {TOKEN} — это строка идентификатора состояния. Рекомендуется использовать nameof({VARIABLE}), где {VARIABLE} заполнитель — это имя переменной, содержащей состояние. Использование nameof() для идентификатора состояния позволяет избежать использования кавычек.

@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }

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

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Следующий пример компонента счетчика сохраняет состояние счетчика во время предварительной отрисовки и извлекает его для инициализации компонента.

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++;
}