Blazor C#의 HTML 입력에서 변수를 가져오는 방법

Blazor는 JavaScript가 아닌 C#을 사용하여 대화형 웹 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. Blazor의 핵심 기능 중 하나는 C# 코드를 HTML 요소와 바인딩하여 사용자 입력을 쉽게 캡처하고 애플리케이션에서 사용할 수 있도록 하는 기능입니다. 이 문서에서는 Blazor Server 및 Blazor WebAssembly 애플리케이션 모두에서 Blazor의 HTML 입력 요소에서 변수를 가져오는 방법을 살펴보겠습니다.

Blazor의 양방향 데이터 바인딩 소개

Blazor는 "양방향 데이터 바인딩"이라는 기능을 제공합니다. 이 기능을 사용하면 사용자 인터페이스(UI)를 변경하여 기본 C# 변수를 자동으로 업데이트할 수 있으며 그 반대의 경우도 마찬가지입니다. 이는 사용자가 HTML 입력 필드에 입력한 데이터를 캡처하고 해당 변경 사항을 C# 코드에 즉시 반영하려는 경우 매우 유용합니다.

시작하기

HTML 입력 필드에서 변수를 얻으려면 몇 가지 주요 구성 요소가 필요합니다.

1. HTML 입력 : 사용자가 데이터를 입력하는 입력 필드입니다.
2. C# 변수 : 입력의 데이터를 저장하는 C# 변수입니다.
3. 데이터 바인딩 : 일반적으로 Blazor의 @bind 지시문을 통해 입력 필드와 C# 변수 간의 연결입니다.

다음 섹션에서는 이것이 어떻게 작동하는지 보여주기 위해 다양한 예제를 살펴보겠습니다.

예 1: 간단한 텍스트 입력 바인딩

사용자 입력을 캡처하는 가장 간단한 방법은 @bind 지시어를 사용하는 것입니다. 이렇게 하면 HTML 입력 요소가 C# 변수에 자동으로 바인딩됩니다.

코드 예(Razor 구성 요소)

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

설명:

1. @bind 지시문은 input 요소를 C#의 userName 변수에 바인딩합니다. 사용자가 입력 필드에 입력할 때마다 userName 변수가 자동으로 업데이트됩니다.
2. <p>Hello, @userName!</p> 단락은 userName 값을 동적으로 표시하여 사용자가 입력할 때 실시간으로 업데이트된 텍스트를 표시합니다.

이 예제에서는 userName 변수가 입력 필드에 연결되어 있으며 Blazor의 양방향 바인딩을 통해 사용자가 텍스트를 수정할 때마다 userName 값이 실시간으로 업데이트됩니다.

예 2: 버튼 클릭 시 입력 가져오기 및 사용

때로는 값을 제출하거나 추가 처리를 위해 버튼을 클릭하는 등 사용자가 입력한 데이터에 대한 작업을 수행해야 하는 경우도 있습니다. 이는 Blazor에서도 쉽게 달성할 수 있습니다.

코드 예(Razor 구성 요소)

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

설명:

1. @bind="age" 지시문은 입력 필드를 age 변수에 바인딩합니다.
2. @ 는 버튼의 클릭 이벤트를 SubmitAge 메서드에 바인딩합니다.
3. 사용자가 버튼을 클릭하면 입력한 연령을 콘솔에 인쇄하는 SubmitAge 메서드가 호출됩니다.

이 예에서는 사용자가 나이를 입력할 수 있으며 "제출" 버튼을 클릭하면 SubmitAge 메서드가 트리거되어 age 변수를 사용하여 작업을 수행합니다.

예 3: 입력 유효성 검사

Blazor를 사용하면 <EditForm> 과 같은 양식 구성 요소와 데이터 바인딩을 결합하여 입력 유효성 검사를 쉽게 수행할 수 있습니다.

코드 예(Razor 구성 요소)

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

설명:

1. <EditForm> 구성 요소는 입력 필드를 래핑하고 유효성 검사를 수행하는 데 사용됩니다.
2. @bind-Value="person.FirstName" 은 입력 필드를 person 개체의 FirstName 속성에 바인딩합니다.
3. DataAnnotationsValidator 구성 요소는 데이터 주석(예: [Required] )을 사용하여 입력의 유효성을 검사합니다.
4. 입력이 유효하고 양식이 제출되면 HandleValidSubmit 메서드가 호출되어 데이터를 처리합니다.

확인:

• 사용자가 이름을 제공하지 않으면( [Required] 주석으로 인해) 유효성 검사 메시지가 나타나고 입력이 유효할 때까지 양식이 제출되지 않습니다.

다른 입력 유형과의 고급 바인딩

Blazor는 텍스트 상자, 확인란, 라디오 버튼, 드롭다운 등과 같은 광범위한 입력 유형을 지원합니다. 유사한 방식으로 이러한 요소에 변수를 바인딩할 수 있습니다.

예: 체크박스 바인딩

 @page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

이 예에서 확인란은 isSubscribed 변수에 바인딩되어 있으며 사용자가 상자를 선택하거나 선택 취소하면 isSubscribed 값이 자동으로 업데이트됩니다.

결론

Blazor의 강력한 양방향 데이터 바인딩 덕분에 Blazor의 HTML 입력에서 변수를 가져오는 것이 쉽고 효율적입니다. @bind 지시문을 사용하면 입력 필드를 C# 변수에 빠르게 연결하여 UI의 변경 사항이 코드에 반영되고 그 반대의 경우도 가능합니다.

간단한 양식을 작성하든 복잡한 입력 유효성 검사 논리를 작성하든 Blazor의 데이터 바인딩 기능은 사용자 입력 작업 프로세스를 단순화합니다. 텍스트 상자에서 확인란까지 Blazor는 HTML과 C# 간의 통합을 원활하게 처리하므로 대화형 웹 애플리케이션을 구축하는 데 탁월한 선택입니다.