CODEWITHSUNDEEP
navigationblazor
EOAsus
EOAsus

Reputation: 49

Blazor navigation without reload

Below is the razor component which is the navigation menu. Everything loads great and I'm able to login with no problem. The problem is, after login, I navigate to the home page and the @IsLoggedOn() doesn't execute, unless I force a reload, which I'm trying to avoid.

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <nav class="container-fluid">
        <a class="navbar-brand" href="">Home</a>
        <button class="navbar-toggler @NavButtonCssClass" type="button" aria-controls="navbarCollapse" aria-label="Toggle navigation" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse @NavBarCssClass" id="navbarCollapse" @onclick="ToggleNavMenu">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                <li class="nav-item">
                    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                        <span class="oi oi-home" aria-hidden="true"></span> Home
                    </NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="counter">
                        <span class="oi oi-plus" aria-hidden="true"></span> Counter
                    </NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="Login">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Login
                    </NavLink>
                </li>
            </ul>
        </div>
        <nav IsList="true" Alignment="Alignment.Right" IsNavbar="true">
            @if (isLoggedOn())
            {
                <NavLink href="/Logout">
                    Logout
                    <span class="oi oi-lock-unlocked" title="lock unlocked" aria-hidden="true"></span>
                </NavLink>
            }
            else
            {
                <NavLink href="Login">
                    Login
                    <span class="oi oi-lock-locked" title="lock locked" aria-hidden="true"></span>
                </NavLink>
            }
        </nav>
    </nav>
</nav>

Upvotes: 0

Views: 2087

Answers (2)

skyrim
skyrim

Reputation: 45

I tried the methods mentioned above, but none of them worked. I don't know why. I found a solution on this website, which is to use "forceLoad" argument in NavigateTo function to forcefully refresh the webpage. Hope it helps.

Upvotes: 0

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30036

At the moment the NavMenu has no mechanism of recognising authentication state changes - the logged in Identity has changed.

You can do this by injecting the AuthenticationStateProvider and then hooking up an event handler (that calls StateHasChanged) to the AuthenticationStateProvider's AuthenticationStateChanged event.

This should work.

@implements IDisposable

..... Razor

    [Inject] private AuthenticationStateProvider? AuthState { get; set; }

    protected async override Task OnInitializedAsync()
    {
        // other code you may have
        AuthState.AuthenticationStateChanged += this.OnAuthStateChanged;
    }

    private async void OnAuthStateChanged(Task<AuthenticationState> state)
        => await InvokeAsync(StateHasChanged);

    public void Dispose()
        => AuthState.AuthenticationStateChanged -= this.OnAuthStateChanged;

Upvotes: 2

Related Questions