ViewModelを使ってビューにオブジェクトを渡す
コントローラーからビューに値を渡す方法として、ViewData や TempData がありますが、これらは一つのパラメーターしか渡すことができません。
複数のパラメーターをビューに渡すには、ViewModel を使います。
今回の記事では、ViewModel の作成手順と使い方を解説します。
ViewModelの作成
ViewModelは、クラスとして定義します。
一般的に「Models」フォルダーの配下に ViewModel を配置しますが、今回は「Models」フォルダーの配下に「ViewModels」というフォルダーを作成して、そこに ViewModel を配置します。
必ずこうしなければならないということはありませんが、「Models」フォルダーの配下は、ViewModel 以外のクラスも作成する可能性があるため、ViewModel 用のフォルダーを作成しています。
ViewModelを配置するフォルダーを作成
ソリューションエクスプローラーから Models フォルダーにカーソルを合わせます。
右クリックして、「追加」→「新しいフォルダー」を選択します。
フォルダー名を「ViewModels」に変更します。
ViewModelsフォルダー配下にViewModelを作成
「ViewModels」フォルダーにカーソルを合わせて、右クリックから「追加」→「クラス」を選択します。
「クラス」を選択して、ファイル名を「HomeViewModel.cs」に変更後、「追加」ボタンを押下します。
「Models/ViewModels」フォルダー配下に、「HomeViewModel.cs」が作成されていることを確認します。
ViewModelの編集
作成した ViewModel.csをダブルクリックして、以下のように編集します。
ViewModel には、プロパティーを定義します。
|
1 2 3 4 5 6 7 8 9 |
namespace MvcApp1.Models.ViewModels { public class HomeViewModel { public string Name { get; set; } public string Address { get; set; } public DateOnly Birthday { get; set; } } } |
コントローラーの編集
ViewModel を作成したら、コントローラーで ViewModel が使えるように、インスタンス化して値を設定します。
View()メソッドの引数として、インスタンス化した ViewModel を渡します。
|
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 Index() { var vm = new HomeViewModel(); vm.Name = "山田太郎"; vm.Address = "東京都"; vm.Birthday = DateOnly.Parse("2000/8/31"); return View(vm); } } } |
_ViewImports.cshtmlにViewModelを配置したパスを追加
Models 配下に ViewModels というフォルダーを作成したので、「_ViewImports.cshtml」に ViewModels フォルダーのパスを追加します。
このパスを追加しない場合、ビュー側で ViewModel を使う際に、フルパスで記述する必要があります。
|
1 2 3 4 |
@using MvcApp1 @using MvcApp1.Models @using MvcApp1.Models.ViewModels @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers |
ビューの編集
ビュー側で ViewModel を受け取るために、ViewModel の型を指定する必要があり、以下のように記述します。
@model ビューモデル名
ビューが受け取った ViewModel は、ビュー内で Modelオブジェクトに紐づけられます。
Model は Razorビューエンジンによって認識されるので、Model の先頭に「@」を付ける必要があります。
Model という名称は固定なので、変更できません。
|
1 2 3 4 5 6 7 8 |
@model HomeViewModel @{ ViewData["Title"] = "Index"; } <h2>@Model.Name</h2> <h2>@Model.Address</h2> <h2>@Model.Birthday</h2> |
プログラムの実行
プログラムを実行すると、以下のようにコントローラーで設定した値が表示されます。
