How to update NavMenu in Blazor web assembly

user_824250 0
Viewed 2966

I need to dynamically update my side nav bar in web assembly.

Can you suggest me how to do it?

@page "/ChildPage"

    @code{
        public List<string> menus = new List<string>();
        NavMenu n = new NavMenu();
        protected override async Task OnInitializedAsync()
        {
            menus.Add("Content 1");
            menus.Add("Content 2");

            await Task.Run(() => n.MenuItems = menus);
        }
    }

In the Navmenu razor did some this as below.

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        @if (MenuItems != null)
        {
            @foreach (var menu in MenuItems)
            {
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Page1">
                        <span class="oi oi-plus" aria-hidden="true"></span> @menu
                    </NavLink>
                </li>
            }
        }

    </ul>
</div>



@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    public List<string> MenuItems = new List<string>() { "Page 1", "Page 2"};
}

Can you suggest me how to update navbar from each page.

webassembly blazor c#
1 Answers

You could create a service like so

public interface IMenuService
{
  List<MenuItem> AdditionalMenuItems { get; set; }
  event EventHandler<EventArgs> OnChanged;
  void NotifyChanged();
}

Register it as scoped

services.AddScoped<IMenuService, MenuService>();

You can inject that into your page and add

@inject IMenuService MenuService

protected override void OnInitialized()
{
  MenuService.Add(whatever);
  MenuService.NotifyChanged();
}

In your layout

@implements IDisposable
@inject IMenuService MenuService

@foreach(MenuItem menuItem in MenuService.AdditionalMenuItems)
{
  // Whatever
}

// code section
protected override void OnInitialized()
{
  MenuService.OnChanged += MenuChanged;
}

void IDisposable.Dispose()
{
  MenuService.OnChanged -= MenuChanged;
}

private void MenuChanged(EventArgs e)
{
  InvokeAsync(StateHasChanged);
}
user_613110
Related