ASP.NET(VB.NET) MVCモデル入門～HTMLヘルパー(パスワード)

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

今回は、HTMLヘルパーのパスワード(Password)を使ったサンプルプログラムを作りましょう。
パスワードは、以下のようなHTMLの要素で、パスワードを入力させるためのテキストボックスです。
入力された内容をアスタリスク(*)で表示し、パスワードが他人に分からないようにすることができます。
なお、テキストボックス(TextBox)の属性に、「New With {.type="password"}と指定すると、パスワードとして使用することができます。

パスワード

新規プロジェクトの作成

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

ビューモデルの作成

ビューモデルを作成します。
入力したパスワードを保持するためのプロパティを定義します。

Public Class ViewModel
    Public Property Password As String
End Class

Public Class ViewModel

Public Property Password As String

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.PasswordFor()メソッドを使って、パスワード用のテキストボックスを作成します。
Html.PasswordFor()メソッドの使い方は、以下の通りです。

@Html.PasswordFor(Function(model) model.プロパティ名 , 属性)

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

Microsoft Learn ～ InputExtensions.PasswordFor メソッド

また、オプションで属性を指定することができます。
属性は、value、maxlengthなどが指定でき、「New With {.maxlength="20"}」のように記述します。
属性を複数指定したい場合は、「New With {.value="pass1234", maxlength="20"」のようにカンマ(,)で区切ります。
valueに値を設定すると、パスワードがあらかじめテキストボックスに入力された状態で表示されます。

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

@Using Html.BeginForm("Result", "Home", FormMethod.Post)
    @<div class="input">
        <p>@Html.PasswordFor(Function(model) model.Password, New With {.maxlength = "20"})</p>
        <p><input type = "submit" value="送信" /></p>
    </div>
End Using

@ModelType ViewModel

@Code

ViewData("Title") = "Input"

End Code

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

@<div class="input">

<p>@Html.PasswordFor(Function(model) model.Password, New With {.maxlength = "20"})</p>

</div>

End Using

結果表示用ビューの作成

テキストボックスに入力された値を表示するためのビューを作成します。
入力された値を、Html.DisplayFor()メソッドを使って表示します。

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

<h3>パスワード</h3>
<p>@Html.DisplayFor(Function(model) model.Password)</p>
<a href="/Home/Input/">戻る</a>

@ModelType ViewModel

@Code

ViewData("Title") = "Result"

End Code

<h3>パスワード</h3>

<p>@Html.DisplayFor(Function(model) model.Password)</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>

プログラムの実行

テキストボックスにパスワードを入力して、「送信」ボタンを押下します。
入力されたパスワードが、結果表示画面に表示されます。

記事一覧

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