[Blazor] Blazor & Binding

 

 

Binding.razor 페이지를 만들고 다음 처럼 작성한다

@code 부분의 변수가 html 코드 중 @_value 로 연결 되게 처리 할 수 있고

html 에서는 @bind-value=  들로 @code 쪽 갑과 연결 되어 양방향 연결이 되게 할 수 있다

@page "/binding"

<h3>Binding</h3>

<p>Value : @_value</p>

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

@code {
    int _value = 10;

}

 

 

 

메뉴 레이아웃중 하단에 binding 텝을 만들어주면

<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;
    }
}

 

 

환경은 Blazor Server 이다