Blazor C# で HTML 入力から変数を取得する方法

Blazor は、JavaScript ではなく C# を使用してインタラクティブな Web アプリケーションを構築するための強力なフレームワークです。 Blazor の中核機能の 1 つは、C# コードを HTML 要素にバインドする機能で、ユーザー入力を簡単に取得してアプリケーションで使用できるようになります。この記事では、Blazor Server アプリケーションと Blazor WebAssembly アプリケーションの両方で、Blazor の HTML 入力要素から変数を取得する方法を説明します。

Blazor の双方向データ バインディングの概要

Blazor は、「双方向データ バインディング」と呼ばれる機能を提供します。これにより、ユーザー インターフェイス (UI) を変更すると、基になる C# 変数が自動的に更新され、またその逆も可能になります。これは、ユーザーが HTML 入力フィールドに入力したデータをキャプチャし、それらの変更を C# コードに即座に反映する場合に非常に便利です。

はじめる

HTML 入力フィールドから変数を取得するには、いくつかの主要なコンポーネントが必要です。

1. HTML 入力: ユーザーがデータを入力する入力フィールド。
2. C# 変数: 入力からのデータを保存する C# 変数。
3. データ バインディング: 入力フィールドと C# 変数の間の接続。通常は Blazor の@bindディレクティブを介します。

次のセクションでは、これがどのように機能するかを示すさまざまな例を説明します。

例 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ディレクティブは、C# のinput要素を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# の間の統合をシームレスに処理するため、対話型 Web アプリケーションを構築する場合に最適です。