ASP.NET(C#) MVCモデル入門～ViewModelの使い方

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 には、プロパティーを定義します。

namespace MvcApp1.Models.ViewModels
{
    public class HomeViewModel
    {
        public string Name { get; set; }
        public string Address { get; set; }
        public DateOnly Birthday { get; set; }
    }
}

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 を渡します。

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);
        }
    }
}

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 を使う際に、フルパスで記述する必要があります。

@using MvcApp1
@using MvcApp1.Models
@using MvcApp1.Models.ViewModels
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@using MvcApp1

@using MvcApp1.Models

@using MvcApp1.Models.ViewModels

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

ビューの編集

ビュー側で ViewModel を受け取るために、ViewModel の型を指定する必要があり、以下のように記述します。

@model ビューモデル名

ビューが受け取った ViewModel は、ビュー内で Modelオブジェクトに紐づけられます。
Model は Razorビューエンジンによって認識されるので、Model の先頭に「@」を付ける必要があります。

Model という名称は固定なので、変更できません。

@model HomeViewModel
@{
    ViewData["Title"] = "Index";
}

<h2>@Model.Name</h2>
<h2>@Model.Address</h2>
<h2>@Model.Birthday</h2>

@model HomeViewModel

ViewData["Title"] = "Index";

}

<h2>@Model.Name</h2>

<h2>@Model.Address</h2>

<h2>@Model.Birthday</h2>

プログラムの実行

プログラムを実行すると、以下のようにコントローラーで設定した値が表示されます。

記事一覧

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