当我导航到新页面时，如何停止 .net 8.0 Blazor WebAssembly 中的复选框呈现为勾选状态？

Question

我创建了一个 .net 8.0 blazor Web 应用程序解决方案。 Web项目标准如下代码：

App.razor

<!DOCTYPE html>
<html lang="en-GB">
<head>
<base href="/"/>
<title>My Awesome Web Application</title>
<HeadOutlet/>
</head>
<body>
<Routes/>
<script src="_framework/blazor.web.js"></script>
</body>
</html>

布局.razor

@using myawesomeproject.shared.components
@inherits LayoutComponentBase

<Header @rendermode="InteractiveWebAssembly"/>

@Body

Myawesomehomepage.razor

@page "/"
<h1>Home page</h1>

Myawesomepage.razor

@page "/myawesomepage"

<h1>My awesome page</h1>

Myotherawesomepage.razor

@page "/myawesomeotherpage"

<h1>My awesome other page</h1>

在共享剃刀组件的项目中，我有以下内容：

标题.razor

<header>
    <input @bind="ticked" type="checkbox" role="button"/>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/myawesomepage">My awesome page</a></li>
        <li><a href="/myawesomeotherpage">My awesome other page</a></li>
      </ul>
  </nav>
  </header>
  
  @code
  {
   private bool? ticked = false;

   protected override void OnInitialized()
   {
     ticked = null;
     StateHasChanged();
   }
  }

布局剃刀组件包含标题剃刀组件，该组件又包含一个绑定到名为“ticked”的本地布尔值的复选框，并呈现为交互式 Web 程序集。

单击标题中的超链接时，浏览器将导航到新的服务器 Razor 页面，其中包括布局和标题组件。

虽然 header 组件将勾选设置为 false 并调用 StateHasChanged()，但如果在导航之前勾选了 header 中的复选框，则无论浏览器导航到哪个页面，它都会保持勾选状态。

可以说，所有 _imports.razor 文件都完整且正确，可以运行解决方案。

每当导航到新的服务器剃刀页面时，如何将其设置为取消选中？

Answer 1

您可以使用内存状态容器服务，示例如下：

LayoutService.cs

public class LayoutService
{
    public bool? ticked = false;
    public event Action OnChange;
    public void SetTicked(bool _ticked)
    {
        ticked = _ticked;
        NotifyStateChanged();
    }
    private void NotifyStateChanged() => OnChange?.Invoke();
}

program.cs中的配置

builder.Services.AddScoped<LayoutService>();

标头.剃刀

@inject LayoutService LayoutService
<header>
 
    <input @bind="LayoutService.ticked" type="checkbox" role="button" />
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/myawesomepage">My awesome page</a></li>
            <li><a href="/myawesomeotherpage">My awesome other page</a></li>
        </ul>
    </nav>
</header>
 
@code
{
    
    protected override void OnInitialized()
    {
        LayoutService.SetTicked(false);
        LayoutService.OnChange += StateHasChanged;
    }
    public void Dispose()
    {
        LayoutService.OnChange -= StateHasChanged;
    }
}

结果是：

在第二页选择：

导航到第三页：

当我导航到新页面时，如何停止 .net 8.0 Blazor WebAssembly 中的复选框呈现为勾选状态？

问题描述投票：0回答：1

1个回答

最新问题

当我导航到新页面时，如何停止 .net 8.0 Blazor WebAssembly 中的复选框呈现为勾选状态？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1