[Blazor] 데이터 바인딩 - @bind

화면에 데이터를 바인딩하여 나타내는 방법입니다.
먼저 화면에 표시할 데이터 구조를 정의합니다.

TodoItem.cs

namespace Blazor.AppTest.Data
{
    public class TodoItem
    {
        public string? Content { get; set; }
        public bool IsDone { get; set; } = false;
    }
}

위 선언된 클래스를 추가하고 목록을 나타내는 페이지를 만듭니다.

Todo.razor

@page "/todo"
@using Blazor.AppTest.Data

<h3>Todo</h3>

<input placeholder="new todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

<br />
<br />

<h3>Todo List (@todos.Count(todo => !todo.IsDone))</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Content" />
        </li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            this.todos.Add(new TodoItem { Content = newTodo });
            this.newTodo = string.Empty;
        }
    }
}

@foreach 로 todos 항목을 루프돌면서 화면에 나타내며
input 으로 데이터를 입력받게되며
@bind 를 통해 newTodo 필드와 연결됩니다.

Button Click 시 AddTodo 메서드가 호출되어 항목을 추가하게 됩니다.

실행결과

 

[Source]
https://github.com/kei-soft/Blazor.AppTest

* ul,li 는 목록을 나타내는 테그입니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul