[Blazor] NavMenu 와 Page 간 데이터 처리하기

Page 에서 버튼 클릭시 NavMenu 의 다른 Page 메뉴로 이동하게끔 처리하는 방법입니다.

1. NavMenu 객체를 담을 ScopeService 생성 및 등록

PublicScopeService.cs

namespace Blazor.RadzenTest.Services
{
    public class PublicScopeService : Dictionary<string, object>
    {
    }
}

Program.cs

builder.Services.AddScoped<PublicScopeService>();

 

2. PublicScopeService 에 NavMenu 객체 담고 NavigatePage public Method 정의

Shared/NavMenu.razor 에 아래처럼 @inject PublicScopeService 하고  mms["NavMenu"] = this; 처리

@using Blazor.RadzenTest.Services
@inject PublicScopeService mms
@inject NavigationManager Navigation

.....

@code {
    private bool collapseNavMenu = true;

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

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

    public void NavigatePage(string href)
    {
        Navigation.NavigateTo(href);
    }
}

@{
    mms["NavMenu"] = this;
}

3. Page 버튼 클릭시 메뉴 이동 처리하는 방법

Pages/Counter.razor 에 @inject PublicScopeService 하고 버튼 클릭 이벤트 메서드(MoveMenu)에서 NavMenu 의 NavigatePage 호출

@page "/counter"
@using Blazor.RadzenTest.Services
@inject PublicScopeService mms

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<RadzenButton Click="@IncrementCount" Text="Click me"></RadzenButton>

<RadzenButton Click="@MoveMenu" Text="Fetch Menu Move"></RadzenButton>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    private void MoveMenu()
    {
        if (mms["NavMenu"] is NavMenu navMenu)
        {
            navMenu.NavigatePage("fetchdata");
        }
    }
}

실행결과

PublicScopeService 를 이용해 공용으로 사용할 것들을 전역으로 담아 처리 할 수 있습니다.

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.RadzenTest