BlazorでのWebアプリケーション開発手法１【C#】D10_プルダウンにリストの値を表示する

今回は、プルダウン（selectタグ）にListの値を表示する方法を学びます。「毎日」「毎週」「毎月」のように選択肢が固定であれば、optionタグを決め打ちで書くだけで済みます。しかし、データベースなどから取得した値をプルダウンに表示したい場合は、あらかじめ選択肢の数も値も分からないため、固定では書けません。今回はこのような場合に、Listの中身を動的にプルダウンへ反映させる方法を解説します。

図1 固定のoptionタグで選択肢を書いた場合の例（比較用）

Listの準備

まず、プルダウンに表示するためのListを用意します。以前の商品一覧画面（ProductPage）で作成したProductEntityクラスを再利用します。@usingディレクティブでProductEntityが属する名前空間を読み込んでおきます。

図2 private List<ProductEntity> _products; の入力

図3 @using Ander99.Objects の追加

図4 _products = new List<ProductEntity>(); でListを初期化

続いて、画面の起動時（初期化時）にデータを作成したいので、OnInitializedメソッドをオーバーライドします。今回は同期処理で実装します。

図5 protected override void OnInitialized() の入力

ProductPageに以前作成したデータのうち、100・200・300の3行分をコピーして貼り付け、_productsに3件のデータを追加します。これでListの準備は完了です。

図6 OnInitializedに3件のデータ（p100・p200・p300）を追加したコード

@code {
    private int _selectedCycle = 2;
    private List<ProductEntity> _products = new List<ProductEntity>();
 
    protected override void OnInitialized()
    {
        _products.Add(new ProductEntity(100, "p100", 1000));
        _products.Add(new ProductEntity(200, "p200", 2000));
        _products.Add(new ProductEntity(300, "p300", 3000));
    }
}

selectタグにListの値を動的に表示する

この3件のデータをプルダウンに表示していきます。まずselectタグを新たに作成します。通常であれば<option value=”…”>…</option>のように選択肢を直接記述しますが、今回はoptionの行数も値もあらかじめ分からないため、動的に生成する必要があります。

図7 2つ目のselectタグを追加した状態

図8 固定のoptionタグを試しに1行だけ書いた状態

そこで@foreachを使い、_productsの中身を1件ずつ取り出しながらoptionタグを生成します。foreachで回した1行分がvalに入ってくるので、そのvalを使ってoptionタグのvalue属性と表示文字列を組み立てます。

図9 @foreachの入力を開始した状態

図10 @foreach (var val in _products) の中に仮のoptionタグを配置した状態

value属性には@val.ProductIdを、表示する文字列には@val.ProductNameを指定します。これで_productsの件数分だけoptionタグが自動的に作られるようになります。

図11 value=”@val.ProductId”>@val.ProductName</option> まで完成したコード

<select class="form-select">
    @foreach (var val in _products)
    {
        <option value="@val.ProductId">@val.ProductName</option>
    }
</select>

実行すると、プルダウンに「p100」「p200」「p300」という3件の選択肢がProductNameの値で表示されていることが確認できます。試しにProductNameの部分をPriceに変更すると、1000・2000・3000という価格の値が表示されます。確認後はProductNameに戻しておきます。

図12 実行結果：プルダウンにp100・p200・p300が表示された状態

図13 試しにProductNameをPriceに変更したコード

Bootstrapクラスの設定

見た目については、ここまでと同じようにBootstrapのクラスを設定します。class=”form-select”を指定すると、他のフォーム部品と統一感のあるきれいな見た目になります。

図14 class=”form-select” のIntelliSense候補

図15 form-selectクラス適用後のきれいな表示結果

プルダウンの値のデータバインド

最後に、プルダウンで選択した値をデータバインドで受け取れるようにします。方法はこれまでと同様で、int型のフィールドを用意し、selectタグに@bind属性を指定するだけです。

図16 private int _selectedProductId; の宣言とOnInitializedの全体コード

<select class="form-select" @bind="_selectedProductId">
    @foreach (var val in _products)
    {
        <option value="@val.ProductId">@val.ProductName</option>
    }
</select>
 
@code {
    private int _selectedProductId = 0;
}

Saveメソッドにブレークポイントを置いて実行し、プルダウンで「p200」を選んでから保存ボタンを押すと、_selectedProductIdの値が200になっていることがブレークポイントで確認できます。また、初期値をあらかじめ200にしておけば、起動直後からp200が選択された状態になり、そこでp300を選べば300になることも確認できます。

図17 ブレークポイントで_selectedProductIdが200になっていることを確認

図18 初期値を200に設定したコード（起動時からp200が選択された状態になる）

private int _selectedProductId = 200;

注意点：データバインドできるのは基本型のみ

ここで1つ注意点があります。@bindでデータバインドできるのはint・string・DateTimeなどの基本型の値だけで、ProductEntityのようなクラス（オブジェクト）そのものをバインドすることはできません。試しに@bind先をProductEntity型のフィールドに変更し、optionタグのvalueにも@val（ProductEntityそのもの）を指定してみます。

図19 _productへの変更を試みた際のIntelliSense候補

図20 private ProductEntity _product; と記述したコード

図21 optionタグのvalueに@val（ProductEntity）を指定した場合、型が一致せずデータバインドできない

<select class="form-select" @bind="_product">
    @foreach (var val in _products)
    {
        <option value="@val">@val.ProductName</option>
    }
</select>
 
@code {
    private ProductEntity _product;
}

このように、ProductEntity自体をキーにしたデータバインドはできません。基本型であるProductId（int型）のような値を通常はキーとして使い、それをデータバインドする、という形で実装する必要があります。最終的にはコードを元の_selectedProductId（int型）に戻して完成です。

図22 最終的にint型の_selectedProductIdに戻したコード

以上が、プルダウンにListの値を動的に表示し、選択した値をデータバインドで受け取る方法です。