Binding 1

Razor 구성 요소는 필드, 속성, Razor 식 값을 사용하여 
@bind Razor 지시문 특성에 데이터 바인딩 기능을 제공합니다.

 

Pages/Bind.razor

속성 및 Field 에 바인딩하는 예제.

focus 가 input 에서 사라지면 ui 가 rendering 되며 속성 또는 필드가 update 된다.

@page "/bind"

<p>
    <input @bind="inputValue" />
</p>

<p>
    <input @bind="InputValue" />
</p>

<ul>
    <li><code>inputValue</code>: @inputValue</li>
    <li><code>InputValue</code>: @InputValue</li>
</ul>

@code {
    private string? inputValue;

    private string? InputValue { get; set; }
}

 

Pages/BindTheory.razor

다음은 Blazor @bind 가 실제 HTML 로 작성되는 방식을 보여준다.

@page "/bind-theory"

<p>
    <label>
        Normal Blazor binding: 
        <input @bind="InputValue" />
    </label>
</p>

<p>
    <label>
        Demonstration of equivalent HTML binding: 
        <input value="@InputValue"
            @onchange="@((ChangeEventArgs __e) => InputValue = __e?.Value?.ToString())" />
    </label>
</p>

<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

실제로는 @bind 에서 형식 변환이 수행되는 경우를 처리하기 때문에 코드 실행이 더욱 복잡하다. 일반적로 @bind 는 식의 현재 값을 value 특성과 연결하고 등록된 처리기를 사용하여 변경 내용을 처리하다.

 

또한 실행 해서 확인해 보면 Input 에 입력값을 입력 하고 focus 가 이동하면 label 에 update 되는 것을 확인할 수 있다. 만약 사용자가 focus 의 이동없이 page 를 이동하게 되면 원하는 동작을 하지 않을 수 도 있다. 이런 문제를 해결 하기 위해 event 를 관리 할 수 있다.

 

Pages/BindEvent.razor

다음은 bind 된 property 또는 field 의 값을 input 의 키입력시 바로 전달 하는 예제이다. 

@bind 는 @bind:event="oninput" 을 통해 이를 구현한다. 

html 에서는 @oninput 을 통해 구현 가능하다

*Razor 특성 바인딩은 대/소문자를 구분하므로 사용시 유의하자*

@page "/bind-event"

<p>
    <label>
        Normal Blazor binding (onInput): 
        <input @bind="InputValue" @bind:event="oninput"/>
    </label>
</p>

<p>
    <label>
        Demonstration of equivalent HTML binding: 
        <input value="@InputValue"
            @oninput="@((ChangeEventArgs __e) => InputValue = __e?.Value?.ToString())" />
    </label>
</p>

<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

 

Pages/BindMultipleInput.razor

<select> 같은 element 에서 여러 값을 선택 했을 경우 바인딩 (Multiple Binding)

@page "/bind-multiple-input"

<h1>Bind Multiple <code>input</code>Example</h1>

<p>
    <label>
        Select one or more cars: 
        <select @onchange="SelectedCarsChanged" multiple>
            <option value="audi">Audi</option>
            <option value="jeep">Jeep</option>
            <option value="opel">Opel</option>
            <option value="saab">Saab</option>
            <option value="volvo">Volvo</option>
        </select>
    </label>
</p>

<p>
    Selected Cars: @string.Join(", ", SelectedCars)
</p>

<p>
    <label>
        Select one or more cities: 
        <select @bind="SelectedCities" multiple>
            <option value="bal">Baltimore</option>
            <option value="la">Los Angeles</option>
            <option value="pdx">Portland</option>
            <option value="sf">San Francisco</option>
            <option value="sea">Seattle</option>
        </select>
    </label>
</p>

<span>
    Selected Cities: @string.Join(", ", SelectedCities)
</span>

@code {
    public string[] SelectedCars { get; set; } = new string[] { };
    public string[] SelectedCities { get; set; } = new[] { "bal", "sea" };

    void SelectedCarsChanged(ChangeEventArgs e)
    {
        if (e.Value is not null)
        {
            SelectedCars = (string[])e.Value;
        }
    }
}

 

관련영상

https://youtu.be/yniePrtzXPk