Blog

이 과정을 진행하면서 직원을 생성, 읽기, 업데이트 및 삭제할 수 있는 직원 관리 시스템을 구축하게 됩니다.

다음은 필요한 모델 클래스입니다.

1. Employee
2. Department
3. Gender

// Employee class

public class Employee
{
    public int EmployeeId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public DateTime DateOfBrith { get; set; }
    public Gender Gender { get; set; }
    public Department Department { get; set; }
    public string PhotoPath { get; set; }
}

// Gender Enum

public enum Gender
{
    Male,
    Female,
    Other
}

// Department Class

public class Department
{
    public int DepartmentId { get; set; }
    public string DepartmentName { get; set; }
}

Blazor 모델 클래스 만들기

새 .NET Standard 클래스 라이브러리 프로젝트를 만듭니다. 프로젝트 이름을 EmployeeManagement.Models 로 지정합니다 . 솔루션 이름을 BlazorTutorial 로 지정합니다 .

.NET 표준 클래스 라이브러리 프로젝트를 선택한 이유가 궁금하시다면. 이를 통해 .NET 에코시스템의 다양한 프로젝트 유형에서 이러한 모델을 재사용할 수 있습니다.

Blazor 웹 애플리케이션 프로젝트에서 이러한 모델을 사용할 것입니다. 이 과정을 진행하면서 ASP.NET 코어 RESTful 서비스를 생성하게 됩니다.

이러한 서비스는 Blazor 프로젝트에 필요한 데이터를 제공합니다. RESTful 서비스 프로젝트에서도 이러한 모델 클래스를 사용할 것입니다.

Blazor 웹 프로젝트 만들기

새 Blazor 서버 프로젝트를 BlazorTutorial 솔루션에 추가하고 이름을 EmployeeManagement.Web 으로 지정합니다 .

Employee를 만들고, 읽고, 업데이트하고, 삭제할 수 있는 웹 애플리케이션 프로젝트입니다.

이 프로젝트에는 위에서 만든 모델 클래스가 필요합니다. 따라서 EmployeeManagement.Web 프로젝트에서 EmployeeManagement.Models 프로젝트 에 대한 참조를 추가하십시오 .

아직 시작 프로젝트가 아닌 경우 마우스 오른쪽 버튼을 클릭하고 EmployeeManagement.Web을 시작 프로젝트 로 만듭니다 .

EmployeeManagement.Web 프로젝트 에서 다음 파일 및 폴더를 삭제합니다 .

• Data folder
• Pages/Counter.razor
• Pages/FetchData.razor
• Pages/Index.razor
• Shared/SurveyPrompt.razor

Startup.cs의 변경 사항

다음 using 문을 Remove

using EmployeeManagement.Web.Data;

ConfigureServices() 메서드 에서 다음 줄을 제거합니다.

services.AddSingleton<WeatherForecastService>();

따라하고 있다면 이 시점에서 프로젝트는 다음과 같아야 합니다.

EmployeeList 구성 요소 만들기

EmployeeManagement.Web 프로젝트 에서 Pages 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 Razor 구성 요소를 추가합니다.

이름을 EmployeeList.razor 로 지정합니다 . 직원 목록을 표시하는 데 사용할 구성 요소입니다.

EmployeeList.razor 파일에 다음 @page 지시문을 포함합니다. 이는 루트 애플리케이션 URL로 이동할 때 Blazor가 이 구성 요소를 렌더링하도록 지시합니다.

e "/"

NavMenu.razor의 변경 사항

다음 2개의 탐색 메뉴 항목을 제거합니다.

    <NavLink class="nav-link" href="counter">
        <span class="oi oi-plus" aria-hidden="true"></span> Counter
    </NavLink>
</li>
<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
    </NavLink>
</li>