Rendering Menu Module in Blazor WASM at Runtime

[shahabfar]

I am currently working on a project using the ABP Framework with a Blazor front end, and I’ve encountered a challenge that I’m hoping you might be able to assist me with.

I am trying to update the main menu items dynamically, but unfortunately, the changes are not being rendered as expected. I injected IMenuManager into my blazor page and use the following code to update my menu (Test submenu items in my case).

    var mainMenu = await MenuManager.GetMainMenuAsync();
    var testMenu = mainMenu.FindMenuItem("Test");

    // Clear the existing menu items
    testMenu.Items.Clear();

    // Add the new menu items
    foreach (var item in MyItems)
    {
        testMenu.AddItem(
            new ApplicationMenuItem(
                $"Test.{item.Name}",
                item.Name,
                url: $"/test/{item.Id}"
            )
        );
    }

When I call the above method, the main menu does not reflect the updates. I suspect that I need to invoke StateHasChanged() on the ABP menu module (component), but I’m unsure how to access it.

I’ve searched through the ABP documentation and community forums, but I haven’t been able to find a solution to this issue. Is there any workaround for this? Thanks.

[maliming]

hi

You can try to override the IMenuManager service to maintain the menus.

The menu's component will refresh the menu on the Changed event of ApplicationConfigurationChangedService.

https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.UI.Navigation/Volo/Abp/Ui/Navigation/MenuManager.cs#L14 https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/NavMenu.razor.cs#L24