Understanding Models In MVC

Overview

In earlier parts, we learned about ViewBag and ViewData. In this article, we will learn about models. I will explain how model works, with a simple example showing employee details. Here, we will be passing those details in the controller and pass those values to views. Let's start.

Introduction

Before starting, we will just give an idea of how models work in MVC.



NOTE

Controller responds to URL request, gets data from model and pass it on to View. The View renders data. Here Models can be entities or Business Objects.

I have data which has EmpId, EmpName, EmpAddress and their salaries. All I want is to display that data.



We will add a Model Class as Employee.cs in Model Folder.

Just right click on The Model Folder->Add->Class.



Name it as Employee.cs.

When a cs file gets opened, write the following code. As we want to display various details of Employee, we will be using get set method to access those.


Now, let's add a Controller called EmployeeeController.

So, right click on Controller Folder ->Add->Controller->Employee Controller



Name it as EmployeeController.



Now, look at the code. It creates a class called EmployeeController and Action by default is set to Index.

Rename it to details.



Now, we need to use employee class; so, add name space in the controller file. Now, where is our Employee class located? It's in Model Folder, and we want to use that in our controller, so we need to add namespace.



By this, we will be able to use employee class. Now, we will hard code the details,



As you can see, we are now able to use Employee Class. So, let's hard code the values



As you can see, as soon as I started typing Emp it got shown.

Now, I need to pass these data values to View and View will render this data and will display it. So, let's add View.

Just, click on the Action controller and add view.

We will be using Strongly Typed View here. So let's see.





Click on Strongly-Typed View.



As you can see, we don’t get what we were looking for EmployeeController. So,  build the project.



Now, Add View again.

 

Now that we get Employee, select that and click Add.

Now, look at the View. It adds a Folder called Employee inside our View Name, Employee being our Controller Name.



Look at the details page - It inherits properties from Models i.e from your employee class.



We want to display details in table, so I took it in table tag.



Now, let's add details.



As you can see in the above screenshot, I have written in another td to fetch data. Now, Model.EmpId, the intellisense, will show you a dropdown.



Now, let's run the application and see what output we get. When you run the URl, it does not have controller name and action method. We need to specify those. 


Now, just type the Controller name and action method.



When you type the URL i.e Controller name and action method, it's throwing an error as null pointer exception .

Why ??

Because, it is giving error on EmpId on Model, whichmeans we are not getting data from controller. This is why we are getting NULL as EmpId. Let's switch back to our controller and see.





As you can see in our controller code, we haven’t passed employee on our return view. That's why we are getting null pointer exception error.



So, let's pass that. So, our final code is-


Now, let's run the application and type controller name and action method.


We got the expected output. This was how the  models work in MVC.