ASP.NET(VB.NET) MVCモデル入門～HTMLヘルパー(テキストエリア)

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

今回は、HTMLヘルパーのテキストエリア(TextArea)を使ったサンプルプログラムを作りましょう。
テキストエリアは、以下のようなHTMLの要素で、テキストボックス(TextBox)と違って、複数行入力することができます。

なお、テキストエリア内で改行しても、出力画面では改行されず一行で表示されてしまいます。
この記事では、テキストエリア内で改行した内容を、そのまま改行された状態で出力する方法も解説します。

新規プロジェクトの作成

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

ビューモデルの作成

ビューモデルを作成します。
テキストエリアに入力した値を保持するためのプロパティを、String型で定義します。

Public Class ViewModel
    Public Property TextArea As String
End Class

Public Class ViewModel

Public Property TextArea 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.TextAreaFor()メソッドを使って、テキストエリアを作成します。
Html.TextAreaFor()メソッドの使い方は、以下の通りです。

@Html.TextAreaFor(Function(model) model.プロパティ名, 列数, 行数, 属性)

「Function(model) model.プロパティ」の部分は、ラムダ式といわれるもので、名前のない関数です。
Functionにmodelが渡され、modelの中のプロパティをHtml.TextAreaFor()メソッドに引数として渡しています。
modelの内容は、コントローラーから渡されます。
上記では、Functionの引数をmodelとしていますが、名前はなんでも構いません。
属性にはclass、maxlength、placeholderなどが指定でき、「New With {.class="クラス名"}」のように記述します。
属性を複数指定したい場合は、「New With {.class="crfl1", maxlength="20"」のようにカンマ(,)で区切ります。
属性が必要ない場合は、Nothingを指定します。
詳しくは、以下のマイクロソフトの公式サイトを参照してください。

Microsoft Learn ～ TextAreaExtensions.TextAreaFor メソッド

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

@Using Html.BeginForm("Result", "Home", FormMethod.Post)
    @<p>テキストエリア</p>
    @Html.TextAreaFor(Function(model) model.TextArea, 5, 20, Nothing)
    @<p><input type = "submit" value="送信"></p>
End Using

@ModelType ViewModel

@Code

ViewData("Title") = "Input"

End Code

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

@<p>テキストエリア</p>

@Html.TextAreaFor(Function(model) model.TextArea, 5, 20, Nothing)

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

End Using

結果表示用ビューの作成

テキストエリアに入力された値を表示するためのビューを作成します。
改行なしのパターンと改行ありのパターンを表示します。

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

<h3>テキストエリア(改行なし)</h3>
<p class="crlf1">@Html.DisplayFor(Function(model) model.TextArea)</p>
<h3>テキストエリア(改行あり)</h3>
<p class="crlf2">@Html.DisplayFor(Function(model) model.TextArea)</p>
<a href="/Home/Input/">戻る</a>

@ModelType ViewModel

@Code

ViewData("Title") = "Result"

End Code

<h3>テキストエリア(改行なし)</h3>

<p class="crlf1">@Html.DisplayFor(Function(model) model.TextArea)</p>

<h3>テキストエリア(改行あり)</h3>

<p class="crlf2">@Html.DisplayFor(Function(model) model.TextArea)</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)を、以下のように修正します。
crlf1は改行なしのパターンで、crlf2は改行ありのパターンです。

.crlf1 {
    width: 200px;
    background-color: lime;
}

.crlf2 {
    width: 200px;
    background-color: pink;
    white-space: pre-wrap;
}

.crlf1 {

width: 200px;

background-color: lime;

}

.crlf2 {

width: 200px;

background-color: pink;

white-space: pre-wrap;

}

「white-space: pre-wrap」とすると、空白を改行に変換します。
詳しくは、以下の MDN Web Docs を参照してください。

white-space - CSS: カスケーディングスタイルシート | MDN

プログラムの実行

テキストエリアに値を入力して、「送信」ボタンを押下すると、以下のように表示されます。
改行なしのパターンと改行ありのパターンが表示されます。

記事一覧

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