본문 바로가기
Dotnet/Blazor

LINQ(C#)과 Blazor를 활용한 사용자 검색 웹페이지 (공부를 위한 예시코드)

by 잘먹는 개발자 에단 2024. 7. 22.

1. 데이터 모델 정의

// Models/User.cs
public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

 

 

2. 데이터 서비스 정의

// Services/UserService.cs
using System.Collections.Generic;
using System.Linq;

public class UserService
{
    private List<User> users = new List<User>
    {
        new User { Id = 1, Name = "Alice", Age = 25 },
        new User { Id = 2, Name = "Bob", Age = 30 },
        new User { Id = 3, Name = "Charlie", Age = 35 }
    };

    // 모든 사용자 목록을 반환하는 메서드
    public List<User> GetAllUsers()
    {
        return users;
    }

    // LINQ를 사용하여 이름으로 사용자를 검색하는 메서드
    public List<User> SearchUsersByName(string name)
    {
        return users.Where(u => u.Name.Contains(name)).ToList();
    }
}

 

 

3. Blazor 페이지 정의

<!-- Pages/UserList.razor -->
@page "/users"
@inject UserService UserService

<h3>User List</h3>

<!-- 사용자 검색 입력란 -->
<input type="text" @bind="searchName" placeholder="Search by name" />
<button @onclick="Search">Search</button>

<!-- 사용자 목록 표시 -->
@if (users != null && users.Any())
{
    <ul>
        @foreach (var user in users)
        {
            <li>@user.Name (@user.Age years old)</li>
        }
    </ul>
}
else
{
    <p>No users found.</p>
}

@code {
    private List<User> users;
    private string searchName = string.Empty;

    // 페이지 초기화 시 모든 사용자 로드
    protected override void OnInitialized()
    {
        users = UserService.GetAllUsers();
    }

    // 검색 버튼 클릭 시 호출되는 메서드
    private void Search()
    {
        if (string.IsNullOrWhiteSpace(searchName))
        {
            users = UserService.GetAllUsers();
        }
        else
        {
            users = UserService.SearchUsersByName(searchName);
        }
    }
}

 

 

4. 서비스 등록

// Startup.cs 또는 Program.cs (Blazor Server 프로젝트의 경우)
public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    
    // UserService를 DI 컨테이너에 등록
    services.AddSingleton<UserService>();
}