Binding

1. 한방향 바인딩

Blazor에서 바인딩은 html코드와 C#코드를 연동하는 행위를 뜻한다.

 

우선 Pages폴더 내에 Binding.razor 파일을 생성해준다.

 

Binding.razor

@page "/bingding"

<h3>Binding</h3>

<p>Value : @_value</p>

@code {
    int _value = 15;
}

@code부분에서 C#코드 등을 정의하고 그 외에는 HTML코드이다.

그리고 '@'의 뜻은 C#과 관련된 코드라는 뜻이다. 그리고 위의 코드에서 @_value는 @code에 정의되어있는 _value의 변수를 가져온다는 뜻이다.

 

NevMenu.razor

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="binding">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Binding
            </NavLink>
        </li>

그리고 NevMenu.razor는 미리 생성된 파일인데 위의 코드를 추가해준다.

 

실행결과.

NevMenu.razor를 통해 sidebar에 Binding이라는 메뉴가 추가되었고. Binding.razor에서 표현한 내용들이 출력되었음을 확인할 수 있다.

 

이렇듯, C#코드에서 HTML로 하는 바인딩을 한방향 바인딩이라고 한다.

 

2. 양방향 바인딩

반대로 HTML에서 C#으로 가는 코드도 작성할 수 있다.

@page "/binding"

<h3>Binding</h3>

<p>Value : @_value</p>
<input type="range" step="1" @bind-value ="_value"/>
@code {
    int _value = 15;
}

빨간색으로 그어놓은 부분에 슬라이드바가 생겼는데 슬라이드 바를 이용해서 _value의 값을 조정할 수 있다.

이렇게 C#->HTML, HTML->C#으로 가는 코드를 양방향 바인딩이라고 한다.

 

3. 바인딩 실습

User.razor

@page "/user"

@using BlazorApp.Data

<h3>Online User</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))">ban</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="AddUser">Add a User</button>
        </div>
    </div>
</div>

@code {

    List<UserData> _users = new List<UserData>();

    string _inputName;

    protected override void OnInitialized() // User에 접근해서 페이지를 열면 초기화되는 함수
    {
        _users.Add(new UserData() { Name = "Rookiss" });
        _users.Add(new UserData() { Name = "Faker" });
        _users.Add(new UserData() { Name = "Deft" });
    }

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

    void KickUser(UserData user) // 인자가 있는 함수는 람다식으로 간접호출하는 식으로 써야함.
    {
        _users.Remove(user);
    }
}

Add a User버튼을 통해서 유저목록을 추가할 수 있고, ban버튼을 누르면 유저가 삭제되는 코드이다.

 

4. 속성 바인딩

<button class="@_btnClass" type="button" @onclick="AddUser" disabled="@(_users.Count() >= 5)">
Add a User</button>

위의 코드를 C#코드를 이용해서 class부분에 바인딩을 시켜줄 수 있다.

참고로 disabled는 버튼 비활성화 기능인데 속성 바인딩을 이용해서 조건을 걸어주었다.(조건식을 통해 true, false값이 반환된다.)

 

            <button class="@_btnClass" type="button" @onclick="AddUser">Add a User</button>
            
@code {
    string _btnClass = "btn btn-primary";
    
        void RefreshButton() // 유저수가 홀수짝수에 따라 버튼색이 바뀜
    {
        if (_users.Count % 2 == 0)
            _btnClass = "btn btn-primary";
        else
            _btnClass = "btn btn-secondary";
    }
}

 

참고로

StateHasChange();

라는 함수를 넣어주면 화면이 최신상태로 랜더링이 된다.