In the previous ASP.NET MVC lab we saw how we can pass data from controller to the view. So now the next step is to create a simple model and see all the 3 ASP.NET MVC entities (i.e. model, view and controller) in action.
How to create a simple model in ASP.NET MVC and display the same? (Tutorial No: 3)
Contents
Introduction
Lab 3:- Creating a simple model using ASP.NET MVC
Video demonstration for Lab 3
Step1:- Create a simple class file
Step2:- Define the controller with action
Step3:- Create strongly typed view using the class
Step 4 :- Run your application
So what’s in the next tutorial?
In the previous ASP.NET MVC Part 2 lab, we saw how we can pass data from controller to the view. So now the next step is to create a simple model and see all the 3 ASP.NET MVC entities (i.e. model, view and controller) in action.
Click here for the Part 1 of the ASP.NET MVC article.
Click here for the Part 3 of the ASP.NET MVC article.
Click here for the Part 4 of the ASP.NET MVC article.
Click here for the Part 5 of the ASP.NET MVC article.
Click here for the Part 6 of the
ASP.NET MVC article.
Click here for the Part 7 of the
ASP.NET MVC article.
Click here for the Part 8 of the
ASP.NET MVC article.
Click here for the Part 9 of the
ASP.NET MVC article.
You can also visit our 101
.NET and ASP.NET interview questions.
Previous ASP.NET ASP.NET MVC labs
• How to create a simple hello world in ASP.NET MVC? - Tutorial 1
• How to pass data from controllers to views in ASP.NET MVC? - Tutorial 2
In this lab we will create a simple customer model, flourish the same with some data and display the same in a view.
Below is a video demonstration for the same
The first step is to create a simple customer model which is nothing but a class with 3 properties code, name and amount. Create a simple ASP.NET MVC project, right click on the model folder and click on add new item as shown in the below figure.
From the templates select a simple class and name it as customer.
Create the class with 3 properties as shown in the below the code snippet.
public class Customer
{
private string _Code;
private string _Name;
private double _Amount;
public string Code
{
set
{
_Code = value;
}
get
{
return _Code;
}
}
public string Name
{
get
{
return _Name;
}
set
{
_Name = value;
}
}
public double Amount
{
set
{
_Amount = value;
}
get
{
return _Amount;
}
}
}
The next step is to add the controller and create a simple action display customer as shown in the below code snippet. Import the model namespace in the controller class. In the action we created the object of the customer class, flourished with some data and passed the same to a view named as “DisplayCustomer”.
public class CustomerController : Controller
{
…..
….
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = 12;
objCustomer.CustomerCode = "1001";
objCustomer.Amount = 90.34;
return View("DisplayCustomer",objCustomer);
}
}
We need to now join the points of ASP.NET MVC by creating views. So right click on the view folder and click add view. You should see a drop down as shown in the below figure. Give a view name, check create a strongly typed view and bind this view to the customer class using the dropdown as shown in the below figure.
The advantage of creating a strong typed view is you can now get the properties of class in the view by typing the model and “.” as shown in the below figure.
Below is the view code which displays the customer property value. We have also put an if condition which displays the customer as privileged customer if above 100 and normal customer if below 100.
<body>
<div>
The customer id is <%= Model.Id %><br />
The customer Code is <%= Model.CustomerCode %><br />
<% if (Model.Amount > 100) {%>
This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>
</div>
</body>
Now the “D” thing, hit cntrl + f5 and pat yourself for one more lab success.
In this sample we flourished the customer object from within the controller, in the next we will take data from an input view and display the same. In other words we will see how to create data entry screens for taking data using ASP.NET MVC views.Get Part 4 of the ASP.NET MVC article.