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>();
}
'Dotnet > Blazor' 카테고리의 다른 글
Blazor에서 카카오 맵을 쓰려면 (0) | 2024.07.25 |
---|---|
SweetAlert를 Blazor에서 썼는데 껍데기만 온다면? (0) | 2024.07.25 |
Blazor의 UI 업데이트 방식 ( feat : 리액트, CSR ) (0) | 2024.07.25 |
Ado.net 그리고 DataTable, DataSet, DataRow에 대해서 알아봅시다. (0) | 2024.07.22 |
블레이저 ( Blazor )에 대해서 대략적으로 알아보자. (0) | 2024.07.22 |