ASP.NET(VB.NET) MVCモデル入門～入力値をViewModelで受け取り画面に表示

入力項目を作成してViewModelで値を受け取り画面に表示する

今回は、前回のプログラムに新しく入力用のビューを追加して、入力した値を画面に表示してみましょう。
値を入力するボックスの作成には、HTMLヘルパーを使います。

コントローラーに入力用メソッドを追加

HomeControllerに、入力用ビューを呼び出すメソッド(Input())を追加します。
Input()メソッド側では、ViewModelをインスタンス化する必要はありません。
そのままInputビューを呼び出します。

Imports System.Web.Mvc

Namespace Controllers
    Public Class HomeController
        Inherits Controller

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

        Function Index(vm As HomeViewModel) 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 Index(vm As HomeViewModel) As ActionResult

Return View(vm)

End Function

End Class

End Namespace

入力用ビューの作成

入力項目を配置するビュー(Input.vbhtml)を作成します。
先頭行の@ModelTypeでHomeViewModelを指定して、HTMLヘルパーのHtml.TextBoxFor()で入力した値を格納します。
テキストボックスには、Html.TextBoxFor()以外にもHtml.TextBox()というメソッドがありますが、渡されたモデルに関連付けたい場合は、Html.XxxYyyFor()のようにForが付いたメソッドを使用します。
また、Formタグを作成するHtml.BeginForm()メソッドは、@Usingブロックと共に使います。
属性の指定の仕方は、「New With {.属性A = xx, .属性B = yy}」のようにします。

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

@Using Html.BeginForm("Index", "Home", FormMethod.Post)
    @<div class="container">
        <div class="label">
            <p class="label">@Html.LabelFor(Function(model) model.Name)</p>
            <p class="label">@Html.LabelFor(Function(model) model.Address)</p>
            <p class="label">@Html.LabelFor(Function(model) model.Birthday)</p>
        </div>
        <div class="input">
            <p>@Html.TextBoxFor(Function(model) model.Name, New With {.size = 20})</p>
            <p>@Html.TextBoxFor(Function(model) model.Address, New With {.size = 50})</p>
            <p>@Html.TextBoxFor(Function(model) model.Birthday, New With {.type = "date"})</p>
            <input type="submit" value="送信" />
        </div>
    </div>
End Using

@ModelType HomeViewModel

@Code

ViewData("Title") = "Input"

End Code

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

@<div class="container">

<p class="label">@Html.LabelFor(Function(model) model.Name)</p>

<p class="label">@Html.LabelFor(Function(model) model.Address)</p>

<p class="label">@Html.LabelFor(Function(model) model.Birthday)</p>

</div>

<p>@Html.TextBoxFor(Function(model) model.Name, New With {.size = 20})</p>

<p>@Html.TextBoxFor(Function(model) model.Address, New With {.size = 50})</p>

<p>@Html.TextBoxFor(Function(model) model.Birthday, New With {.type = "date"})</p>

</div>

End Using

このビューでは、スタイルシートを使って、ラベルと入力項目を揃えるようにしています。

body {
    background-color: yellow;
    margin: 0;
    padding: 0;
}

h2 {
    margin: 20px;
}

div.container {
    width: 50%;
    height: 300px;
    margin: 5% auto;
}

div.label {
    width: 30%;
    float: left;
    text-align: right;
}

div.input {
    width: 70%;
    float: left;
}

p.label {
    padding: 0 10px 0 0;
}

body {

background-color: yellow;

margin: 0;

padding: 0;

}

h2 {

margin: 20px;

}

div.container {

width: 50%;

height: 300px;

margin: 5% auto;

}

div.label {

width: 30%;

float: left;

text-align: right;

}

div.input {

width: 70%;

float: left;

}

p.label {

padding: 0 10px 0 0;

}

プログラムの実行

入力画面が最初に表示されるように、RouteConfig.vbのdefaultsを以下のように変更します。

defaults:=New With {.controller = "Home", .action = "Input", .id = UrlParameter.Optional}

1	defaults:=New With {.controller = "Home", .action = "Input", .id = UrlParameter.Optional}

プログラムを実行すると、最初に入力画面が表示されます。

入力項目に、適当な値を入力して、「送信」ボタンを押下します。

入力された値が、画面に表示されます。

記事一覧

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