ASP.NET MVC のビューにモデルのリスト形式のオブジェクトを渡す - ASP.NET MVC

ASP.NET MVC のビューにモデルのリスト形式のオブジェクトを渡すコードを紹介します。

概要

こちらの記事ではASP.NETのビューにモデルのオブジェクトを渡すコードを紹介しました。リスト表示をする場合など、モデルのオブジェクトを複数ビューに渡したいことがあり、その場合モデルのリスト型のオブジェクトを渡せるようにしたいことがあります。この記事ではモデルのオブジェクトのリスト型をビューに渡すコードを紹介します。

プログラム例

事前準備

こちらの記事を参照してASP.NET MVC アプリケーションを作成し、コントローラー、モデルを作成し実装します。

モデルのリストを扱うビューの作成

モデルのリスト型を渡されるビューを作成します。

Visual Studio を起動し、作成した ASP.NET MVCのプロジェクトを開きます。

[ソリューションエクスプローラ－]のウィンドウでビューを追加するフォルダを選択し右クリックします。ポップアップメニューが表示されますので、[追加]をクリックしサブメニューの[ビュー]をクリックします。

[Add View]ダイアログが表示されます。

[View name]のテキストボックスに作成するビューの名称を入力します。今回は "ContentesList"としました。[Template]欄は今回はモデルの参照をしますが、作成時点では[Empty (without model)]を選択します。設定ができたらウィンドウ右下の[Add]ボタンをクリックします。

ビューが追加できると、"ContentesList.cshtml"ファイルが作成され、ソリューションエクスプローラーに追加されます。

コントローラーの実装

コントローラーに作成したビュー ContentsList のメソッドを追加します。下記のコードを記述します。

DefaultController.cs

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

namespace AspNetMvcModel.Controllers
{
  public class DefaultController : Controller
  {
    // GET: Default
    public ActionResult Index()
    {
      return View();
    }

    public ActionResult Content()
    {
      Models.MyItem item = new Models.MyItem();
      item.Name = "ペンギン";
      item.Value = 830;
      item.Code = "p-001";

      return View(item);
    }

    public ActionResult ContentsList()
    {
      List<Models.MyItem> ItemList = new List<Models.MyItem>();

      Models.MyItem item = new Models.MyItem();
      item.Name = "キング";
      item.Value = 250;
      item.Code = "PE-001";
      ItemList.Add(item);

      item = new Models.MyItem();
      item.Name = "グレイ";
      item.Value = 140;
      item.Code = "PE-021";
      ItemList.Add(item);
      
      item = new Models.MyItem();
      item.Name = "ジェンツー";
      item.Value = 86;
      item.Code = "PE-031";
      ItemList.Add(item);

      return View(ItemList);
    }
  }
}

解説

今回のプログラムで利用するコードは下記のContentsList()メソッドのみです。メソッド内では、Models.MyItemクラスのリスト List<Models.MyItem> を作成し、要素となるModels.MyItemオブジェクトを3つ作成しリストに追加しています。メソッドのReturn部分でView(ItemList)メソッドを呼び出し、ビューにList<Models.MyItem> オブジェクトを渡しています。

  public ActionResult ContentsList()
  {
    List<Models.MyItem> ItemList = new List<Models.MyItem>();

    Models.MyItem item = new Models.MyItem();
    item.Name = "キング";
    item.Value = 250;
    item.Code = "PE-001";
    ItemList.Add(item);

    item = new Models.MyItem();
    item.Name = "グレイ";
    item.Value = 140;
    item.Code = "PE-021";
    ItemList.Add(item);
      
    item = new Models.MyItem();
    item.Name = "ジェンツー";
    item.Value = 86;
    item.Code = "PE-031";
    ItemList.Add(item);

    return View(ItemList);
  }

ビューの実装

作成した ContentsList.cshtml に下記のコードを記述します。

ContentsList.cshtml

@model IEnumerable<AspNetMvcModel.Models.MyItem>
@{
  Layout = null;
}

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>ContentsList</title>
</head>
<body>
  <div>
    @foreach (var item in Model) {
      @Html.DisplayFor(modelItem => item.Name)<br/>
      @Html.DisplayFor(modelItem => item.Value)<br />
      @Html.DisplayFor(modelItem => item.Code)<br />
      <hr/>
    }
  </div>
</body>
</html>

解説

このビューでは、Models.MyItemのリスト型を扱うため @modelにはIEnumerable型の下記のコードを記述します。

@model IEnumerable<AspNetMvcModel.Models.MyItem>

モデルのデータは複数あるため、foreach 文を利用してループ処理で Models.MyItemのリスト型にアクセスします。下記のコードはModels.MyItemの要素をforeachループによりitemとして取得し、メンバ変数の値をHTMLに出力しています。レコードごとに HRタグの区切り線を表示してレコードの区切りを描画しています。

    @foreach (var item in Model) {
      @Html.DisplayFor(modelItem => item.Name)<br/>
      @Html.DisplayFor(modelItem => item.Value)<br />
      @Html.DisplayFor(modelItem => item.Code)<br />
      <hr/>
    }

実行結果

プロジェクトを実行します。Webブラウザが起動しますので、(ASP.NET MVCアプリケーションのルート)/Default/ContentsList のURLにアクセスします。下図の画面が表示されます。コントローラーで設定したMyItemオブジェクトの情報がビューのページ内に表示できていることが確認できます。