Understanding Models In MVC

In this article, you will learn about the 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.

models

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.

table

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

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

Add

Name it as Employee.cs.


class

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.

code
Now, let's add a Controller called EmployeeeController.

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

Controller

Name it as EmployeeController.

EmployeeController

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

Rename it to details.

code

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.

namespace

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

code

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

Employee Class

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.

view

view

Click on Strongly-Typed View.

Typed View

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

project

Now, Add View again.

Add View  

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.

Controller

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

class

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

 table tag

Now, let's add details.

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.

code

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. 

output
Now, just type the Controller name and action method.

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.

error

error

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.

code

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

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

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