I have created a .net 8.0 blazor web application solution.
The web project is standard with the following code:
App.razor
<code><!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>
</code>
<code><!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>
</code>
<!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
<code>@using myawesomeproject.shared.components
@inherits LayoutComponentBase
<Header @rendermode="InteractiveWebAssembly"/>
@Body
</code>
<code>@using myawesomeproject.shared.components
@inherits LayoutComponentBase
<Header @rendermode="InteractiveWebAssembly"/>
@Body
</code>
@using myawesomeproject.shared.components
@inherits LayoutComponentBase
<Header @rendermode="InteractiveWebAssembly"/>
@Body
Myawesomehomepage.razor
<code>@page "/"
<h1>Home page</h1>
</code>
<code>@page "/"
<h1>Home page</h1>
</code>
@page "/"
<h1>Home page</h1>
Myawesomepage.razor
<code>@page "/myawesomepage"
<h1>My awesome page</h1>
</code>
<code>@page "/myawesomepage"
<h1>My awesome page</h1>
</code>
@page "/myawesomepage"
<h1>My awesome page</h1>
Myotherawesomepage.razor
<code>@page "/myawesomeotherpage"
<h1>My awesome other page</h1>
</code>
<code>@page "/myawesomeotherpage"
<h1>My awesome other page</h1>
</code>
@page "/myawesomeotherpage"
<h1>My awesome other page</h1>
In a project of shared razor components, I have the following:
Header.razor
<code><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();
}
}
</code>
<code><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();
}
}
</code>
<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?