Tuesday, July 25, 2017

ASP.Net MVC - Multiple Models in Single View - Part1

In MVC we cannot use multiple model tag on a view. But Many times we need to pass multiple models from controller to view or we want to show data from multiple model on a view. So In this post we will see the different ways to bind or pass the multiple models to single view.

Problem Statement

Lets suppose 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; }
}

Below is the Repository class which have two method for returning the list of Students and Courses
public class Repository
{
    public static List<student> GetStudents()
    {
          return new List<student>{ new Student() { StudentID = 1, StudentName = "Manish" },
                 new Student() { StudentID = 2, StudentName = "Prashant" },
                 new Student() { StudentID = 3, StudentName = "Deepak" }
                 };
     }
     public static List<course> GetCourses()
     {
          return new List<course> {
                 new Course () {  CourseID = 1, CourseName = "Chemistry"},
                 new Course () {  CourseID = 2, CourseName = "Physics"},
                 new Course () {  CourseID = 3, CourseName = "Math" },
                 new Course () {  CourseID = 4, CourseName = "Computer Science" }
                 };
     }
}

Output

Output of all approaches will be similar to the screenshot shown below:
multiplemodel-asp-mvc

Solutions to achieve

There are many ways of using multiple models in a view, most frequently used are given below:
  • Dynamic
  • ViewData
  • ViewBag
  • ViewModel
  • Tuple
  • ViewComponent(ASP.NET Core MVC feature)

Let's see all the approaches one by one with example-

1. Dynamic

The ExpandoObject class enables us to add and delete members at run time.So If we want to build up an object to work with on the fly at runtime then we can use Expando Object.Let's see how can we use ExpandoObject with Multiple Models.

Action Method

public IActionResult UsingDynamic()
 {
    ViewBag.Message = "Passing Multiple Model using dynamic Model";
    dynamic mymodel = new System.Dynamic.ExpandoObject();
    mymodel.Students = Repository.GetStudents();
    mymodel.Courses = Repository.GetCourses();
    return View(mymodel);
}
In our View, we can define our model as dynamic (not a strongly typed model) using the @model dynamic keyword.

View Code

@using MVCCustomModelBinding
@model dynamic
@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

<h3>Student List</h3>

<div class="row">
    <div class="col-lg-6">
        <table class="table table-responsive table-bordered">
            <thead><tr><th align="center">Student ID</th><th align="center">Student Name</th></tr></thead>
            <tbody>
                @foreach (var item in Model.Students)
            {
                    <tr><td>@item.StudentID</td><td>@item.StudentName</td></tr>
                }
            </tbody>
        </table>
    </div>
</div>
<h3>Course List</h3>

<div class="row">
    <div class="col-lg-6">
        <table class="table table-responsive table-bordered">
            <thead><tr><th align="center">Course ID</th><th align="center">Course Name</th></tr></thead>
            <tbody>
                @foreach (var item in Model.Courses)
            {
                    <tr><td>@item.CourseID</td><td>@item.CourseName</td></tr>
                }
            </tbody>
        </table>
    </div>
</div>

2. View Data

ViewData is used to transfer data from the controller to the view. ViewData is a dictionary object that may be accessible using a string as the key. Using ViewData, we can pass any object from the controller to the view..View Data needs typecasting for getting data.
To use the ViewData for multiple models change your action method as below-

Action Method

public IActionResult UsingViewData()
{
    ViewBag.Message = "Passing Multiple Model using ViewData";
    ViewData["Students"] = Repository.GetStudents();
    ViewData["Courses"] = Repository.GetCourses();
    return View();
}

View Code

@using MVCCustomModelBinding.Models
@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

<h3>Student List</h3>

<div class="row">
    <div class="col-lg-6">
        <table class="table table-responsive table-bordered">
            <thead><tr><th align="center">Student ID</th><th align="center">Student Name</th></tr></thead>
            <tbody>
                @foreach (var item in ViewData["Students"] as List<Student>)
            {
                    <tr><td>@item.StudentID</td><td>@item.StudentName</td></tr>
                }
            </tbody>
        </table>
    </div>
</div>
<h3>Course List</h3>

<div class="row">
    <div class="col-lg-6">
        <table class="table table-responsive table-bordered">
            <thead><tr><th align="center">Course ID</th><th align="center">Course Name</th></tr></thead>
            <tbody>
                @foreach (var item in ViewData["Courses"] as List<Course>)
            {
                    <tr><td>@item.CourseID</td><td>@item.CourseName</td></tr>
                }
            </tbody>
        </table>
    </div>
</div>

3. ViewBag

ViewBag is similar to ViewData and is also used to transfer data from the controller to the view. ViewBag is a dynamic property. ViewBag is just a wrapper around the ViewData.

Action Method

public IActionResult UsingViewBag()
 {
      ViewBag.Message = "Passing Multiple Model using ViewBag";            
      ViewBag.Students = Repository.GetStudents();
      ViewBag.Courses = Repository.GetCourses();
       return View();
 }

View Code

@using MVCCustomModelBinding.Models
@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

<h3>Student List</h3>

<div class="row">
    <div class="col-lg-6">
        <table class="table table-responsive table-bordered">
            <thead><tr><th align="center">Student ID</th><th align="center">Student Name</th></tr></thead>
            <tbody>
                @foreach (var item in ViewBag.Students)
            {
                    <tr><td>@item.StudentID</td><td>@item.StudentName</td></tr>
                }
            </tbody>
        </table>
    </div>
</div>
<h3>Course List</h3>

<div class="row">
    <div class="col-lg-6">
        <table class="table table-responsive table-bordered">
            <thead><tr><th align="center">Course ID</th><th align="center">Course Name</th></tr></thead>
            <tbody>
                @foreach (var item in ViewBag.Courses)
            {
                    <tr><td>@item.CourseID</td><td>@item.CourseName</td></tr>
                }
            </tbody>
        </table>
    </div>
</div>
In next post we will see how we can pass the multiple models using ViewModel,ViewComponent and Tuple.
I hope this will be helpful for you. Happy Coding!!

No comments:

Post a Comment

If You Enjoyed This Post Please Take 5 Seconds To Share It.

^ Scroll to Top hgpromo