Blazor two way 데이터 바인딩을 알아보기 위해서 사용자가 텍스트 상자에 입력할 때 입력한 총 문자 수를 표시하는 방법을 알아보겠습니다.
Blazor component class
구성 요소 클래스에서 Description 속성을 만듭니다 . 속성을 빈 문자열로 초기화하는 것이 중요합니다. 그렇지 않으면 런타임에 null 참조 예외가 발생합니다 .
public string Description { get; set; } = string.Empty;
Blazor component view
<div>
<textarea @bind="Description" @bind:event="oninput" />
</div>
<div>
Count : @Description.Length
</div>
코드 설명
- bind 특성을 사용하여 <textarea> 요소를 Description 속성 에 바인딩합니다 .
- bind 특성을 사용하면 양방향 데이터 바인딩을 얻을 수 있습니다. 즉, <textarea> 요소는 Description 속성 의 값을 표시 하고 UI에서 <textarea> 요소 의 텍스트를 변경하면 구성 요소 클래스의 Description 속성이 자동으로 변경 즉, 업데이트 됩니다.
- 기본적으로 바인드 속성은 변경 이벤트 에서 데이터를 바인딩합니다 . 요소가 포커스를 잃으면 변경 이벤트가 트리거됩니다.
- 그러나 사용자가 <textarea> 요소 에 입력할 때 문자 수를 원합니다.
- 이는 데이터 바인딩의 기본 이벤트를 변경하고자 함을 의미합니다. 바인딩 속성 의 이벤트 매개변수를 사용하여 이를 수행합니다 .
- 이 예제에서는 기본 바인딩 이벤트를 onchange 에서 oninput 으로 변경했습니다 .
- <textarea> 요소 에 입력하면 입력 이벤트가 시작되고 Description 속성이 새 값으로 업데이트됩니다.
- 문자 수를 표시하기 위해 UI는 @Description.Length 로 바인딩시켜 표시합니다.
실행결과
