BlazorでのWebアプリケーション開発手法１【C#】D12_プルダウンの入力を禁止する

今回はプルダウン(select要素)を入力できないようにする方法を解説します。Blazorのdisabled属性を使うと、Windowsフォームアプリでおなじみの「入力を禁止する」処理を、Webアプリでも簡単に実現できます。

disabled属性を付けてみる

商品プルダウンを入力不可にしたい場合は、select要素にdisabled属性を追加します。属性名を入力し始めると、IntelliSenseの候補一覧にdisabledが表示されます。

図1　select要素にdisabled属性を追加するためのIntelliSense候補

disabledは「無効にしますか？」を表す属性で、Blazorでは@マークを付けてtrue/falseの値をバインドします。値を入力し始めると、IntelliSenseにtrueキーワードが表示されます。

図2　disabled=”@true”と入力する際のIntelliSense

<select class="form-select"
        @bind="_selectedProductId"
        disabled="@true">

Windowsフォームアプリの場合はEnabledプロパティにtrueを設定すると「使える」状態になりますが、disabledはその逆で、trueを設定すると「使えなくなる」という意味になります。名前と値の意味の向きが逆になっている点に注意してください。

図3　disabled=”@true”と記述した状態

ブラウザーで動作を確認する

この状態でアプリを実行すると、「周期」のプルダウンは選べるままですが、「商品」のプルダウンはグレーアウトして選べなくなっていることが確認できます。

図4　商品名プルダウンだけが入力不可（グレーアウト）になった状態

disabled=”@true”のように固定でよい場合はこれで完成ですが、実際の開発では「こういう条件のときはプルダウンを使える」「こういう状況のときは使えない」のように、状況に応じて動的に切り替えたい場合のほうが多いはずです。そのような場合は、boolの変数を用意してdisabled属性にデータバインドしておきます。

bool型フィールドでデータバインドする

@codeブロックに、商品プルダウンの入力可否を保持するprivate bool型フィールドを追加します。初期値はfalse（入力可能）にしておきます。

private int _selectedCycle = 2;
private List<ProductEntity> _products
    = new List<ProductEntity>();
private int _selectedProductId = -1;
private bool _productDisabled = false;

図5　入力可否を保持するprivate bool _productDisabledフィールドを追加

続いて、disabled属性の値を先ほど固定していた@trueから、このフィールド@_productDisabledに書き換えてデータバインドします。

<select class="form-select"
        @bind="_selectedProductId"
        disabled="@_productDisabled">

図6　disabled=”@_productDisabled”にデータバインドした状態

最後に、保存ボタンが呼び出すSave()メソッドの中で、この値を反転（トグル）させる処理を追加します。今の値の否定（!）を代入することで、ボタンを押すたびにtrue/falseが切り替わります。

private void Save()
{
    _selectedCycle = 3;
    _productDisabled = !_productDisabled;
}

図7　Save()メソッド内で_productDisabledをトグルする処理

動作確認

アプリを実行すると、最初は商品プルダウンが入力不可の状態になっています。ここで保存ボタンを押すと_productDisabledがfalseに反転し、プルダウンが入力可能になって候補一覧（p100/p200/p300）が選べるようになります。

図8　保存ボタンを押した後、プルダウンが入力可能になり候補が選べる状態

p200を選んだ状態でもう一度保存ボタンを押すと、_productDisabledが再びtrueに反転し、選んだ値（p200）が固定されたままプルダウンが再び入力不可になります。このように、保存ボタンを押すたびに入力できる・できないが切り替わることが確認できます。

図9　もう一度保存ボタンを押すと、選択値(p200)を保持したまま再び入力不可になる

このように、画面項目の入力を禁止したり、有効にしたりしたい場合は、disabled属性にbool型のフィールドをデータバインドしておき、条件に応じてその値を切り替えるようにしてみてください。