Blazor. NavLink is not working in a foreach block when clicking multiply times

user_9056601 0
Viewed 4593

I created list of NavLink, this is only one difference between them, dynamic parameter Id

<div>
    @foreach (var service in pageGlobal.Person.Services)
    {
        var link = $"service_description/{service.Identifier}";
        <ul class="nav flex-column">
           <li class="nav-item px-3">
              <NavLink class="nav-link" href="@link">
                   @service.Name
               </NavLink>
           </li>
        </ul>
    }
</div>

And it works only if I click first time(no matter what NavLink item it works properly).

enter image description here

Click to the next link - url is changed but nothing happens.

enter image description here

Code of the ServiceDescription.razor

@page "/service_description/{Id:int}"
@using Site.Data
@using Site.ViewModels
@inject StartUpService page

@if (service != null)
{
    <div> <h3>Service Name - @service.Name</h3> - <h4>@service.Description</h4>  </div>
}

@code
{
    [Parameter]
    public int Id { get; set; }

    PageGlobal pageGlobal;
    Service service;

    protected override async Task OnInitializedAsync()
    {
        pageGlobal = await page.GetPageGlobalAsync();
        service = pageGlobal.Person.Services.Where(e => e.Identifier == Id).FirstOrDefault();
    }
}

How can I force client reload ServiceDescription.razor with a new parameter using NavLink functionality?

asp.net-core-3.0 blazor asp.net-core
1 Answers

This issue is caused by OnInitializedAsync. For OnInitializedAsync, it will be called only when the component is invoked when the component is ready to start.

If you want to change service based on parameter, you should use OnParametersSetAsync like below:

protected override async Task OnParametersSetAsync()
{
    pageGlobal = new PageGlobal
    {
        Person = new Person()
        {
            Services = new List<Service>(){
                new Service{ Identifier = 1, Name = "Test1", Description = "D1" },
                new Service{ Identifier = 2, Name = "Test2" , Description = "D2" },
                new Service{ Identifier = 3, Name = "Test3", Description = "D3"  }
            }
        }
    };
    service = pageGlobal.Person.Services.Where(e => e.Identifier == Id).FirstOrDefault();

}

You could check ComponentBase

user_62656200
Related