In last post, we have talked about different approaches to pass the multiple models in single view. We have also looked some of them like Dynamic,View Data and View Bag.

This post is the continuation of previous post. Here we will see the use of ViewModel,Tuple and ViewComponent for passing multiple model in single view . Let's first see what was our problem statement-

Problem Statement

We have two models Student and Course and we need to show the the list of Students and Courses in a single view.

Below are the model definition for Student and Course

public class Student
{
    public int StudentID { get; set; }
    public string StudentName { get; set; }       
}

public class Course
{
    public int CourseID { get; set; }
    public string CourseName { get; set; }
}

Solutions to achieve

Here we will see ViewModel,Tuple and ViewComponent to achieve our requirement

1. View Model

ViewModel is a class which contains the properties which are represented in view or represents the data that we want to display on our view.

If we want to create a View where we want to display list of Students and Courses then we will create our View Model (StudentCourseViewModel.cs).

ViewModel Class

public class StudentCourseViewModel
{
   public List allCourses { get; set; }
   public List allStudents { get; set; }
}

Action Method

public IActionResult UsingViewModel()
{
    ViewBag.Message = "Passing Multiple Model using ViewModel";
    StudentCourseViewModel vm = new StudentCourseViewModel();
    vm.allStudents = Repository.GetStudents();
    vm.allCourses = Repository.GetCourses();
    return View(vm);
}

View Code

@using MVCCustomModelBinding.Models.ViewModels
@model StudentCourseViewModel
@{
    ViewBag.Title = "Home Page";
}
@ViewBag.Message


Student List







                @foreach (var item in Model.allStudents)
            {

                }

Student ID
Student Name
@item.StudentID
@item.StudentName



Course List







                @foreach (var item in Model.allCourses)
            {

                }

Course ID
Course Name
@item.CourseID
@item.CourseName

2. Tuple

A Tuple object is an immutable, fixed-size and ordered sequence object. Each object in tuple is being of a specific type.The .NET framework supports tuples up to seven elements.

Using this tuple object we can pass multiple models from the controller to the view.

Action Method

public IActionResult UsingTuple()
{
    ViewBag.Message = "Passing Multiple Model using Tuple";
    var tupleModel = new Tuple, List>(Repository.GetStudents(), Repository.GetCourses());
    return View(tupleModel);
}

View Code

@using MVCCustomModelBinding.Models
@model Tuple,List>
@{
    ViewBag.Title = "Home Page";
}
@ViewBag.Message


Student List







                @foreach (var item in Model.Item1)
            {

                }

Student ID
Student Name
@item.StudentID
@item.StudentName



Course List







                @foreach (var item in Model.Item2)
            {

                }

Course ID
Course Name
@item.CourseID
@item.CourseName

3. ViewComponent (ASP.NET Core MVC feature)

As part of ASP.NET MVC 6, a new feature called View Components has been introduced. View components are similar to child actions and partials views, allowing you to create reusable components with (or without) logic.

View components are made up of 2 parts: A view component class and a razor view.

To implement the view component class, inherit from the base ViewComponent and implement an Invoke or InvokeAsync method. This class can be anywhere in your project. A common convention is to place them in a ViewComponents folder.

Here we will create the two ViewComponent classes (StudentViewComponent and CourseViewComponent).These classes can be anywhere in your project. A common convention is to place them in a ViewComponents folder.

ViewComponentClass

public class StudentViewComponent : ViewComponent
{
   public IViewComponentResult Invoke()
   {
     return View("ViewStudents", Repository.GetStudents());
   }
}
public class CourseViewComponent : ViewComponent
{
  public IViewComponentResult Invoke()
  {
   return View("ViewCourses", Repository.GetCourses());
  }
}

As you can see that in both the ViewComponets(StudentViewComponent and CourseViewComponent), we are implementing the Invokemethod which are returning a views ViewStudents and ViewCourses respectively.Below are the cshtml code for ViewStudents and ViewCourses respectively.

ViewStudents.cshtml

@using MVCCustomModelBinding.Models
@model List

Student List







                @foreach (var item in Model)
            {

                }

Student ID
Student Name
@item.StudentID
@item.StudentName

ViewCourses.cshtml

@using MVCCustomModelBinding.Models
@model List

Course List







                @foreach (var item in Model)
            {

                }

Course ID
Course Name
@item.CourseID
@item.CourseName

Controller Action Method

public IActionResult UsingViewComponent()
{
   ViewBag.Message = "Passing Multiple Model using ViewComponent";
   return View();
}

View Code

@using MVCCustomModelBinding.Models.ViewModels
@model StudentCourseViewModel
@{
    ViewBag.Title = "Home Page";
}
@ViewBag.Message


@await Component.InvokeAsync("Student")
@await Component.InvokeAsync("Course")

Output