[Blazor] Binding

Blazer 프로젝트 생성

Blazor Server 형식으로 만들경우
Visual Studio에서 ‘Blazor 앱 > Blazor 서버 앱’을 선택해 생성하면 된다.

Razor Component(.razor)

Blazor는 Razor Component들로 이루어져 있으며 생성방법은
‘새 항목 추가 > Razor 구성 요소’를 선택해 생성하면 된다.

Razor Component(.razor) 파일은 C#와 HTML 태그들을 사용해 구현된다.

기본적으로 맨 위에는 필요한 선언문들이 들어가고, 중앙에는 C#과 혼합된 HTML 태그들이, 맨 아래 @code { } 부분은 전형적인 C#코드가 들어간다.

ex) FetchData.razor

@page "/fetchdata"

@using BlazorApp.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

Binding

테스트를 위해 Pages 폴더에 Binding.razor라는 이름으로 Razor Component를 생성하고 아래와 같이 작성해본다.

Binding.razor

@page "/binding"

<h3>Binding</h3>

<p>Value : @_value</p>

@code {
    int _value = 15;
}

Razor Component 파일에서는 ‘@page’를 사용해 라우팅 경로를 설정해줄 수 있다.

‘@변수이름’ 형식으로 작성하면 실제 선언되어 있는 변수와 바인딩을 해주어 현재 변수에 저장되어 있는 값을 불러온다.

필요한 변수와 함수는 아래 @code { }안에 C#으로 구현하면 된다.

값이 잘 출력되는지 테스트해보기 위해 Shared 폴더에 NavMenu.razor 파일로 가 메뉴를 추가해본다.

NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorApp</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<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>
        @* 메뉴 추가 *@
        <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>
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

다른 메뉴 구문을 복사해 href 경로와 이름만 수정해주었다.

실행시켜보면 좌측 사이드바에 Binding이라는 메뉴가 생겼고 눌러보면 _value 값이 잘 출력된 모습을 볼 수 있다.

Binding

방금은 값을 불러오는 쪽으로 바인딩을 하였지만 반대로도 가능하다.

@page "/binding"

<h3>Binding</h3>

<p>Value : @_value</p>
<input type="range" step="1" @bind-value="_value" />

@code {
    int _value = 15;
}

<input> 태그에서 @bind-value 속성을 이용해 _value와 바인딩해주고 있다.

실행시켜보면 range를 만질때마다 _value 값이 달라지는 것을 볼 수 있다.

Binding

참고로 지금은 마우스를 때야 값이 변하는데 이부분은 옵션을 추가해 설정해줄 수 있다.

@page "/binding"

<h3>Binding</h3>

<p>Value : @_value</p>
<input type="range" step="1" @bind-value="_value" @bind-value:event="oninput"/>

@code {
    int _value = 15;
}

<input> 태그에 @bind-value:event 속성을 추가해 “oninput”이라고 설정해둔다.
그러면 마우스를 때지않아도 실시간으로 값이 변하는 모습을 볼 수 있다.