diff --git a/aspnetcore/blazor/components/prerendering-and-integration.md b/aspnetcore/blazor/components/prerendering-and-integration.md index aebacd058c78..69e2e6f974fd 100644 --- a/aspnetcore/blazor/components/prerendering-and-integration.md +++ b/aspnetcore/blazor/components/prerendering-and-integration.md @@ -732,25 +732,9 @@ For more information, see . ## Preserve prerendered state -Without preserving prerendered state, any state that used during prerendering is lost and must be recreated when the app is fully loaded. If any state is setup asynchronously, the UI may flicker as the prerendered UI is replaced with temporary placeholders and then fully rendered again. +Without preserving prerendered state, state used during prerendering is lost and must be recreated when the app is fully loaded. If any state is setup asynchronously, the UI may flicker as the prerendered UI is replaced with temporary placeholders and then fully rendered again. -To solve these problems, Blazor supports persisting state in a prerendered page using the [Preserve Component State Tag Helper](xref:mvc/views/tag-helpers/builtin-th/preserve-component-state-tag-helper) (``). Add the `` tag inside the closing `` tag of `_Layout.cshtml`. - -::: zone pivot="webassembly" - -`Pages/_Layout.cshtml`: - -```cshtml - - ... - - - -``` - -::: zone-end - -::: zone pivot="server" +To solve these problems, Blazor supports persisting state in a prerendered page using the [Preserve Component State Tag Helper](xref:mvc/views/tag-helpers/builtin-th/preserve-component-state-tag-helper) (``). Add the `` tag inside the closing `` tag. `Pages/_Layout.cshtml`: @@ -762,32 +746,67 @@ To solve these problems, Blazor supports persisting state in a prerendered page ``` -::: zone-end +In the app, decide what state to persist using the `PersistentComponentState` service. The `PersistentComponentState.RegisterOnPersisting` event is fired just before the state is persisted into the prerendered page, which allows a component to retrieve the state when initializing the component. -In the app, decide what state to persist using the `ComponentApplicationState` service. The `ComponentApplicationState.OnPersisting` event is fired just before the state is persisted into the prerendered page, which allows a component to retrieve the state when initializing the component. - -The following example shows how the weather forecast in the `FetchData` component from an app based on the Blazor project template is persisted during prerendering and then retrieved to initialize the component. The Persist Component State Tag Helper persists the component state after all component invocations. +The following example shows how the weather forecast in the `FetchData` component from a hosted Blazor WebAssembly app based on the Blazor project template is persisted during prerendering and then retrieved to initialize the component. The Persist Component State Tag Helper persists the component state after all component invocations. `Pages/FetchData.razor`: ```razor @page "/fetchdata" @implements IDisposable -@inject ComponentApplicationState ApplicationState +@using BlazorSample.Shared +@inject IWeatherForecastService WeatherForecastService +@inject PersistentComponentState ApplicationState + +

Weather forecast

-... +

This component demonstrates fetching data from the server.

+ +@if (forecasts == null) +{ +

Loading...

+} +else +{ + + + + + + + + + + + @foreach (var forecast in forecasts) + { + + + + + + + } + +
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
+} @code { - private WeatherForecast[] forecasts; + private WeatherForecast[] forecasts = Array.Empty(); + private PersistingComponentStateSubscription _persistingSubscription; protected override async Task OnInitializedAsync() { - ApplicationState.OnPersisting += PersistForecasts; + _persistingSubscription = ApplicationState.RegisterOnPersisting(PersistForecasts); - if (!ApplicationState - .TryTakeAsJson("fetchdata", out forecasts)) + if (!ApplicationState.TryTakeFromJson("fetchdata", out var restored)) + { + forecasts = await WeatherForecastService.GetForecastAsync(DateTime.Now); + } + else { - forecasts = await ForecastService.GetForecastAsync(DateTime.Now); + forecasts = restored!; } } @@ -800,7 +819,7 @@ The following example shows how the weather forecast in the `FetchData` componen void IDisposable.Dispose() { - ApplicationState.OnPersisting -= PersistForecasts; + _persistingSubscription.Dispose(); } } ```