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

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

今回は、HTMLヘルパーのチェックボックス(CheckBox)を使ったサンプルプログラムを作りましょう。
チェックボックスは、以下のようなHTMLの要素で、その項目がオン(True)かオフ(False)かを設定することができます。

新規プロジェクトの作成

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

ビューモデルの作成

ビューモデルを作成します。
チェックボックスの状態(True or False)を保持するためのプロパティを、Boolean型で定義します。
今回は、チェックボックスの項目を2つ作成するため、プロパティも2つ定義します。

Public Class ViewModel
    Public Property CheckBox1 As Boolean
    Public Property CheckBox2 As Boolean
End Class

Public Class ViewModel

Public Property CheckBox1 As Boolean

Public Property CheckBox2 As Boolean

End Class

コントローラーの作成

今回は、コントローラーを1つだけ作成します。
この中に、入力用のビューを呼び出すInput()メソッドと、結果表示用のビューを呼び出すResult()メソッドを作成します。
Result()メソッドには、引数としてチェックボックスの状態を格納したモデルが渡されます。

Imports System.Web.Mvc

Namespace Controllers
    Public Class HomeController
        Inherits Controller

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

        Function Result(vm As ViewModel) As ActionResult
            Return View(vm)
        End Function
    End Class
End Namespace

Imports System.Web.Mvc

Namespace Controllers

Public Class HomeController

Inherits Controller

Function Input() As ActionResult

Return View()

End Function

Function Result(vm As ViewModel) As ActionResult

Return View(vm)

End Function

End Class

End Namespace

入力画面用ビューの作成

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

@Html.CheckBoxFor(Function(model) model.プロパティ名)

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

Microsoft Learn ～ InputExtensions.CheckBoxFor メソッド

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

@Using Html.BeginForm("Result", "Home", FormMethod.Post)
    @<p>
        @Html.CheckBoxFor(Function(model) model.CheckBox1)
        @Html.Label("チェックボックス１", New With {.for = "CheckBox1"})
    </p>
    @<p>
        @Html.CheckBoxFor(Function(model) model.CheckBox2)
        @Html.Label("チェックボックス２", New With {.for = "CheckBox2"})
    </p>
    @<p><input type = "submit" value="送信"></p>
End Using

@ModelType ViewModel

@Code

ViewData("Title") = "Input"

End Code

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

@<p>

@Html.CheckBoxFor(Function(model) model.CheckBox1)

@Html.Label("チェックボックス１", New With {.for = "CheckBox1"})

</p>

@<p>

@Html.CheckBoxFor(Function(model) model.CheckBox2)

@Html.Label("チェックボックス２", New With {.for = "CheckBox2"})

</p>

@<p><input type = "submit" value="送信"></p>

End Using

Html.Label()メソッドで、New With {.for="ID名"}を指定することで、ラベル部分をクリックしてもチェックできるようになります。

結果表示用ビューの作成

チェックボックスがチェックされたかどうかを表示するためのビューを作成します。
チェックボックスの状態と、その横にチェックのありなしをラベルを使って表示します。
チェックボックスがチェックされていれば True、チェックされていなければ False が入っています。

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

<h3>チェックボックス１</h3>
<p>
    @Html.DisplayFor(Function(model) model.CheckBox1)
    @Code
        If Model.CheckBox1 = True Then
            @Html.Label("チェックあり")
        Else
            @Html.Label("チェックなし")
        End If
    End Code
</p>

<h3>チェックボックス２</h3>
<p>
    @Html.DisplayFor(Function(model) model.CheckBox2)
    @Code
        If Model.CheckBox2 = True Then
            @Html.Label("チェックあり")
        Else
            @Html.Label("チェックなし")
        End If
    End Code
</p>
<a href="/Home/Input/">戻る</a>

@ModelType ViewModel

@Code

ViewData("Title") = "Result"

End Code

<h3>チェックボックス１</h3>

<p>

@Html.DisplayFor(Function(model) model.CheckBox1)

@Code

If Model.CheckBox1 = True Then

@Html.Label("チェックあり")

Else

@Html.Label("チェックなし")

End If

End Code

</p>

<h3>チェックボックス２</h3>

<p>

@Html.DisplayFor(Function(model) model.CheckBox2)

@Code

If Model.CheckBox2 = True Then

@Html.Label("チェックあり")

Else

@Html.Label("チェックなし")

End If

End Code

</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>

プログラムの実行

チェックボックスを2つ用意しているので、片方はチェックをして、もう片方はチェックをしないで、「送信」ボタンを押下します。

チェックボックスの入力結果は、以下のように表示されます。
チェックボックスをHtml.DisplayFor()メソッドで呼び出すと、入力不可状態のチェックボックスが表示されます。

記事一覧

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