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