[Blazor] List 컴포넌트 만들기

개요

• Blazor 에서 기본이 되는 List 컴포넌트 만드는 방법에 대해서 정리 진행합니다.
• 사전에 미리 EFCore 를 통해 Seed 데이터를 넣은 상태이고, Candidate 테이블을 미리 Migration 하였고 해당 데이터를 가져와 List 컴포넌트 만드는 방법에 대해서 정리합니다.

Candidates.razor

• 미리 Candidates.zazor 파일을 생성하였습니다.
• 해당 파일에는 Candidates 데이터를 테이블로 표시하도록 하는 코드를 작성하였습니다.
• 참고로, Candidate 데이터는 CandidateAppDbContext 를 @inject 문을 통해 서비스를 주입 받고록 하였습니다.
• 전체 코드는 다음과 같습니다.

@page "/Candidates"
@page "/Candidates/Index"
@page "/Candidates/List"
@using BeomBeomJoJoBlazor.Models.Candidates
@using Microsoft.EntityFrameworkCore
@inject CandidateAppDbContext _Context

<PageTitle>Candidate List</PageTitle>

<h1>Index</h1>

<p>
    <a href="/Candidate/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; }

    protected override async Task OnInitializedAsync()
    {
        Candidates = await _Context.Candidates.ToArrayAsync();
    }
}

실행 결과

• 앞서, Candidate List 컴포넌트를 작성하였습니다.
• 작성된 컴포넌트가 어떤 형태로 Blazor 에서 보여지는지 확인하겠습니다.
• 실행 결과, 테이블 형태로 데이터가 정상적으로 표시되는 것을 확인할 수 있습니다.