Search code examples
asp.net-corerazorblazor-server-sideblazor-webassembly.net-8.0

How do I stop a checkbox in a .net 8.0 blazor webassembly rendering as ticked when I navigate to a new page?

I have created a .net 8.0 blazor web application solution. The web project is standard with the following code:

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>

Layout.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>

In a project of shared razor components, I have the following:

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

The layout razor component contains the header razor component, which in turn contains a checkbox bound to a local boolean called 'ticked' and is rendered as an interactive web assembly.

When a hyperlink in the header is clicked, the browser navigates to a new server razor page, which includes the layout and the header component.

Although the header component sets ticked to false and call StateHasChanged(), if the checkbox in the header is ticked before navigation, it remains ticked, no matter which page the browser navigates to.

Suffice to say, all the _imports.razor files are complete and correct to run the solution.

How can I set it to unticked whenever a new server razor page is navigated to?

Solution

  • you can use In-memory state container service,Here's an example：

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

    config in program.cs

    builder.Services.AddScoped<LayoutService>();

    header.razor

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

    The results are :

    Select in the second page:

    enter image description here

    Navigate to the third page:

    enter image description here