ASP.
NET MVC - Data Model
What is data model in MVC?
Model. The model is the M in MVC. The data model represents the core information that
your application is being used to access and manipulate. The model is the center of
your application, the viewer and controller serve to connect the user with the data model
in a friendly way.
Here, we will discuss about building models in an [Link] MVC Framework
application. A model stores data that is retrieved according to the commands from the
Controller and displayed in the View.
Model is a collection of classes wherein you will be working with data and business
logic. Hence, basically models are business domain-specific containers. It is used to
interact with database. It can also be used to manipulate the data to implement the
business logic.
Let’s take a look at a simple example of Model by creating a new [Link] MVC project.
Step 1 − Open the Visual Studio. Click File → New → Project menu option.
A new Project dialog opens.
Step 2 − From the left pane, select Templates → Visual C# → Web.
Step 3 − In the middle pane, select [Link] Web Application.
Step 4 − Enter the project name ‘MVCSimpleApp’ in the Name field and click Ok to
continue. You will see the following dialog which asks you to set the initial content for
the [Link] project.
Step 5 − To keep things simple, select the Empty option and check the MVC checkbox
in the ‘Add folders and core references for’ section and click Ok.
It will create a basic MVC project with minimal predefined content.
We need to add a controller now.
Step 6 − Right-click on the controller folder in the solution explorer and select Add →
Controller.
It will display the Add Scaffold dialog.
Step 7 − Select the MVC 5 Controller – with read/write actions option. This template will
create an Index method with default action for Controller. This will also list other
methods like Edit/Delete/Create as well.
Step 8 − Click ‘Add’ button and Add Controller dialog will appear.
Step 9 − Set the name to EmployeeController and click the ‘Add’ button.
Step 10 − You will see a new C# file ‘[Link]’ in the Controllers folder,
which is open for editing in Visual Studio with some default actions.
using System;
using [Link];
using [Link];
using [Link];
using [Link];
namespace [Link] {
public class EmployeeController : Controller{
// GET: Employee
public ActionResult Index(){
return View();
}
// GET: Employee/Details/5
public ActionResult Details(int id){
return View();
}
// GET: Employee/Create
public ActionResult Create(){
return View();
}
// POST: Employee/Create
[HttpPost]
public ActionResult Create(FormCollection collection){
try{
// TODO: Add insert logic here
return RedirectToAction("Index");
}catch{
return View();
}
}
// GET: Employee/Edit/5
public ActionResult Edit(int id){
return View();
}
// POST: Employee/Edit/5
[HttpPost]
public ActionResult Edit(int id, FormCollection collection){
try{
// TODO: Add update logic here
return RedirectToAction("Index");
}catch{
return View();
}
}
// GET: Employee/Delete/5
public ActionResult Delete(int id){
return View();
}
// POST: Employee/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection){
try{
// TODO: Add delete logic here
return RedirectToAction("Index");
}catch{
return View();
}
}
}
}
Let’s add a model.
Step 11 − Right-click on the Models folder in the solution explorer and select Add →
Class.
You will see the Add New Item dialog.
Step 12 − Select Class in the middle pan and enter [Link] in the name field.
Step 13 − Add some properties to Employee class using the following code.
using System;
using [Link];
using [Link];
using [Link];
namespace [Link] {
public class Employee{
public int ID { get; set; }
public string Name { get; set; }
public DateTime JoiningDate { get; set; }
public int Age { get; set; }
}
}
Let’s update the [Link] file by adding one more method, which will
return the list of employee.
[NonAction]
public List<Employee> GetEmployeeList(){
return new List<Employee>{
new Employee{
ID = 1,
Name = "Allan",
JoiningDate = [Link]([Link]()),
Age = 23
},
new Employee{
ID = 2,
Name = "Carson",
JoiningDate = [Link]([Link]()),
Age = 45
},
new Employee{
ID = 3,
Name = "Carson",
JoiningDate = [Link]([Link]()),
Age = 37
},
new Employee{
ID = 4,
Name = "Laura",
JoiningDate = [Link]([Link]()),
Age = 26
},
};
}
Step 14 − Update the index action method as shown in the following code.
public ActionResult Index(){
var employees = from e in GetEmployeeList()
orderby [Link]
select e;
return View(employees);
}
Step 15 − Run this application and append /employee to the URL in the browser and
press Enter. You will see the following output.
As seen in the above screenshot, there is an error and this error is actually quite
descriptive which tells us it can't find the Index view.
Step 16 − Hence to add a view, right-click inside the Index action and select Add view.
It will display the Add View dialog and it is going to add the default name.
Step 17 − Select the List from the Template dropdown and Employee in Model class
dropdown and also uncheck the ‘Use a layout page’ checkbox and click ‘Add’ button.
It will add some default code for you in this view.
@model IEnumerable<[Link]>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width" />
<title>Index</title>
</head>
<body>
<p>@[Link]("Create New", "Create")</p>
<table class = "table">
<tr>
<th>
@[Link](model => [Link])
</th>
<th>
@[Link](model => [Link])
</th>
<th>
@[Link](model => [Link])
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@[Link](modelItem => [Link])
</td>
<td>
@[Link](modelItem => [Link])
</td>
<td>
@[Link](modelItem => [Link])
</td>
<td>
@[Link]("Edit", "Edit", new { id = [Link] }) |
@[Link]("Details", "Details", new { id = [Link] }) |
@[Link]("Delete", "Delete", new { id = [Link] })
</td>
</tr>
}
</table>
</body>
</html>
Step 18 − Run this application and you will receive the following output.
A list of employees will be displayed.