How to highlight a menu with INavigationManager.NavigateTo method when the URL has a query string #2183 | Support Center | ABP Commercial

drenton created 2 years ago

ABP Framework version: v4.4.0
UI type: Blazor
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): no
Exception message and stack trace:
Steps to reproduce the issue:"

Create two menus "A" and "B"
Within menu(page) A, add a button that navigates to menu "B" by INavigationManager.
call NavigateTo method with a query parameter.
The B page is displayed but the selected menu is still "A" not "B"

I'd like to navigate to a specific menu with a query parameter and I also like the menu selected(highlighted)

NavigationManager.NavigateTo($"/companies?companyName=apple");// something like this.

this navigates to the companies page and works as I want but the Companies menu is not highlighted(selected).

To make it highlight, I alwasy need to call Navigates twice like below

NavigationManager.NavigateTo($"/companies");//This highlights Companies menu
NavigationManager.NavigateTo($"/companies?companyName=apple");// and I need to call this again.

Above code some times works and some times does not, I think it depends on how heavy loads are in OnInitializedAsync method.

4 Answer(s)

0

enisn created 2 years ago
Support Team .NET Developer

Hi @drenton,

If navigated route matches to your page route, it'll be highlighted properly. QueryString doesn't affect that logic. It compares only Path Route Value and highlights the page.

Can you share your the code block that you define page route?

drenton created 2 years ago

Hi @enisn Below is how the menu is added.[This is generated by ABP Suite]

context.Menu.AddItem(
 new ApplicationMenuItem(
     HGFasTrackMenus.Opportunities,
     l["Menu:Opportunities"],
     url: "/opportunities",
     icon: "fa fa-file-alt",
     order: 3,
     requiredPermissionName: HGFasTrackPermissions.Opportunities.Default)
 );

And this is @page setting on opportunities.razor

@page "/opportunities"
@page "/opportunities/{contactOpportunityId}"
.
.
.

Opportunities.razor.cs

protected override async Task OnInitializedAsync()
{
    var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);

    if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("contactOpportunityId", out var opportunityIdInString))
    {
            var opportunityId = Guid.Parse(opportunityIdInString);
            var opportunity = await OpportunitiesAppService.GetAsync(opportunityId);
            await RowDoubleClciked(opportunity);
            return;
    }
.
.
.
.

This is how I'm trying to navigate to the opportunities page with query string from another page.

NavigationManager.NavigateTo($"/opportunities?contactOpportunityId={newOpportunityCallbackArgs.OpportunityId}");

This opens opportunities page then select the record by ID that I passed, but the menu is not highlighted.

Without the query string, it works just like when I click "Opportunities" menu on the navigation menu.

NavigationManager.NavigateTo($"/opportunities");//Select menu

If you give me your email address, I think I can send you a template for this issue.

0

enisn created 2 years ago
Support Team .NET Developer

That issue has been fixed at the latest patch version of v4.4

Can you try to update to v4.4.4 then try again? The problem shouldn't be reproduced.
0

drenton created 2 years ago

I just tested it on 4.4.4, and it works.

I will wait for v5 and update it all at once.

Thanks for your help.

1

Have an answer to this question? Log in and write your answer.