[Web] List 바인딩

'바인딩'을 학습하고 나서 단순한 변수가 아닌 특정 요소를 여러개 담는 리스트를 사용하고 이를 바인딩하여 리스트내의 요소에 접근하고, 삽입 삭제 연산을 하는 웹을 구현하였습니다.

 

<!-- 페이지 이름 지정 -->
@page "/user"

<!-- 필요한 스크립트 Using -->
@using BlazerApp.Data;

<h3>Online Users</h3>

<p>
	유저 수: <b>@_users.Count()</b>
</p>

<br />

<ul class="list-group">
	@foreach (UserData user in _users)
	{
		<!-- @key="user" li가 사용하는 대상이 user라고 명시적으로 알려주는 속성-->
		<li @key="user" class="list-group-item">
			<button type="button" class="btn btn-link" @onclick="(() => KickUser(user))">❌</button>
			<label>@user.Name</label>
		</li>
	}
</ul>

<br />

<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="BTN_AddUser">Add a User</button>
		</div>
	</div>
</div>

@code {
	List<UserData> _users = new List<UserData>();

	string _inputName;

	//해당 페이지에 접속한경우, Unity의 Start와 비슷한 느낌
	protected override void OnInitialized()
	{
		//더미 데이터 세개 추가
		_users.Add(new UserData() { Name = "Kim" });
		_users.Add(new UserData() { Name = "Lee" });
		_users.Add(new UserData() { Name = "Park" });
	}

	private void BTN_AddUser()
	{
		_users.Add(new UserData() { Name = _inputName });
		_inputName = null;
	}

	private void KickUser(UserData user)
	{
		_users.Remove(user);
	}
}

 

<!-- 페이지 이름 지정 -->
@page "/user"

• 페이지의 URL을 지정합니다.

 

<!-- 필요한 스크립트 Using -->
@using BlazerApp.Data;

• C#문법과 동일하게 using을 이용하여 필요한 스크립트를 사용합니다.
• 단, 블레이저에서는 @를 붙여서 사용합니다.

 

<ul class="list-group">
	@foreach (UserData user in _users)
	{
		<!-- @key="user" li가 사용하는 대상이 user라고 명시적으로 알려주는 속성-->
		<li @key="user" class="list-group-item">
			<button type="button" class="btn btn-link" @onclick="(() => KickUser(user))">❌</button>
			<label>@user.Name</label>
		</li>
	}
</ul>

• 리스트 그룹을 생성하여 웹에 출력하고자 합니다.
• foreach문을 사용하여 리스트인 _users의 모든 요소를 하나씩 <li>로 출력합니다.
• <label>을 출력할때 앞에서 <button>을 출력하도록 합니다.

 

<button type="button" class="btn btn-link" @onclick="(() => KickUser(user))">❌</button>

• KickUser을 연결하는 버튼을 생성합니다.
• KickUser에는 UserData 매개변수가 있는데, 이것을 바로 호출할 수 없기에 람다식으로 user을 매개변수로 넣은 KickUser을 호출하도록 하는 람다함수를 매개변수로 넣어서 수행하도록 합니다.

 

<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="BTN_AddUser">Add a User</button>
		</div>
	</div>
</div>

• <div class="row"> 가로행에 <div class="col"> 세로열을 두개 넣어서 표현합니다.
• 입력필드는 _inputName이라는 변수와 바인드를 하고, 버튼은 BTN_AddUser()을 호출하여 리스트에 새로운 UserData를 삽입하도록 합니다.