Multiple Models In Single View Using Entity Framework

If you are new to MVC, please refer to the following links of my previous articles covering the basic concepts of MVC.

• ASP.NET MVC Notes - Part One
• ASP.NET MVC Notes - Part Two

In many forms/pages, often, we are required to send the data from two tables onto one page. We will achieve the task with a real-world example.

Task Description

In this task, we will display the details of a particular student in a Master Detail format.

First, we'll fetch the student's details, then fetch the student's exam data. We are going to use Entity Framework - Code First approach.

This task can be called Master Detail View because the master is student's detail and the detail is student's exam marks detail.

The Student Result table will display the following details.

Student Detail Table

1. GR No.
2. Student Name
3. Class
4. Batch
5. Date of Birth

Student Result Table

1. StudentResultID
2. StudentID
3. Subject
4. Exam Mark
5. Obtained Mark
6. Remarks

Step by Step Implementation

First, create a project called “StudentResult-EF”.

 

 

 

In the above dialog box, select MVC and change the authentication from "Individual User Accounts" to "No Authentication". Click the OK button.

 

Your Solution Explorer will look like the following.

 

First, create a table structure called “tblStudents”.

Create Table tblStudents(
StudentID int primary key identity(1,1) ,
StudentName varchar(100) null,
GRNO varchar(50) null,
Class varchar(50) null,
Batch varchar(50) null,
DOB varchar(50) null
)

Create a table structure called “tblStudentResults”.

Create Table tblStudentResults(
StudentResultID int primary key identity(1,1) ,
StudentID int null,
SubjectTitle varchar(50) null,
ExamMark int null,
ObtainedMark int null,
Remarks varchar(100) null
)

Add sample records to tblStudents.

insert into tblStudents (StudentName,GRNO,Class,Batch,DOB) values('Ganesh Bansal','101','10th','A','2018-12-10')
insert into tblStudents (StudentName,GRNO,Class,Batch,DOB) values('Ashish Kalla','102','10th','A','2010-12-10')
insert into tblStudents (StudentName,GRNO,Class,Batch,DOB) values('Suhana Kalla','103','10th','A','2011-12-10')
insert into tblStudents (StudentName,GRNO,Class,Batch,DOB) values('Rajesh Bohra','104','10th','A','2017-12-10')

Add sample records to tblStudentResults.

insert into tblStudentResults
(StudentID,SubjectTitle,ExamMark,ObtainedMark,Remarks)
values(1,'Maths',100,55,'Pass')

insert into tblStudentResults
(StudentID,SubjectTitle,ExamMark,ObtainedMark,Remarks)
values(1,'Science',100,70,'Pass')

insert into tblStudentResults
(StudentID,SubjectTitle,ExamMark,ObtainedMark,Remarks)
values(1,'Hindi',100,38,'Pass')

insert into tblStudentResults
(StudentID,SubjectTitle,ExamMark,ObtainedMark,Remarks)
values(1,'Marathi',100,40,'Pass')

As we are going to use Entity Framework - Code First approach, switch to Visual Studio and right-click on Models folder to add an ADO.NET Entity Data Model item.

 

The below image shows the process of inserting ADO.NET Entity data model from the Data tab. Let us name it as “StudentModel”.

 

In the following dialog box, select "Code First from database".

 

In the following screenshot, given is the explanation.

1. You have to check and get your existing connection.
2. If there is no desired or existing connection, then you have to click the option number 2.

Here, set or establish your connection.

 

I had clicked on the number 2 choice of the button.

 

I have filled the above form with the following choices.

 

After filling the form as above, you will get the following screenshot.

 

In number 1, I have given a Connection String named “StudentDbContext”.

 

As you clicked on the FINISH button, you can see the left bottom side status message “Adding EntityFrameWork 6.1.3" because the Entity Framework was not already added to this project.

 

Now, switch to the Solution Explorer. You can see the models have been added to your Models folder.

 

As of now, our basic model was created successfully. Now, it's time to create a ViewModel. Why we used ViewModel is because it will display data of both the tables together.

Again, right-click the model on Solution Explorer to create a ViewModel called “ResultViewModel”.

 

Update the following code in the ViewModel file called “ResultViewModel.cs”.

Code of ResultViewModel.cs

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

namespace StudentResult_EF.Models
{
    public class ResultViewModel
    {
//Student Detail Model
        public tblStudent _studentDetail { get; set; }

        //Student Exam Result List Model
        public List<tblStudentResult> _studentResult { get; set; }
    }
}

In the above ResultViewModel.cs code, you can see we have joined two models in one. This is only for viewing purpose; that's why it is called ViewModel.

Switch back to the Solution Explorer to add a new Controller called “StudentResult”.

 

 

 

 

Now, double-click on StudentController and create a result ActionMethod.

[HttpGet]
public ActionResult result(Int32? id)
{
    //create object of ADO.Net Entity Data Model Code First
    var db = new StudentModel();

    //Get Student detail as per student ID
    var student = (from a in db.tblStudents
                   where a.StudentID == id
                   select a).FirstOrDefault();

    //Get Result Exam marks detail as per student ID
    var result = (from a in db.tblStudentResults
                  where a.StudentID == id
                  select a).ToList();

    //Output set to ViewModel
    var model = new ResultViewModel { _studentDetail = student, _studentResult = result};

    return View(model);
}

Right-click on the Controller and select "Add View…".

 

In the following screenshot, I have selected the following things.

1. View Name : result (a result.cshtml file will be created).
2. Template: Details (the type of template to create.)
3. Model Class: Result
   
   

View code : result.cshtml

@model StudentResult_EF.Models.ResultViewModel

@{
    ViewBag.Title = "Student Result";
}

<style>
    table, th, td {
  border: 1px solid black;
}
</style>
<h3>Student Result</h3>

<div>
    <b>Student Detail</b>
      <table>
        <tr>
            <td>
                Student Name<br />
                <b>@Model._studentDetail.StudentName</b>
            </td>
            <td>
                GR No.<br />
                <b>@Model._studentDetail.GRNO</b>
            </td>
            <td>
                Class / Batch<br />
                <b>@Model._studentDetail.Class/@Model._studentDetail.Batch</b>
            </td>
            <td>
                Date of Birth<br />
                <b>@Model._studentDetail.DOB</b>
            </td>
        </tr>
    </table>
    <br />
    <table>
        <tr>
            <td>
                <b>Subject</b>
            </td>
            <td>
                <b>Marks</b>
            </td>
            <td>
                <b>Obtained</b>
            </td>
            <td>
                <b>Remarks</b>
            </td>
        </tr>

        @foreach (var item in Model._studentResult)
        {
        <tr>
            <td>
                @item.SubjectTitle
            </td>
            <td>
                @item.ExamMark
            </td>
            <td>
                @item.ObtainedMark
            </td>
            <td>
                @item.Remarks
            </td>
        </tr>
        }
    </table>

</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
    @Html.ActionLink("Back to List", "Index")
</p>

Output