Blazor Server에서 드롭다운 리스트에 서버 필터링 구현하기

• 3/21/2023
• 3 minutes to read

이 블로그 포스트에서는 Blazor Server에서 드롭다운 리스트에 서버 필터링을 구현하는 방법을 살펴봅니다. 이 예제에서는 사용자가 입력한 텍스트에 따라 리스트가 필터되는 기능을 구현하겠습니다.

실행 모양은 다음 그림과 같습니다.

전체 소스는 다음 경로에서 찾을 수 있습니다.

• https://github.com/VisualAcademy/VisualAcademy/
  • VisualAcademy/Pages/Components/DulDropDownListServerFiltering.razor

먼저 아래와 같이 기본 구조를 구성합니다. 이 구조는 선택한 직원의 정보를 보여주고, 드롭다운 메뉴를 클릭하면 검색 텍스트 박스와 직원 목록을 표시합니다.

@page "/DulDropDownListServerFiltering"

<h3>DulDropDownListServerFiltering</h3>

<div class="form-group">
    <label for="lstAppointmentType">Employee</label>
    <div class="row">
        <div class="col-md-12">
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle d-flex 
                    justify-content-between align-items-center" type="button" 
                    id="employeeDropdown" data-bs-toggle="dropdown" 
                    aria-haspopup="true" aria-expanded="false" 
                    style="width: 100%; border-color: #ced4da;">
                    <div class="text-start">
                        @if (ModelEdit.EmployeeId != 0)
                        {
                            var selectedEmployee = FilteredEmployees
                                .FirstOrDefault(e => e.Id == ModelEdit.EmployeeId);
                            if (selectedEmployee != null)
                            {
                                @($"{selectedEmployee.FirstName} {selectedEmployee.LastName}")
                            }
                            else
                            {
                                @("Select Employee")
                            }
                        }
                        else
                        {
                            @("Select Employee")
                        }
                    </div>
                    <i class="bi bi-chevron-down"></i>
                </button>

                <div class="dropdown-menu" aria-labelledby="employeeDropdown" 
                    style="width: 100%;">
                    <div class="input-group mb-3">
                        <input type="search" placeholder="Search Employee" 
                            class="form-control" @bind="EmployeeSearchText" 
                            @oninput="FilterEmployees" />
                    </div>
                    <div style="max-height: 200px; overflow-y: auto;">
                        @foreach (var emp in FilteredEmployees)
                        {
                            <button type="button" class="dropdown-item" 
                                @onclick="() => SelectEmployee(emp)">
                                @($"{emp.FirstName} {emp.LastName}")
                            </button>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

이제 필요한 Blazor 코드를 작성해 보겠습니다. 필터링 기능을 위해 FilterEmployees 메서드를 작성합니다. 또한 샘플 데이터를 생성하고 초기화하는 코드를 추가합니다.

@code {
    public Appointment ModelEdit { get; set; } = new Appointment();
    public IEnumerable<Employee> Employees { get; set; } = new List<Employee>();

    protected override async Task OnInitializedAsync()
    {
        Employees = Enumerable.Range(1, 20).Select(i => new Employee { 
            Id = i, FirstName = $"First Name {i}", LastName = $"Last Name {i}" });
        FilteredEmployees = Employees;
    }

    public string EmployeeSearchText { get; set; }
    public IEnumerable<Employee> FilteredEmployees { get; set; } = new List<Employee>();

    private void FilterEmployees(ChangeEventArgs e)
    {
        if (e != null)
        {
            EmployeeSearchText = e.Value.ToString();
        }

        if (string.IsNullOrEmpty(EmployeeSearchText))
        {
            FilteredEmployees = Employees;
        }
        else
        {
            FilteredEmployees = Employees.Where(e => 
                e.FirstName.Contains(EmployeeSearchText, StringComparison.OrdinalIgnoreCase) 
                || e.LastName.Contains(EmployeeSearchText, StringComparison.OrdinalIgnoreCase));
        }
    }

    private void SelectEmployee(Employee emp)
    {
        ModelEdit.EmployeeId = emp.Id;
        StateHasChanged();
    }

    public class Employee
    {
        public long Id { get; set; }
        public string? FirstName { get; set; }
        public string? LastName { get; set; }
    }

    public class Appointment
    {
        public long Id { get; set; }
        public long EmployeeId { get; set; }
        public virtual Employee? Employee { get; set; }
    }
}

위 코드에서는 샘플로 20개의 직원 데이터를 생성하고, 이를 필터링하여 FilteredEmployees에 저장합니다. 검색 텍스트 박스에 입력된 텍스트에 따라 필터링이 수행됩니다.

드롭다운 메뉴에서 선택한 직원의 정보를 저장하려면 SelectEmployee 메서드를 사용합니다. 이 메서드는 선택한 직원의 ID를 저장하고 UI를 갱신합니다.

이제 Blazor Server에서 드롭다운 리스트에 서버 필터링을 구현한 예제를 확인했습니다. 이를 통해 사용자가 원하는 조건에 따라 필터링된 결과를 표시하는 기능을 손쉽게 구현할 수 있습니다. 이 방식은 대용량 데이터에 대한 검색을 효율적으로 수행할 수 있도록 도움을 줍니다.