Panel Menu Created in Loop - Links partially work

Radzen Studio Blazor Server
1

I have a panel menu that I create in a loop. It produces the same panel menu multiple times with different Id's. When I hover over the panel items I can see that all of the URL's and related Id's are present, so it looks as if the panel has built correctly.

@foreach (var landlord in landlords)
    {        
        <RadzenPanelMenu @ref="@panelMenu">
            <ChildContent>
                <RadzenPanelMenuItem Expanded="false" Text="@landlord.LandlordName" Icon="account_circle">
                    <RadzenPanelMenuItem Text="Dashboard" Path="@($"/Landlords/LandlordDashboard/{ landlord.Id }")" Icon="dashboard" />
                    <RadzenPanelMenuItem Text="Properties" Path="@($"/BillingPoints/AddBillingPoint/{ landlord.Id }")" Icon="corporate_fare" />
                    <RadzenPanelMenuItem Text="Tenants" Path="@($"/Tenants/AddTenant/{ landlord.Id }")" Icon="emoji_transportation" />
                    <RadzenPanelMenuItem Text="Tariffs" Path="@($"/Tariffs/AddTariff/{ landlord.Id }")" Icon="toll" />
                    <RadzenPanelMenuItem Text="Meter Manager" Path="@($"/MeterManager/MeterManagerMain/{ landlord.Id }")" Icon="bolt" />
                </RadzenPanelMenuItem>
            </ChildContent>           
        </RadzenPanelMenu>
        }

The issue is, that when I click on an item (e.g. Landlords/LandlordDashboard), I cannot use that item again (albeit with a different Id), until I click on another item (e.g. BillingPoints/AddBillingPoint) . I can then click on the first item and the navigation works.

In summary a page will not open, until I click on a different panel item, which opens a different page, I then go back and it will open the page once I click on the first item again.

2

The panel menu item uses the built-in NavLink component. Does that code work if you use NavLinks instead of the RadzenPanelMenu?

3

Do you ever sleep? :smiley:

I'll try and feedback.

4

The research I have done says that NavLink cannot have multiples of the same URL. I have tried using NavLink and get the same results.

e.g.
/SomePage/1
/SomePage/2
/SomePage/3

It sees the "SomePage" as the active page, and even though the Id is different, it will never navigate with a different Id. So the URL in browser changes, but the navigation doesn't fire, until you change the active page, by clicking on a different page.

I also started up a new Blazor app and tried with the same process with the same results.

I tried

NavgationManager.NavigateTo

and forced the navigation via the @mouseenter event, but it refreshes the whole application and resets the nav menu (collapse it). I have also tried using <a> with the same results.

So it appears I have two issues to solve.
1: Enabling, the same url with a different Id to be active, I assume this is changing the active page.
2: If I am to use forced navigation, I need to stop the whole application form refreshing.

Do you have any pointers on how either of these can be achieved using the PanelMenu?

TIA

5

What does that mean? If the URL changes navigation should have fired.

To be honest if NavLink doesn't work the way you expect there isn't much we can do.

6

It's weird, you can see the URL change in the browser but the page doesn't change.

For example,

This is the first link I click in the panel: https://localhost:44338/Dashboard/5f87cbae-0ec1-452d-42ef-08d934a0b89e

When I click on another link for Dashboard, it changes in the browser (url window), but doesn't change the page. Second link: https://localhost:44338/Dashboard/de40b8ec-0f1b-4956-d1b0-08d934cbf567

The life cycle of the parent page is picking up the change in parameter, but nothing happens.

I read some stuff on stack overflow, but it doesn't make sense to me. I'll ask a question on there and put the answer on here if I get one.

Thanks for your help.

7

This indicates that navigation has happened after all. Did you try debugging the code to see what runs in the lifecycle?

8

I have the following:

Parent: MainLayout.razor
Child: NamMenu.Razor
Child (@page): Dashboard

In MainLayout I added OnParametersSet to see if it is picking up the change in Id. In both MainLayout and the Dashboard, the OnParametersSet is being hit each time I try to Navigate and I can see the Id parameter changing it's value. Everything appears to be doing what its supposed, but the page doesn't update it self with new values for that Id.

As you say, it would appear the navigation is happening, but the data isn't changing. :thinking:

In my DashboardPage the three elements I am loading are as follows:

protected override async Task OnParametersSetAsync()
{        
    landlord = await _context.GetLandlordByLandlordId(LandlordId);
    billingPoints = await _context.GetAllBillingPointNamesByLandlordId(LandlordId);
    tariffs = await _tariffContext.GetAllTariffsByLandlordId(LandlordId);
    StateHasChanged();     
}
9

Thanks for all of your help, you put me on the right path.

As you correctly pointed out, it was not an issue with the Panel. I was setting StateHasChanged in all of the wrong places.