[Blazor] PagIndex 속성 추가 및 Skip 과 Take 메서드로 페이징 처리

개요

• Blazor 에서 페이징 처리하는 방법에 대해서 정리 진행합니다.
• 예제 코드로 작성한 페이지 기법은 List 항목에서 표시되는 데이터 사이즈를 지정하고, 해당 사이즈가 넘어갈 시, 다음 페이지에 보여지도록 예제 코드 작성하였습니다.

페이징 라우팅 추가

• 제일 먼저, @page 라우팅 값으로 페이징 인덱스 값을 추가하였습니다.
• {Page:int?} 값을 통해 정수형의 Page 값으로 라우팅 되도록 속성 추가하였습니다.

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

페이징 관련 로직 추가

• 그럼 실제로 페이징 관련 로직을 추가하겠습니다.
• 크게 PageSize, Page, PageIndex 3개의 속성을 추가하였습니다.
• 여기서 Page 속성 같은 경우에는 Attribute 로 Parameter 속성을 추가하였습니다.
• Parameter 속성으로 추가해야, 앞서 @page "/Candidates/{Page:int?}" 라우팅에서 Page 속성 값에 따라 유동적으로 라우팅 값이 전달됩니다.
• 마지막으로 OnInitializedAsync 메서드를 추가하여 Page 처리하는 로직을 추가하였습니다.

@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; }

    protected override async Task OnInitializedAsync()
    {
        if (Page is null)
        {
            Page = 1;
        }

        PageIndex = Page.Value - 1;

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

• 여기서 핵심은 Skip, Task 메서드를 이용하여 페이징 처리를 한 것입니다.
• 위 코드에서는 기본으로 3개의 데이터를 보여주도록 PageSize 속성 값을 주었고, 만약 3개의 데이터가 넘어가면 다음 3개의 데이터는 다음 페이지로 보여지도록 하였습니다.

전체 코드

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

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

<PageTitle>Candidate List</PageTitle>

<h1>Index</h1>

<p>
    <a href="/Candidates/Create">Create New</a>
</p>

@if (Candidates is null)
{
    <div>Loading...</div>
}
else
{
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>
                    FirstName
                </th>
                <th>
                    LastName
                </th>
                <th>
                    IsEnrollment
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var m in Candidates)
            {
                <tr>
                    <td>
                        @m.FirstName
                    </td>
                    <td>
                        @m.LastName
                    </td>
                    <td>
                        <input class="check-box" type="checkbox" checked="@m.IsEnrollment" />
                    </td>
                    <td>
                        <a href="/Candidates/Edit/@m.Id">Edit</a> |
                        <a href="/Candidates/Details/@m.Id">Details</a> |
                        <a href="/Candidates/Delete/@m.Id">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}


@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; }

    protected override async Task OnInitializedAsync()
    {
        if (Page is null)
        {
            Page = 1;
        }

        PageIndex = Page.Value - 1;

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

실행 결과