[Web] 속성 바인딩

코드 영역의 변수나 리스트와 같은 자료구조뿐만 아니라 HTML에서 사용할 attrubute 또한 문자열 변수를 바인딩하여 속성 자체를 변경할 수 있습니다.

· 속성 바인딩

<!-- 페이지 이름 지정 -->
@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">
			<!-- 속성(attribute)에도 바인딩을 할 수 있음!-->
			<!-- conditional attruibute 속성 자체에 조건을 붙일 수 있음!-->
			<button class="@_btnClass" type="button" @onclick="AddUser" disabled="@(_users.Count() >= 5)">Add a User</button>
		</div>
	</div>
</div>

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

	string _inputName;
	string _btnClass = "btn btn-primary"; //버튼의 속성

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

		RefreshButton();
	}

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

		RefreshButton();
	}

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

		RefreshButton();
	}

	private void RefreshButton()
	{
		_btnClass = _users.Count % 2 == 0 ? "btn btn-primary" : "btn btn-secondary";
	}
}

• <button class="@_btnClass" ... >로 선언하여 속성에 _btnClass라는 변수를 바인딩하였습니다.
• _btnClass의 값에 따라 button은 속성이 바뀌게 됩니다.

 

private void RefreshButton()
{
    _btnClass = _users.Count % 2 == 0 ? "btn btn-primary" : "btn btn-secondary";
}

• 초기화, 삽입, 삭제를 할 때마다 이 함수를 호출되게 만들어 _users의 리스트의 요소 개수가 짝수, 홀수개에 따라 값을 "btn btn-primary" 또는 "btn btn-secondary"로 설정합니다.

 

· 적용 예시

• 버튼을 누를 때마다 _btnClass의 값이 변하면서 색상이 변하는 것을 확인할 수 있습니다.
• 추가로, 유저수가 5명일 때 Add User버튼이 비활성화되는 것을 볼 수 있습니다.