Csharp 如何在页面重新加载后保持菜单切换状态

发布于02月25日

Explanation个

我是.NET Blazor的新手.

我想要做的是使用.NET Blazor中的默认切换按钮，并将其值存储在某个地方.

然后如果我 Select 这个菜单必须隐藏，在页面刷新时，它保持隐藏;否则它保持打开.

Question个

如何才能正确地做到这一点呢？

这就是我到目前为止所做的:

MainLayout.Razor:

 <button onclick="Toggle();">
 Toggle
 </button>

代码:

@code {
    public static bool _menuOpen = true;

    void Toggle()
    {
        _menuOpen = !_menuOpen;
    }
}

推荐答案

正如你所指出的.你必须把信息存储在某个地方.

最好将其存储在本地存储中，您可以通过js函数访问:

<div>
    <button @onclick="ChangeMenuState">Menu open/close</button>
    Menu is: @_menuOpen
</div>

@code{
    bool _menuOpen;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                _menuOpen = bool.Parse(await Js.InvokeAsync<string>("localStorage.getItem", nameof(_menuOpen)));
                StateHasChanged();
            }
            catch
            {
                Console.WriteLine($"local storage not set for {_menuOpen}");
            }
        }
    }

    async Task ChangeMenuState()
    {
        _menuOpen = !_menuOpen;
        await Js.InvokeVoidAsync("localStorage.setItem", nameof(_menuOpen), _menuOpen);
    }

}