22
25

More than 5 years have passed since last update.

Controllerから複数のModelをViewに渡す

Last updated at Posted at 2018-08-30

概要

Controllerから複数のModelをViewに渡して、表示します。
この例では、2つのModel(EmployeeとMachine)を表示します。

出力画面

image.png

初期状態からの追加・編集部分

image.png

Employee.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;

namespace WebApplication1.Models
{
    public class Employee
    {
        public int Id { get; set; }
        [DisplayName("Name")]
        public string Name { get; set; }
        [DisplayName("Address")]
        public string Address { get; set; }
        [DisplayName("Birthday")]
        public DateTime Birthday { get; set; }
    }
}
Machine.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;

namespace WebApplication1.Models
{
    public class Machine
    {
        public int Id { get; set; }
        [DisplayName("Name")]
        public string Name { get; set; }
        [DisplayName("Manufacturer")]
        public string Manufacturer { get; set; }
        [DisplayName("Beginning of use")]
        public DateTime UseStartDate { get; set; }
    }
}
HomeViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using WebApplication1.Models;

namespace WebApplication1.Models
{
    public class HomeViewModel
    {
        public IEnumerable<Employee> Employees { get; set; }
        public IEnumerable<Machine> Machines { get; set; }
    }
}
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            HomeViewModel myView = new HomeViewModel();
            myView.Employees = GetEmployee();
            myView.Machines = GetMachines();
            return View(myView);
        }
        private List<Employee> GetEmployee()
        {
            List<Employee> employees = new List<Employee>();
            employees.Add(new Employee { Id = 1, Name = "Alex", Address = "NewYork", Birthday = new DateTime(1985, 1, 1) });
            employees.Add(new Employee { Id = 2, Name = "Ben", Address = "London", Birthday = new DateTime(1989, 6, 13) });
            employees.Add(new Employee { Id = 3, Name = "Chris", Address = "Tokyo", Birthday = new DateTime(1993, 11, 14) });
            return employees;
        }
        private List<Machine> GetMachines()
        {
            List<Machine> machines = new List<Machine>();
            machines.Add(new Machine { Id = 1, Name = "My favorite machine", Manufacturer = "Constructor Inc", UseStartDate = new DateTime(1978, 8, 19) });
            return machines;
        }
    }
}
Index.cshtml
@model WebApplication1.Models.HomeViewModel
@{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <div class="col-md-6">
        <table class="table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Employees.First().Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Employees.First().Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Employees.First().Address)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Employees.First().Birthday)
                </th>
            </tr>
            @foreach (var item in Model.Employees)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Address)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Birthday)
                    </td>
                </tr>
            }
        </table>
    </div>
    <div class="col-md-6">
        <table class="table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Machines.First().Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Machines.First().Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Machines.First().Manufacturer)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Machines.First().UseStartDate)
                </th>
            </tr>
            @foreach (var item in Model.Machines)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Manufacturer)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.UseStartDate)
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

参考

下記の記事で複数のModelをViewに渡す方法が6通り紹介されていました。
Multiple Models in Single View in MVC

その上で、この記事の投稿者は

Which if these would be considered best practice?

という問いかけに対して

My choice is always ViewModel

と回答していたので、この方法を採用しました。

22
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
25