Blog

EmmployeeList 구성 요소는 모든 직원 목록을 표시합니다. 

보기 버튼을 클릭하면 URL(/employeedetails/3)로 리디렉션되어야 합니다. URI의 값 3은 직원 ID입니다. blazor 구성 요소(EmployeeDetails)는 직원의 세부 정보를 표시합니다.

EmployeeDetails.razor

@page "/employeedetails/{id}"
@inherits EmployeeDetailsBase

<div class="row justify-content-center m-3">
    <div class="col-sm-8">
        <div class="card">
            <div class="card-header">
                <h1>@Employee.FirstName @Employee.LastName</h1>
            </div>

            <div class="card-body text-center">
                <img class="card-img-top" src="@Employee.PhotoPath" />

                <h4>Employee ID : @Employee.EmployeeId</h4>
                <h4>Email : @Employee.Email</h4>
                <h4>Department : @Employee.DepartmentId</h4>
            </div>
            <div class="card-footer text-center">
                <a href="/" class="btn btn-primary">Back</a>
                <a href="#" class="btn btn-primary">Edit</a>
                <a href="#" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>

액세스하려면 직원 ID가 경로 매개 변수로 URL에 전달되어야 합니다. 이는 @page 지시문 경로 템플릿을 사용하여 지정됩니다.

@page "/employeedetails/{Id}"

EmployeeDetailsBase.cs

using EmployeeManagement.Models;
using EmployeeManagement.Web.Services;
using Microsoft.AspNetCore.Components;
using System.Threading.Tasks;

namespace EmployeeManagement.Web.Pages
{
    public class EmployeeDetailsBase : ComponentBase
    {
        public Employee Employee { get; set; } = new Employee();

        [Inject]
        public IEmployeeService EmployeeService { get; set; }

        [Parameter]
        public string Id { get; set; }

        protected async override Task OnInitializedAsync()
        {
            Id = Id ?? "1";
            Employee = await EmployeeService.GetEmployee(int.Parse(Id));
        }
    }
}

• Id public 속성은 [ Parameter ] 속성으로 decorate됩니다 .
• 속성 이름(Id)은 @page 지시문(@page “/employeedetail/{Id}”) 의 경로 매개변수 이름과 일치합니다.
• blazor router는 URL의 경로 매개 변수 값을 사용하여 구성 요소 클래스의 Id 속성을 채웁니다.
• 라우터가 URL의 경로 매개 변수 값을 구성 요소 클래스의 공용 속성에 매핑할 수 있으려면 다음 두 가지 조건이 충족되어야 합니다. 

1. 컴포넌트 클래스의 공용 속성은 [Parameter] 속성으로 decorate해야 합니다.
2. 구성 요소 클래스의 속성 이름과 @page 지시문의 경로 매개 변수 이름은 동일해야 합니다.

이름이 다른 경우 다음과 같은 런타임 예외가 발생합니다.

InvalidOperationException: ‘EmployeeManagement.Web.Pages.EmployeeDetail’ 유형의 개체에 ‘Id’라는 이름과 일치하는 속성이 없습니다.

Blazor optional route parameter

optional route parameter 는 지원되지 않지만 아래처럼 개의 @page 지시문을 사용하여 선택적 매개변수의 효과를 얻을 수 있습니다.

@page "/employeedetails"
@page "/employeedetails/{Id}"

첫 번째 @page 지시문을 사용하면 매개 변수 없이 구성 요소를 탐색할 수 있습니다. 두 번째 @page 지시문은 {Id} 경로 매개 변수를 수신하고 구성 요소 클래스의 Id public 속성에 값을 할당합니다.

public class EmployeeDetailsBase : ComponentBase
{
    public Employee Employee { get; set; } = new Employee();

    [Inject]
    public IEmployeeService EmployeeService { get; set; }

    [Parameter]
    public string Id { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // If Id value is not supplied in the URL, use the value 1
        Id = Id ?? "1";
        Employee = await EmployeeService.GetEmployee(int.Parse(Id));
    }
}

경로 매개변수로 URL 작성

목록 페이지에서 보기 버튼을 클릭하면 사용자를 /employeedetail/id 로 리디렉션하려고 합니다 .

<a href="@($"employeedetails/{employee.EmployeeId}")"
   class="btn btn-primary m-1">View</a>

IEmployeeService.cs

public interface IEmployeeService
{
    Task<IEnumerable<Employee>> GetEmployees();
    Task<Employee> GetEmployee(int id);
}

EmployeeService.cs

public class EmployeeService : IEmployeeService
{
    private readonly HttpClient httpClient;

    public EmployeeService(HttpClient httpClient)
    {
        this.httpClient = httpClient;
    }

    public async Task<Employee> GetEmployee(int id)
    {
        return await httpClient.GetJsonAsync<Employee>($"api/employees/{id}");
    }

    public async Task<IEnumerable<Employee>> GetEmployees()
    {
        return await httpClient.GetJsonAsync<Employee[]>("api/employees");
    }
}