Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

ASP.NET C#

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

投稿日:2021年8月4日 更新日:

 

<目次>

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

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

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

コントローラー(Controller)からビュー(View)に対して複数のモデル(Model)を引き渡したい時の方法についてご紹介します。
 
例えば次の図でモデル(Model)の「TextBook」があり、これをコントローラー(Controller)の「HomeController.cs」経由でビュー(View)の「Index.cshtml」に引き渡すとします。この時、「TextBook」以外にも別のモデルをセットでViewに連携したい、といった状況の解決策です。
 
(図111)

目次にもどる

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

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

目次にもどる

(1-3) ViewModel導入手順

●STEP0:モデル(Model)の準備

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

(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フォルダを作成します。
 
(図132)

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

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

    }
}

 

(図134)

 

●STEP2:コントローラー(Controller)の追記

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

・変更前
(図135)①

・変更後
(図135)②

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

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

 

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

<!-- 方法1 -->
<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>

(図136)

(サンプル)

@model ViewModelTest.ViewModels.TextBookViewModel

<!-- 方法1 -->
<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の中の値を画面に表示できています。
 
(図137)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-ASP.NET, C#

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

C#で文字列の前に付いてるアットマーク「@」について

<目次> (1) C#で文字列の前に付いてるアットマーク「@」について  (1-1) 概要  (1-2) 主な用途  (1-3) 注意点 (1) C#で文字列の前に付いてるアットマーク「@」について …

C#でNLogライブラリを用いてログ出力を行う方法

<目次> (1) C#でNLogライブラリを用いてログ出力を行う方法  (1-1) NLogの概要  (1-2) NLogの導入手順  (1-3) NLogの初期実装手順  (1-4) NLogのサン …

C#のエラー「CS1069~このアセンブリへの参照を追加する事を検討してください」の対処方法+実際のソース例も掲載

<目次> (1) C#のエラー「CS1069~このアセンブリへの参照を追加する事を検討してください」の対処方法  (1-1) 発生状況・エラーメッセージ  (1-2) 原因  (1-3) 対処法 (1 …

C#でファイルの存在チェックを行う方法+サンプルプログラムをご紹介

<目次> (1) C#でファイルの存在チェックを行う方法  (1-1) 構文  (1-2) サンプルプログラム (1) C#でファイルの存在チェックを行う方法 (1-1) 構文 (構文) if (!F …

ASP.NETのRazor入門~Razorとは?や使い方をご紹介

<目次> (1) ASP.NETのRazor入門~Razorとは?や使い方をご紹介  (1-1) Razorとは?  (1-2) 基本構文  (1-3) サンプルプログラム (1) ASP.NETのR …

  • English (United States)
  • 日本語
Top