ASP.NET MVC 5 でドロップダウンリストを使用する – ViewModel 編

ASP.NET MVC で、ドロップダウンリストを使用する方法について調べた結果をまとめてみました。

今回は ViewModel 編ということで、ドロップダウンリストの選択肢を表す ViewModel を作成し、Html.DropDownListFor メソッド を使用してドロップダウンリストを描画します。

環境

Windows 8.1 Home Edition
Visual Studio Community 2015 Update 2
ASP.NET MVC 5.2.3

目的

直近 10 年が選択肢となるドロップダウンリストを表示する。

手順

■ ビューモデルの作成

ここでは、以下の 2 つのビューモデル作成します。

  • 年のドロップダウンリストの選択肢(の 1 件)を表すビューモデル
  • ページ全体を表すビューモデル

ポイントとしては、YearViewModel に、

  • ドロップダウンで選択した値と連動する Year プロパティ
  • 選択肢を設定するための YearOptions プロパティ

の両方を定義していることです。
YearOptions プロパティの目的は 「View に選択肢を渡すこと!」です。
なので、これは ViewBag でも代用可能です。

「MVC なのに何故 ビューモデルなの?モデルじゃないの?」と思われるかもしれませんが、以下の理由から ビューモデルとして実装しています。

  • ドロップダウンリストの選択肢はあくまで ビュー を意識したものなので、 モデル に持つのは違和感がある。
    (モデルというと EntitiyFramework などでそのまま DB にマッピングされる対象となるが、
    そこにドロップダウンリストの選択肢をもっているのはおかしいと思う為。)
  • ビューモデルを使用したほうが実用的だと思った為。
    MVC のスキャフォールディングで作成するような、
    単一のモデルをそのままビューに表示して CRUD 処理を行うようなページって、
    そんなに作らんのちゃうかなーと思っています。
    (モデルをそのままビューに出力するときは、選択肢は ViewBag で持つことになると思います。)

■ コントローラーの作成

コントローラーには、以下のメソッドを定義しています。

  • GET 用の Create メソッド
  • POST 用の Create メソッド
  • 年の選択肢を取得する GetYearOptions メソッド

注意点として、POST 用の Create メソッドでも、再度 DropDwonListViewModel の YearOptions プロパティに選択肢をセットしてやる必要があります。
(vm.YearOptions は、ここでは null になっています。)

■ ビューの作成

ビューでは、YearOptions プロパティを SelectList に変換し、Html.DropDownListFor メソッドを使用して、ドロップダウンリストを出力します。

結果

以下のように、ドロップダウンリストが出力されます。
DropDownList_ViewModel_1

DropDownList_ViewModel_2

Tk2

Tk2 has written 12 articles

映画とかゲームとかが好きです。
最近 Java をやりだし、悪戦苦闘中。
(→二度と Java やりたくないと決意。)
はやく引退して悠々自適な生活したい。

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">