【Blazor】 入力インターフェースのバインド方法

ドロップダウンでバインドされた値を表示するコンポーネントを作成します。

<select @bind="SelectedFruit">
    @foreach (var fruit in fruits)
    {
        <option value=@fruit>@fruit</option>
    }
</select>

<p>選択されたフルーツ：@SelectedFruit</p>

@code
{
    public string SelectedFruit { get; set; } = "Apple";

    private List<string> fruits = new List<string>
    {
        "Apple",
        "Banana",
        "Orange"
    };
}

optionタグのvalue属性にはフルーツの名前の文字列を設定しています。 @bindにSelectedFruitを指定することで、 ユーザーがドロップダウンで項目を選択したとき、この値がバインドされているSelectedFruitプロパティにバインドされるようになります。

次に、テキストボックスの値をバインドする方法に解説します。 ユーザーがテキストボックスに入力した値をリアルタイムで取得することができます。

<input type="text" @bind="InputText" />

<p>入力されたテキスト：@InputText</p>

@code {
    public string InputText { get; set; }
}

@bindを使用して、InputTextプロパティにバインドします。 これにより、ユーザーが入力したテキストが自動的にInputTextプロパティに反映されます。

チェックボックスの値をバインドする方法について解説します。チェックボックスの状態（チェックされているかどうか）をプロパティにバインドします。

<input type="checkbox" @bind="IsChecked" />

<p>チェックボックスの状態：@(IsChecked ? "チェックされています" : "チェックされていません")</p>

@code {
    public bool IsChecked { get; set; }
}

@bindを使用して、IsCheckedプロパティにバインドします。 これにより、チェックボックスの状態がIsCheckedプロパティに反映されます。

ラジオボタンの選択された値をバインドする方法を解説していきます。複数のラジオボタンから選択された値を1つのプロパティにバインドします。

<div>
    <input type="radio" id="option1" name="options" value="Option1" @onchange="e => SelectedOption = e.Value?.ToString()" checked="@((SelectedOption == "Option1"))" />
    <label for="option1">オプション1</label>
</div>
<div>
    <input type="radio" id="option2" name="options" value="Option2" @onchange="e => SelectedOption = e.Value?.ToString()" checked="@((SelectedOption == "Option2"))" />
    <label for="option2">オプション2</label>
</div>
<p>選択されたオプション：@SelectedOption</p>

@code {
    public string? SelectedOption { get; set; }
}

@bindを使用して、SelectedOptionプロパティにバインドします。 これにより、選択されたラジオボタンの値がSelectedOptionプロパティに反映されます。

最後に、スライダーの値をバインドする方法を解説します。スライダーの値をリアルタイムで取得し、プロパティにバインドします。

<input type="range" min="0" max="100" @bind="SliderValue" />

<p>スライダーの値：@SliderValue</p>

@code {
    public int SliderValue { get; set; }
}

@bindを使用して、SliderValueプロパティにバインドします。 これにより、スライダーの値がSliderValueプロパティにリアルタイムで反映されます。

作成したコードをデバッグすると、以下のようにバインドの様子を確認できます。

バインドはよく使う機能なので、是非使ってみてください。