Blazor Server App Nav Menu Item Page Caching

Howard Plonchak 1

I've written a Blazor server app and the menu is not navigating properly when I use the same href. There's a parameter passed that should be displayed by the "generic.razor" destination. However, since the destination is the same and only the parameter is different, it's still ignoring the routing request. It's only after I navigate to a completely different page (generic2.razor) that it will properly take me to the generic2 and then clicking on generic will take my where I expect to go. Ideally, the navigation should include any params to determine whether to route to the page with the new parameter, or I should be able to force it to do so.

I've written a minimal sample project to show the issue. Hopefully there's a way to force the navigation to the same page (generic) but a different parameter.

<div class="nav-item px-3">
<NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="generic?texttoshow=Item1">
<span class="oi oi-plus" aria-hidden="true"></span> Item1
</NavLink>
</div>

    <div class="nav-item px-3">  
        <!-- Doesn't work if Item1 above is selected first -->  
        <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="generic?texttoshow=Item2">  
            <span class="oi oi-plus" aria-hidden="true"></span> Item2  
        </NavLink>  
    </div>  

    <div class="nav-item px-3">  
        <!-- If I choose this in-between item1 and item2 above, navigating to generic after generic2 works as expected -->  
        <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="generic2?texttoshow=Item3">  
            <span class="oi oi-plus" aria-hidden="true"></span> Item3  
        </NavLink>  
    </div>

Qing Guo - MSFT 886 Reputation points Microsoft Vendor

2022-09-14T03:14:03.183+00:00

Hi @Howard Plonchak ,

Could you share more code about ToggleNavMenu() and generic.razor ? So that we can reproduce your problem.
Qing Guo - MSFT 886 Reputation points Microsoft Vendor

2022-09-14T06:10:14.14+00:00
Hi @Howard Plonchak ,

Hopefully there's a way to force the navigation to the same page (generic) but a different parameter.

According to your description I did a demo without ToggleNavMenu() and it seems to work, you can have a look.

I change href into href="/generic/Item1", and href="/generic/Item2"

And in generic.razor:

@page "/generic/{texttoshow?}" <h1>Blazor is @texttoshow!</h1> @code { [Parameter] public string? texttoshow { get; set; } }

result:

Read Route parameters to know more.
Howard Plonchak 1 Reputation point

2022-09-15T18:31:47.343+00:00

Thanks for your reply. A few questions:

In your example, is generic a folder and item1 and item2 each their own razor page?
Howard Plonchak 1 Reputation point

2022-09-15T18:45:59.3+00:00
Absolutely! And thank you.

I have to break my response into pieces since it was 1600 characters too long...

@Anonymous "/generic"

@using Microsoft.AspNetCore.Mvc

@inject IJSRuntime JS

@inject NavigationManager MyNavigationManager

<PageTitle>@pagetitle</PageTitle>

<p>
<strong>@pagetitle</strong>
</p>

@Aidan Wick
{
[BindProperty(SupportsGet = true)]
public string? pagetitle { get; set; } = "None";

protected override async Task OnInitializedAsync() { pagetitle = await JS.InvokeAsync<string>("GetURLParameter", "texttoshow"); await InvokeAsync(() => InvokeAsync(StateHasChanged)); }

}
Howard Plonchak 1 Reputation point

2022-09-15T18:51:51.94+00:00

This interface is not allowing more code to be sent. This reply is to see if it will clear that and allow me to send more code. Otherwise you may need to reply first.

Howard Plonchak 1

-------- Portion of NavMenu.razor ---------------------

    <div class="nav-item px-3">  
        <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="generic?texttoshow=Item1">  
            <span class="oi oi-plus" aria-hidden="true"></span> Item1  
        </NavLink>  
    </div>  

    <div class="nav-item px-3">  
        <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="generic?texttoshow=Item2">  
            <span class="oi oi-plus" aria-hidden="true"></span> Item2  
        </NavLink>  
    </div>  

    <div class="nav-item px-3">  
        <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="generic2?texttoshow=Item3">  
            <span class="oi oi-plus" aria-hidden="true"></span> Item3  
        </NavLink>  
    </div>

Howard Plonchak 1 Reputation point

2022-09-15T18:53:52.59+00:00

--------- Extracted from .js file to get passed params -----------------
function GetURLParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
Howard Plonchak 1 Reputation point

2022-09-15T18:54:32.513+00:00
I'm investigating a workaround to call a new onclick handler but trying to solve an issue with calling the NavigateTo async, otherwise I get a must complete render issue on the generic razor destination. I don't mind changing generic to not perform any work on the OnInitializeAsync, but it would be much better to not have to perform a second call that forces OnAfterRenderAsync twice through the StateHasChanged. It would force me to also keep things hidden until at least the second OnAfterRenderAsync.

private async Task ToggleNavMenuHref(string href, NavSubmenu? submenu = null)
{
collapseNavMenu = !collapseNavMenu;
navSubmenu = submenu ?? navSubmenu;
MyNavigationManager.NavigateTo(href, forceLoad: true);

}

Ideally, the solution seems to me would be to add a forceLoad:true to the NavLink.
Howard Plonchak 1 Reputation point

2022-09-15T19:05:00.953+00:00

Also, in my code if I navigate to the sidebar and going to "Home" before selecting the next link, what I believe to be a cache problem goes away as the sidebar somehow changes what's stored in the framework 'page'. Please let me know if you need a further/better explanation.
Qing Guo - MSFT 886 Reputation points Microsoft Vendor

2022-09-16T09:06:08.393+00:00

@Howard Plonchak ,
generic is a component, item1 and item2 is parameter.
Howard Plonchak 1 Reputation point

2022-09-16T09:13:34.533+00:00

There's a good chance if you place item1 and item2 on the sidebar, use navlink for each, and try to go from one to the other without any intervening page you'll be able to reproduce my problem.
Qing Guo - MSFT 886 Reputation points Microsoft Vendor

2022-09-20T07:27:24.537+00:00

Hi @Howard Plonchak ,

if you place item1 and item2 on the sidebar, use navlink for each, and try to go from one to the other without any intervening page

I have try it, but I cannot reproduce your problem.

1 answer

Howard Plonchak 1 Reputation point

2022-09-16T00:45:26.687+00:00

I've implemented a solution but it's really in a roundabout way. If I route the href in the navlink to an intervening page (redirect.razor) and have it literally redirect via NavigateTo to generic.razor, it works. But I did have to introduce a timer service in redirect.razor to wait a millisecond so as not to interfere with its own rendering. So the timer callback actually performs the NavigateTo. Apparently it's enough to clear the cached 'page' by inserting an intervening page. Shouldn't really be necessary and I hope you'll examine the code I provided and suggest to the developers that there must be a better, more flexible solution. If you want a zip of the entire sample project to repeat the behavior, do let me know how to get it to you.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment