[Blazor] - 특정 페이지 ReDirection

개요

• Blazor 에서 페이지를 생성 후, 페이지 ReDirection 을 할 수 있습니다.
• 예를 들어, 전체 보여주고자 하는 페이지는 현재 3페이지라고 가정 하였을 때 1, 2, 3 총 3개의 페이지가 있습니다.
• 여기서 첫 페이지는 1페이지고, 마지막 페이지는 3페이지 입니다.
• 그럼, 첫 페이지에서는 무조건 1페이지가 Default 로 보여지도록 ReDirection 하는 기능을 추가하고, 만약 사용자가 마지막 페이지 그 이상의 값으로 URL 값을 지정하게 되면 무조건 마지막 페이지인 3페이지가 ReDirection 되도록 하는 예제 코드를 작성해 봅니다.

Blazor ReDirection 방법

• Blazor 에서 ReDirection 하는 방법 중 하나는 NavigationManager 클래스를 이용하면 됩니다.
• NavigationManager 객체를 DI 로 주입 받고, NavigateTo 메서드를 이용하여 원하는 URL 값을 넘겨주어서 ReDirection 기능을 구현할 수 있습니다.
• 예제 코드는 다음과 같습니다.

@page "/Candidates/{Page:int?}"
@page "/Candidates/Index"
@page "/Candidates/List" 

@using BeomBeomJoJoBlazor.Models.Candidates
@using Microsoft.EntityFrameworkCore
@*@inject CandidateAppDbContext _Context*@
@inject IDbContextFactory<CandidateAppDbContext> _ContextFactory
@inject NavigationManager NavigationManagerInjector

...
생략
...

@code {
    // 현재 페이지(컴포넌트) 에서 사용할 모델 또는 컬렉션
    private Candidate[]? Candidates { get; set; }

    /// <summary>
    /// 페이지 사이즈 : 한 페이지에 몇 개의 레코드를 보여줄건지 결정
    /// </summary>
    public int PageSize { get; set; } = 3;

    [Parameter]
    public int? Page{ get; set; } // PageNumber

    public int PageIndex { get; set; }

    public int PageCount { get; set; } = 3;

    protected override async Task OnParametersSetAsync()
    {
        if (Page is null or < 1)
        {
            // 1 페이지로 URL
            string url = "/Candidates/1";
            NavigationManagerInjector.NavigateTo(url);
            return;
        }

        PageIndex = Page.Value - 1;

        using var context = _ContextFactory.CreateDbContext();

        if (Page > PageCount)
        {
            NavigationManagerInjector.NavigateTo($"/Candidates/{PageCount}");
            return;
        }

        Candidates = await context.Candidates
            .OrderBy(it => it.FirstName)
            .Skip(PageIndex * PageSize) // Page Skip 지정
            .Take(PageSize)
            .ToArrayAsync();
    }
}

• 위 코드에서 현재 PageCount 의 값을 계산하는 로직은 추가하지 않았습니다.
• 우선은 3 값으로 고정을 한 상태로 테스트 진행하였습니다.

실행 결과

• 실행 결과, 정상적으로 1페이지가 Default 로 돼서 바로 표시 되는 것을 확인할 수 있습니다.
• 현재 기준, 마지막 페이지가 3인데 마약 3 초과의 페이지 값을 쓰게 되면 마지막 페이지인 3페이지로 ReDirection 되는 것도 확인할 수 있습니다.