ASP.NETでビュー（View）に複数のモデル（Model）を連携する方法

投稿日：2021年8月4日更新日：2021年8月5日

＜目次＞

(１) ASP.NETでビュー（View）に複数のモデル（Model）を連携する方法
　 (１-１) やりたい事の整理
　 (１-２) ViewModelを使った複数モデルの連携
　 (１-３) ViewModel導入手順

(１) ASP.NETでビュー（View）に複数のモデル（Model）を連携する方法

(１-１) やりたい事の整理

コントローラー（Controller）からビュー（View）に対して複数のモデル（Model）を引き渡したい時の方法についてご紹介します。

例えば次の図でモデル（Model）の「TextBook」があり、これをコントローラー（Controller）の「HomeController.cs」経由でビュー（View）の「Index.cshtml」に引き渡すとします。この時、「TextBook」以外にも別のモデルをセットでViewに連携したい、といった状況の解決策です。

（図１１１）

＞目次にもどる

(１-２) ViewModelを使った複数モデルの連携

複数のモデルを連携するためには、「ViewModel」を使用します。ViewModelは特定のViewに特化したモデルです。ViewModelは実態はModelクラスと同じ普通のC#のモジュールですが、Modelとは区別して「ViewModel」という専用のフォルダを作ってそこに格納します。

（図１２１）イメージ

＞目次にもどる

(１-３) ViewModel導入手順

●STEP0：モデル（Model）の準備

・Viewに連携したい複数のモデルを準備します。次の例ではSchool（学校）とTextBook（教科書）の２つを用意しています。

（図１３１）

（School）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ViewModelTest.Models
{
    public class School
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

（TextBook）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ViewModelTest.Models
{
    public class TextBook
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

●STEP1：ViewModelの作成

・プロジェクトを右クリック⇒「追加」⇒「新しいフォルダ」でViewModelsフォルダを作成します。

（図１３２）

・プロジェクトを右クリック⇒「追加」⇒「新しい項目」でViewModelとなる新しいクラスを追加します。名前は「xxxxViewModel」（xxxxは任意の名前）で追加します。

（図１３３）

・ViewModelのコードを記述

（サンプル）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ViewModelTest.Models;

namespace ViewModelTest.ViewModels
{
    public class TextBookViewModel
    {
        public TextBook TextBook { get; set; }
        public List Schools { get; set; }

    }
}

（図１３４）

●STEP2：コントローラー（Controller）の追記

コントローラー（Controller）では、ビュー（View）に引き渡す値として、元々のモデル「TextBook」ではなく、今回用意したViewModelである「TextBookViewModel」を連携するように変更します。

・変更前
（図１３５）①

・変更後
（図１３５）②

（サンプル）※変更・修正した箇所は「# 変更」や「# 追記」と書いています。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ViewModelTest.Models;
using ViewModelTest.ViewModels;

namespace BookLibrarySystem.Controllers
{
    public class HomeController : Controller
    {
        // GET: TextBooks/Trend
        public ActionResult Index()
        {
            var textbook1 = new TextBook() { Name = "理科" };

            //# 追記
            var schools = new List<School>
            {
                new School {Name = "School-1"},
                new School {Name = "School-2"},
                new School {Name = "School-3"}
            };

            //# 追記
            var viewModel = new TextBookViewModel
            {              
                TextBook = textbook1,
                Schools = schools
            };

            //# 修正：引数を変更
            return View(viewModel);
        }
    }
}

●STEP3：ビュー（View）の追記

最後にViewModelを受け取るView側の追記を行います。

・Viewで使用するモデル（Model）を今回作成した「TextBookViewModel」に変更します。

@model ViewModelTest.ViewModels.TextBookViewModel

・また、次の記述でモデル内のデータにアクセスします。

<!-- 方法１ -->
<h2>教科書名：@Model.TextBook.Name</h2>
<h2>学校名1：@Model.Schools[0].Name</h2>
<h2>学校名2：@Model.Schools[1].Name</h2>
<h2>学校名3：@Model.Schools[2].Name</h2>

（図１３６）

（サンプル）

@model ViewModelTest.ViewModels.TextBookViewModel

<!-- 方法１ -->
<h2>教科書名：@Model.TextBook.Name</h2>
<h2>学校名1：@Model.Schools[0].Name</h2>
<h2>学校名2：@Model.Schools[1].Name</h2>
<h2>学校名3：@Model.Schools[2].Name</h2>

@{
    ViewBag.Title = "Home Index";
}

<div class="jumbotron">
    <h3>本文</h3>
    <p class="lead">あああああああ</p>
</div>

●STEP4：結果確認

上記を実行すると次のように、Controllerから連携されたViewModelの中の値を画面に表示できています。

（図１３７）

＞目次にもどる