Binding 실습 - 예제) User 관리 페이지
Blazor에서 Binding 기능을 활용해보면서 User 현재 목록 출력 및 추가, 삭제가 가능한 User 관리 페이지를 만들어보자.
User 관리 페이지 생성
Pages 폴더에 ‘새 항목 추가 > Razor 구성 요소’를 선택해 User.razor를 생성한다.
User 데이터 정의
Data 폴더에 ‘새 항목 추가 > 클래스’를 선택해 UserData.cs를 생성하고 아래와 같이 정의한다.
1
2
3
4
5
6
7
namespace BlazorApp.Data
{
public class UserData
{
public string Name { get; set; }
}
}
간단하게 User들을 구분해주기 위한 이름만 정의하였다.
NavMenu.razor에 User 메뉴 추가
Shared 폴더에 NavMenu.razor로 들어가 User 메뉴를 추가해둔다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
@* User 메뉴 추가 *@
<li class="nav-item px-3">
<NavLink class="nav-link" href="user">
<span class="oi oi-list-rich" aria-hidden="true"></span> User
</NavLink>
</li>
</ul>
</div>
여기까지 준비되었다면 User.razor로 돌아가 코드를 작성해본다.
User 현재 목록 출력
먼저 User들의 현재 목록을 출력해보자.
User.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@* 라우팅 경로 설정 *@
@page "/user"
@* BlazorApp.Data를 사용하겠다는 의미 *@
@using BlazorApp.Data;
<h3>Online Users</h3>
<p>
Users: <b>@_users.Count()</b>
</p>
<br />
<ul class="list-group">
@foreach (UserData user in _users)
{
<li @key="user" class="list-group-item">
<label>@user.Name</label>
</li>
}
</ul>
@code {
List<UserData> _users = new List<UserData>();
// 처음 페이지를 열때 호출된다.
protected override void OnInitialized()
{
// 임시적으로 데이터 생성
_users.Add(new UserData() { Name = "define_chan" });
_users.Add(new UserData() { Name = "Rookiss" });
_users.Add(new UserData() { Name = "Dongglee" });
}
}
OnInitialized()에서 임시적으로 User 데이터를 생성해주고 있고, _users 리스트에 들어가 있는 데이터들을 foreach문으로 하나씩 꺼내 출력해주고 있다.
실행시켜보면 그럴싸하게 표현되는 것을 볼 수 있다.
User 목록 출력
참고로 HTML 태그에 class=”” 속성 부분을 보면 Bootstrap에 미리 정의되어 있는 CSS를 적용시켜주고 있기 때문에 위와 같이 보이는 것이다.
만약 Bootstrap 부분을 뺀다면 아래와 같은 모습일 것이다.
1
2
3
4
5
6
7
8
<ul>
@foreach (UserData user in _users)
{
<li @key="user">
<label>@user.Name</label>
</li>
}
</ul>
Bootstrap을 뺀 모습
Bootstrap에 대해서도 공부해두면 좋지만 지금은 다 외워둘 필요는 없기 때문에 필요할때마다 검색해보는 것을 추천한다.
User 추가 기능
User를 추가하는 기능을 만들어보자.
User.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@page "/user"
@using BlazorApp.Data;
<h3>Online Users</h3>
<p>
Users: <b>@_users.Count()</b>
</p>
<br />
<ul class="list-group">
@foreach (UserData user in _users)
{
<li @key="user" class="list-group-item">
<label>@user.Name</label>
</li>
}
</ul>
<br />
@* User 추가 기능 UI *@
<div class="container">
<div class="row">
<div class="col">
<input class="form-control" placeholder="Add User" @bind-value="_inputName" />
</div>
<div class="col">
<button class="btn btn-primary" type="button" @onclick="AddUser">Add a User</button>
</div>
</div>
</div>
@code {
List<UserData> _users = new List<UserData>();
string _inputName;
protected override void OnInitialized()
{
_users.Add(new UserData() { Name = "define_chan" });
_users.Add(new UserData() { Name = "Rookiss" });
_users.Add(new UserData() { Name = "Dongglee" });
}
void AddUser()
{
_users.Add(new UserData() { Name = _inputName });
_inputName = "";
}
}
바인딩되는 부분과 함수가 연결되는 부분을 잘 살펴보자.
실행시켜보면 잘 동작하는 것을 확인해 볼 수 있다. 
실행화면 
User를 추가한 모습
또한 바인딩을 해놓은 상태에서 데이터를 추가하거나 수정하면 실시간으로 UI가 갱신되는 모습도 볼 수 있다.
User 삭제 기능
이어서 User를 삭제하는 기능도 만들어보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@page "/user"
@using BlazorApp.Data;
<h3>Online Users</h3>
<p>
Users: <b>@_users.Count()</b>
</p>
<br />
<ul class="list-group">
@foreach (UserData user in _users)
{
<li @key="user" class="list-group-item">
@* 삭제 버튼 추가 *@
<button type="button" class="btn btn-link" @onclick="(() => KickUser(user))">[Kick]</button>
<label>@user.Name</label>
</li>
}
</ul>
<br />
@* User 추가 기능 UI *@
<div class="container">
<div class="row">
<div class="col">
<input class="form-control" placeholder="Add User" @bind-value="_inputName" />
</div>
<div class="col">
<button class="btn btn-primary" type="button" @onclick="AddUser">Add a User</button>
</div>
</div>
</div>
@code {
List<UserData> _users = new List<UserData>();
string _inputName;
protected override void OnInitialized()
{
_users.Add(new UserData() { Name = "define_chan" });
_users.Add(new UserData() { Name = "Rookiss" });
_users.Add(new UserData() { Name = "Dongglee" });
}
void AddUser()
{
_users.Add(new UserData() { Name = _inputName });
_inputName = "";
}
void KickUser(UserData user)
{
_users.Remove(user);
}
}
여기서 유의깊게 볼 부분은 @onclick에서 KickUser() 함수와 연결한 부분이다.
1
2
@* 삭제 버튼 추가 *@
<button type="button" class="btn btn-link" @onclick="(() => KickUser(user))">[Kick]</button>
User 데이터를 삭제하기 위해서는 인자를 받을 수 밖에 없는데 @onclick 속성은 인자가 없는 형태로만 받을 수 있다.
그렇다보니 람다를 이용해 인자가 없는 형태로 만들고 람다 캡처를 이용해 user라는 데이터를 넘겨주면서 간접적으로 호출해주고 있다.
최종적으로 실행시켜보면서 기능들을 테스트해보자. 
실행화면 
User를 삭제한 모습