PROGRAM VISUALBASIC

ASP.NET(VB.NET) MVCモデル入門~HTMLヘルパー(ドロップダウンリスト)

HTMLヘルパーのDropDownListを使ったプログラム

今回は、HTMLヘルパーのドロップダウンリスト(DropDownList)を使ったサンプルプログラムを作りましょう。
ドロップダウンリストは、以下のようなHTMLの要素で、クリックすると下にリストが表示され、複数の項目から1つだけ選択することができます。

vbmvc26-1
選択前
vbmvc26-2
選択中

ドロップダウンリストを使ったプログラムは、こちらの記事にもありますので参考にしてください。

新規プロジェクトの作成

新規にプロジェクトを作成します。
今回のサンプルプログラムは、プロジェクト名を「HelperDropDownList」として作成します。
プロジェクトの作成方法は、こちらの記事を参照してください。

ビューモデルの作成

ドロップダウンリストを扱うビューモデルを作成します。
ドロップダウンリスト用のリストと、選択された値を保持するためのプロパティを定義します。
コンストラクターの中で、ドロップダウンリストのアイテムを追加します。
なお、ドロップダウンリストの型は、SelectListItemクラスを使います。
また、ViewItem()メソッドは、ドロップダウンリストから選択したTextの内容を返します。
SelectListItemクラスの詳しい内容は、以下のマイクロソフトの公式サイトを参照してください。

コントローラーの作成

今回は、コントローラーを1つだけ作成します。
この中に、入力用のビューを呼び出すInput()メソッドと、結果表示用のビューを呼び出すResult()メソッドを作成します。
Result()メソッドは、引数として選択されたドロップダウンリストのValue値が渡され、その値をビューモデルのGetItemプロパティに設定します。

入力画面用ビューの作成

入力画面用のビューを作成します。
HTMLヘルパーのHtml.DropDownListFor()メソッドを使って、ドロップダウンリストを作成します。
Html.DropDownListFor()メソッドの使い方は、以下の通りです。

@Html.DropDownListFor(Function(model) model.プロパティ, ドロップダウンリスト)

「Function(model) model.プロパティ」の部分は、ラムダ式といわれるもので、名前のない関数です。
Functionにmodelが渡され、modelの中のプロパティをHtml.DropDownListFor()メソッドに引数として渡しています。
model.プロパティの「プロパティ」部分がドロップダウンリストの idname になります。
modelの内容は、コントローラーから渡されます。
上記では、Functionの引数をmodelとしていますが、名前はなんでも構いません
詳しくは、以下のマイクロソフトの公式サイトを参照してください。

ドロップダウンリストの幅を「New With {.style = "width: 200px"}」で指定します。
これを指定しないと、最も長いアイテムの長さに合わされます。

結果表示用ビューの作成

ドロップダウンリストから、何が選択されたかを表示するためのビューを作成します。
コントローラーから渡されたビューモデルのViewItem()メソッドを呼び出して、選択された値を表示します。

表示レイアウトの編集

ビューを作成すると、自動的に「Views/Shared/_Layout.vbhtml」が作成されるので、これを以下のように編集します。

スタイルシートの作成

このプロジェクトで使用するスタイルシート(Site.css)を、以下のように修正します。
ドロップダウンリストから選択された値を、太字で表示します。

プログラムの実行

ドロップダウンリストの中から項目を任意に選択します。
ここでは例として「Visual Basic」を選択しています。

vbmvc26-3
実行結果

-PROGRAM, VISUALBASIC
-,