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

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

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

選択前

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

新規プロジェクトの作成

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

ビューモデルの作成

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

Microsoft Learn ～ SelectListItem クラス

Imports System.Web.Mvc

Public Class ViewModel
    Public Property PrgLang As New List(Of SelectListItem)
    Public Property GetItem As String

    Sub New()
        PrgLang.Add(New SelectListItem() With {.Text = "未選択", .Value = "0", .Selected = True})
        PrgLang.Add(New SelectListItem() With {.Text = "C言語", .Value = "1"})
        PrgLang.Add(New SelectListItem() With {.Text = "Visual Basic", .Value = "2"})
        PrgLang.Add(New SelectListItem() With {.Text = "Java", .Value = "3"})
        PrgLang.Add(New SelectListItem() With {.Text = "Python", .Value = "4"})
    End Sub

    Function ViewItem() As String
        Return PrgLang.ElementAt(GetItem).Text
    End Function
End Class

Imports System.Web.Mvc

Public Class ViewModel

Public Property PrgLang As New List(Of SelectListItem)

Public Property GetItem As String

Sub New()

PrgLang.Add(New SelectListItem() With {.Text = "未選択", .Value = "0", .Selected = True})

PrgLang.Add(New SelectListItem() With {.Text = "C言語", .Value = "1"})

PrgLang.Add(New SelectListItem() With {.Text = "Visual Basic", .Value = "2"})

PrgLang.Add(New SelectListItem() With {.Text = "Java", .Value = "3"})

PrgLang.Add(New SelectListItem() With {.Text = "Python", .Value = "4"})

End Sub

Function ViewItem() As String

Return PrgLang.ElementAt(GetItem).Text

End Function

End Class

コントローラーの作成

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

Imports System.Web.Mvc

Namespace Controllers
    Public Class HomeController
        Inherits Controller

        Private vm As New ViewModel

        Function Input() As ActionResult
            Return View(vm)
        End Function

        Function Result(GetItem As String) As ActionResult
            vm.GetItem = GetItem

            Return View(vm)
        End Function
    End Class
End Namespace

Imports System.Web.Mvc

Namespace Controllers

Public Class HomeController

Inherits Controller

Private vm As New ViewModel

Function Input() As ActionResult

Return View(vm)

End Function

Function Result(GetItem As String) As ActionResult

vm.GetItem = GetItem

Return View(vm)

End Function

End Class

End Namespace

入力画面用ビューの作成

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

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

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

Microsoft Learn ～ SelectExtensions.DropDownListFor メソッド

@ModelType ViewModel
@Code
    ViewData("Title") = "Input"
End Code

@Using Html.BeginForm("Result", "Home", FormMethod.Get)
    @<p>@Html.DropDownListFor(Function(model) model.GetItem, Model.PrgLang, New With {.style = "width: 200px"})</p>
    @<p><input type="submit" value="実行" /></p>
End Using

@ModelType ViewModel

@Code

ViewData("Title") = "Input"

End Code

@Using Html.BeginForm("Result", "Home", FormMethod.Get)

@<p>@Html.DropDownListFor(Function(model) model.GetItem, Model.PrgLang, New With {.style = "width: 200px"})</p>

@<p><input type="submit" value="実行" /></p>

End Using

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

結果表示用ビューの作成

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

@ModelType ViewModel
@Code
    ViewData("Title") = "Result"
End Code

<h3>ドロップダウンリスト</h3>
<p><span class="select-item">@Model.ViewItem()</span><span style="margin:5px;">を選択</span></p>
<a href="/Home/Input/">戻る</a>

@ModelType ViewModel

@Code

ViewData("Title") = "Result"

End Code

<h3>ドロップダウンリスト</h3>

<p><span class="select-item">@Model.ViewItem()</span><span style="margin:5px;">を選択</span></p>

表示レイアウトの編集

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    @RenderBody()
</body>
</html>

<!DOCTYPE html>

<head>

<title>@ViewBag.Title - My ASP.NET Application</title>

</head>

<body>

@RenderBody()

</body>

</html>

スタイルシートの作成

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

.select-item {
    color: red;
    font-weight: bold;
}

.select-item {

color: red;

font-weight: bold;

}

プログラムの実行

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

記事一覧

ASP.NET(VB.NET) MVCモデル入門【記事一覧】