BlazorでのWebアプリケーション開発手法１【C#】D07_プルダウン

ここからはプルダウン（C#でいうところのコンボボックス）を作成していきます。Home画面が要素で混み合ってきたため、まず新しく計測設定用の画面を用意し、その画面上にプルダウンを実装していきます。

図1　本レクチャーの表紙スライド

新しい画面を追加する

Pagesフォルダーを右クリックし、「追加」から「Razor コンポーネント」を選択します。

図2　Pagesを右クリックし「追加」→「Razor コンポーネント」を選択

追加するコンポーネントの名前は「MeasureSettingPage」とします。

図3　新しい項目の追加ダイアログで名前に「MeasureSettingPage」を入力

追加すると雛形のコードが生成されるので、先頭の@pageディレクティブを“/measuresetting”に書き換え、見出し（h3タグ）の中身を「計測設定」に書き換えます。

図4　@pageディレクティブとh3見出しを書き換えている途中の状態

図5　書き換えが完了した状態のMeasureSettingPage.razor

@page "/measuresetting"
<h3>計測設定</h3>
 
@code {
 
}

NavMenuにリンクを追加する

NavMenu.razorを開き、既存の「商品一覧」用のdivタグ全体（<div class=”nav-item px-3″>から</div>まで）をコピーして、その直後に貼り付けます。

図6　NavMenu.razorで「商品一覧」のdivブロックをコピー対象として選択

貼り付けたブロックのhref属性を“measuresetting”に書き換えます。この時点ではまだ表示テキストは「商品一覧」のままです。

図7　貼り付けたブロックのhref属性を「measuresetting」に書き換えた状態

続けて表示テキストも「計測設定」に書き換えれば完成です。アイコン（class=”bi bi-activity-nav-menu”）はそのまま流用します。

図8　表示テキストを「計測設定」に書き換えて完成したNavMenu.razor

<div class="nav-item px-3">
    <NavLink class="nav-link" href="measuresetting">
        <span class="bi bi-activity-nav-menu" aria-hidden="true"></span> 計測設定
    </NavLink>
</div>

ここで一度実行して確認します。サイドバーに「計測設定」のメニュー項目が追加されていることが分かります。

図9　実行し、サイドバーに「計測設定」が追加されたことを確認

クリックすると、見出しだけの「計測設定」画面が表示され、URLも/measuresettingになっていることが確認できます。ここまでの手順に問題がなければOKです。

図10　「計測設定」画面がURL /measuresetting で表示されることを確認

プルダウンを作成する

それではプルダウンを作っていきます。プルダウンはselectタグで作成します。selectと入力すると、IntelliSenseの候補に「select」が表示されます。

図11　<select と入力し、IntelliSenseに「select」の候補が表示された状態

selectタグの中にoptionタグを追加していきます。こちらも同様にIntelliSenseで「option」の候補が表示されます。

図12　selectタグの中で<op と入力し、IntelliSenseに「option」の候補が表示された状態

optionタグのvalue属性に“1”を指定し、開始タグと終了タグの間には画面上に表示する文字列として「毎日」を入力します。value属性はプログラム上で扱われる値、タグの中のテキストは見た目上表示される文字列という、いわばキーとバリューの関係になっています。

図13　<option value=”1″>毎日</option> が完成した状態

同じ要領でoptionタグをさらに2つ追加し、value“2”を「毎週」、value“3”を「毎月」とします。

図14　3つのoptionタグ（毎日／毎週／毎月）が完成した状態

<select>
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>

これで実行すると、「計測設定」画面にプルダウンが表示されます。クリックすると「毎日」「毎週」「毎月」の3つの選択肢が一覧表示されます。

図15　プルダウンをクリックし、「毎日」「毎週」「毎月」の3択が表示された状態

「毎週」を選択すると、選んだ項目がプルダウンに反映されて表示されることが確認できます。プログラムコード上では値として“2”が選ばれており、見た目上は「毎週」という文字列が表示されている、という関係です。こんな感じでプルダウンを作成していきます。

図16　「毎週」を選択した後のプルダウンの表示