728x90
728x170
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
728x90
그리드형
'C# > Blazor' 카테고리의 다른 글
[Blazor] css 이용하여 Pizza 메뉴판 만들기 (0) | 2022.10.21 |
---|---|
[Blazor] Radzen - RadzenTree : 자식 없는 경우 부모 확장 아이콘 숨기기 (0) | 2022.10.21 |
[Blazor] Radzen - RadzenTree 사용하기 (0) | 2022.10.14 |
[Blazor] Radzen Component 사용하기 (0) | 2022.10.13 |
[Blazor] Search 처리하기 (0) | 2022.10.12 |