ASP.NET(VB.NET) MVCモデル入門～HTMLヘルパー(リストボックス)

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

今回は、HTMLヘルパーのリストボックス(ListBox)を使ったサンプルプログラムを作りましょう。
リストボックスは、以下のようなHTMLの要素で、一覧から複数の項目を選択することができます。

新規プロジェクトの作成

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

ビューモデルの作成

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

Microsoft Learn ～ SelectListItem クラス

Imports System.Web.Mvc

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

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

    Function ViewItem(GetItem As List(Of String)) As String
        Dim item As String = Nothing

        For i As Integer = 0 To GetItem.Count - 1
            item = item + PrgLang(GetItem(i)).Text + ","
        Next

        Return item.TrimEnd(",")
    End Function
End Class

Imports System.Web.Mvc

Public Class ViewModel

Public Property PrgLang As New List(Of SelectListItem)

Public Property GetItem As New List(Of String)

Sub New()

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

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

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

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

End Sub

Function ViewItem(GetItem As List(Of String)) As String

Dim item As String = Nothing

For i As Integer = 0 To GetItem.Count - 1

item = item + PrgLang(GetItem(i)).Text + ","

Return item.TrimEnd(",")

End Function

End Class

最後に余計なカンマが付加されてしまうので、TrimEnd()メソッドで最後のカンマを削除しています。

コントローラーの作成

今回は、コントローラーを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 List(Of 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 List(Of String)) As ActionResult

vm.GetItem = GetItem

Return View(vm)

End Function

End Class

End Namespace

入力画面用ビューの作成

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

@Html.ListBoxFor(Function(model) model.プロパティ, リストボックス)

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

Microsoft Learn ～ SelectExtensions.ListBoxFor メソッド

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

@Using Html.BeginForm("Result", "Home", FormMethod.Get)
    @<p>@Html.ListBoxFor(Function(model) model.GetItem, Model.PrgLang, New With {.size = "4", .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.ListBoxFor(Function(model) model.GetItem, Model.PrgLang, New With {.size = "4", .style = "width: 200px"})</p>

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

End Using

リストボックスの行数と幅を「New With {.size = "4", .style = "width: 200px"}」で指定します。
これを指定しないと、最も長いアイテムの長さに合わされます。

結果表示用ビューの作成

リストボックスから、何が選択されたかを表示するためのビューを作成します。
コントローラーから渡されたビューモデルのViewItem()メソッドを呼び出して、選択された値を表示します。
渡された値がNothingだった場合は、「未選択」を表示します。

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

<h3>リストボックス</h3>
@code
    If Model.GetItem Is Nothing Then
        @<p>未選択</p>
    Else
        @<p><span class="select-item">@Model.ViewItem(Model.GetItem)</span><span style="margin:5px;">を選択</span></p>
    End If
End Code
<a href="/Home/Input/">戻る</a>

@ModelType ViewModel

@Code

ViewData("Title") = "Result"

End Code

<h3>リストボックス</h3>

@code

If Model.GetItem Is Nothing Then

@<p>未選択</p>

Else

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

End If

End Code

表示レイアウトの編集

ビューを作成すると、自動的に「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」と「Python」を選択しています。

記事一覧

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