Blazor
一个免费的开源 Web 框架,使开发人员能够使用 Microsoft 开发的 C# 和 HTML 创建 Web 应用。
20 个问题
大家好。
在 Blazor 应用程序的默认模板中,单击按钮时,计数变量将增加 1。但是当导航到其他组件然后返回计数器组件时,计数值将重置为 0,我需要在此默认模板中做哪些更改来修复此问题,以便在返回时保留值。
谢谢。
注意: 该问题整理于:Blazor default template application issue。
你好,
可以使用内存中状态容器服务或浏览器存储利用(ASP.NET Core 数据保护)用于 localStorage
and sessionStorage
来保留数据。
例如,使用内存中状态容器服务:
public class StateContainer
{
private int? savedCounter;
public int Counter
{
get => savedCounter ?? 0;
set
{
savedCounter = value;
NotifyStateChanged();
}
}
public event Action? OnChange;
private void NotifyStateChanged() => OnChange?.Invoke();
}
builder.Services.AddSingleton<StateContainer>();
@page "/counter"
@using BlazorWebAssemblyApp2.Models;
@implements IDisposable
@inject StateContainer StateContainer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
protected override void OnInitialized()
{
StateContainer.OnChange += StateHasChanged;
currentCount = StateContainer.Counter;
}
private void IncrementCount()
{
currentCount++;
StateContainer.Counter = currentCount;
}
public void Dispose()
{
StateContainer.OnChange -= StateHasChanged;
}
}
结果如下:
如果应用程序是 Blazor 服务器应用程序,也可以使用上述代码,或者参考以下代码使用 ProtectedBrowserStorage 保留数据,也会得到相同的结果。
@page "/counter"
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
protected override async Task OnInitializedAsync()
{
var result = await ProtectedSessionStore.GetAsync<int>("count");
currentCount = result.Success ? result.Value : 0;
}
private async void IncrementCount()
{
currentCount++;
await ProtectedSessionStore.SetAsync("count", currentCount);
}
}
有关详细信息,请参阅 ASP.NET Core Blazor 状态管理。
如果答案是正确的,请点击“接受答案”并点赞。 如果您对此答案还有其他疑问,请点击“评论”。 注意:如果您想接收相关电子邮件,请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。