入力項目を作成してViewModelで値を受け取り画面に表示する
今回は、前回作成したプログラムに新しく入力用のビューを追加して、テキストボックスに入力した値を画面に表示してみましょう。
コントローラーに入力用メソッドを追加
HomeController.cs に、入力用ビューを呼び出すメソッド「Input()」を追加します。
Input()メソッド側では、ViewModel をインスタンス化する必要はありません。
そのまま Inputビューを呼び出します。
また、入力用ビューから Index()メソッドに HomeViewModel が渡されますので、そのまま Indexビューに HomeViewModel を渡します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
using Microsoft.AspNetCore.Mvc; using MvcApp1.Models.ViewModels; namespace MvcApp1.Controllers { public class HomeController : Controller { public IActionResult Input() { return View(); } public IActionResult Index(HomeViewModel vm) { return View(vm); } } } |
入力用ビューの作成
入力項目を配置するビュー(Input.cshtml)を作成します。
1行目でビューモデルの型を指定して、HTMLヘルパーの Html.TextBoxFor()メソッドで入力してた値を格納します。
テキストボックスには、Html.TextBoxFor()メソッド以外にも Html.TextBox()メソッドがありますが、渡されたモデルに関連付けたい場合は、Html.〇〇For()のように「For」が付いたメソッドを使用します。
Html.TextBoxFor()メソッドの詳しい内容は、以下のマイクロソフト公式サイトを参照してください。
また、Formタグを作成する Html.BeginForm()メソッドは、以下のように @usingブロックと共に使います。
@using (Html.BeginForm("メソッド名", "コントローラー名", Formメソッド)) { Formの内容 }
第3引数の「Formメソッド」は、以下のように GET か POST を指定します。
FormMethod.Get
または
FormMethod.Post
Html.BeginFrom()メソッドの詳しい内容は、以下のマイクロソフト公式サイトを参照してください。
ここでは、Form の宛先を Homeコントローラーの Index()メソッドにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@model HomeViewModel @{ ViewData["Title"] = "Input"; } @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { <p>@Html.LabelFor(model => model.Name)：@Html.TextBoxFor(model => model.Name)</p> <p>@Html.LabelFor(model => model.Address)：@Html.TextBoxFor(model => model.Address)</p> <p>@Html.LabelFor(model=> model.Birthday)：@Html.TextBoxFor(model => model.Birthday, new { type = "date" })</p> <p><input type="submit" value=" 送 信 " /></p> } |
このビューでは、Pタグにマージンを設定して、行間を少し開けています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { background-color: yellow; margin: 0; padding: 0; } h2 { margin: 20px; } p { margin: 20px; } |
プログラムの実行
プログラム起動時に、入力用ビューが最初に表示されるように、「Program.cs」を以下のように修正します。
|
1 2 3 4 5 6 7 |
～ 省略 ～ app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Input}/{id?}"); app.Run(); |
プログラムを実行すると、最初に入力画面が表示されます。
入力項目に以下の値を入力して、「送信」ボタンを押下します。
入力された値が、画面に表示されます。
