Learn MVC

28/06/2013
Learn MVC (Model View Controller) step by step in 7 days Day 1 - CodeProject
Articles Web Development ASP.NET General
Learn MVC (Model View Controller) step by step in 7

days Day 1
By Shivprasad koirala, 26 Mar 2013
4.84 (122 votes)
Contents
So, whats the agenda?
Other parts of MVC step by step in 7 days
So why MVC when ASP.NET code-behind is so good?
Problem number 1: Unit testing
Problem 2: The reality of separation of code and UI
Our HERO MVC (Model, view and controller)
Pre-requisite for MVC
Lab 1: Creating a simple Hello World ASP.NET MVC application
Video demonstration for Lab 1
Step 1: Create project
Step 2: Add controller
Step 3: Add view
Step 4: Run the application
So whats in the next lab?
Lab 2: Passing data between controllers and views
Step 1: Create project and set view data
Step 2: Display view data in the view
Lab 3: Creating a simple model using MVC
Step 1: Create a simple class file
Step 2: Define the controller with action
www.codeproject.com/Articles/207797/Learn-MVC-Model-View-Controller-step-by-step-in-7?display=Print
1/24
28/06/2013
Step 3: Create strongly typed view using the class

Step 4: Run your application
Lab 4: Creating a simple MVC data entry screen
Step 1: Creating your data entry ASPX page
Step 2: Creating the controller
Step 3: Create the view to display the customer object
Step 4: Finally run the project
Lab 5: Using HTML Helper to create views faster
Step 1: Create the Customer class
Step 2: Creating the input HTML form using helper classes
Step 3: Create a strongly typed view by using the customer class
Step 4: Creating the controller class
Whats for the second day?
So, whats the agenda?

As the article name says, learn MVC; so the agenda is simple, we are going to learn ASP.NET MVC in 7 days.
The way we will learn MVC in this series of articles is by doing labs, looking at detailed steps of how to achieve
those labs, and also looking at demonstrative videos.
This article series is divided into 7 days with 35 hands-on labs and every day we will do 5 labs which will help
us achieve our goals.
So get ready for day 1. For day 1, shown below is our agenda. We will start with an introduction, do a simple
Hello World, and finally in the 6 th lab, we will create a simple customer data entry screen using HTML Helper
classes.
Lab
No.
Lab description
YouTube video
demonstration
Introduction, Why MVC?
NA.
A simple Hello World ASP.NET MVC application.
http://youtu.be/KAKxm4eQP24?
hd=1
In this lab we will see how we can share data

2/24
28/06/2013
between the controller and the view using view

data.
http://youtu.be/Fu9v2MIDlTA?
hd=1
In this lab we will create a simple customer

model, flourish the same with some data, and
display the same in a view.
http://youtu.be/0-UdqWy9lVc?
hd=1
In this lab we will create a simple customer data http://youtu.be/1dlxtHuRw34?

entry screen with some validation on the view.
hd=1
This lab will demonstrate how to expedite your

MVC development process using HTML Helper
classes.
Pending
Here you can watch my .NET interview questions and answers videos on various topics like WCF, Silverlight,
LINQ, WPF, Design Patterns, Entity Framework, etc.
Other Parts of MVC Step by Step in 7 days

Get Part 2 of the MVC step by step article.
Get Part 3 of the MVC step by step article.
So why MVC when ASP.NET code-behind is so

good?
I am sure all ASP.NET developers love the code-behind concept. Accepting something new like MVC will not
be easy for them. So lets analyze the problems with the current code-behind concept.
When we generally talk about ASP.NET applications built on a tiered architecture they are divided in four parts:
UI (ASPX pages), code-behind (ASPX.CS pages), middle tier (.NET classes), and finally the Data layer.
If you look from the aspect of code distribution, the major code which has logic is in the middle tier or in the
code-behind (ASPX.CS files). The UI or ASPX files are HTML files which are more about UI design, and data
access logic is pretty much standard components like enterprise data blocks, entity data contexts, etc.
3/24
28/06/2013
Lets try to analyze the problems.
Problem number 1: Unit Testing

From the aspect of unit testing we can exclude the data logic and the UI HTML. The data logic classes are
already time tested components like enterprise data block, entity data context, or LINQ data context. So we
really do not have to put a lot of effort on testing the DAL separately. In case you have a custom data access
layer it will still be easy to test them as they are simple .NET classes.
There is no logic in testing an ASPX HTML as its more about look and feel.
The middle tier is again a simple .NET class like data logic so you can easily do unit testing using VSTS or
NUNIT.
Now comes the most important one: the code-behind. The code-behind has a lot of action, and testing it is
one of the most important things. The only way to invoke these codes is by doing a manual test. From a time
perspective this would not be a great choice.
Even though Microsoft has always boasted about how the ASP.NET code-behind is separate from the UI, in
practical sense, its very difficult to decouple ASP.NET code-behind and do unit testing on it.
The ASP.NET code-behind is completely tied up with the ASP.NET H
ttpContextobject which makes unit
testing very difficult. Just think os how to unit test the below ASP.NET code-behind. How do I create an
HttpCcontextobject, how do I simulate the senderand EventArgsobjects of the button clicks, etc.
4/24
28/06/2013
FYI: Many developers talk about mock tests, rhino mocks, etc., but still it is cryptic and the complication
increases with session variables, view data objects, and ASP.NET UI controls creating further confusion.
Problem 2: The reality of separation of code and UI

As said previously, the ASPX and the ASPX.CS cannot be decoupled in reality, thus reducing reusability. Yes,
Microsoft did say first that the code-behind is different from the UI, but then they are probably separate
physical files only and one cannot just exist without the other.
For instance lets say the same button click code when called via HTTP POST should display using
displayinvoice.aspx and when called via HTTP GET should display in a tree view. In other words we would like
to reuse the code-behind. Just think of how can we do this using the current code-behind.
Our HERO MVC (Model, View, and Controller)

5/24
28/06/2013
Thats where MVC comes to rescue. The code-behind is moved to a simple .NET class called Controller. Any
user request first comes to the Controller class, the Controller class then invokes the model, and attaches the
model to the view for display to the end user.
As this controller class is a simple .NET class we can reuse and also do unit testing easily. So lets see how we
can create MVC application using MVC template provided by visual studio.
Pre-requisite for MVC

Before we start the day let's ensure that you have all the ingredients to create an MVC application.
Visual Studio 2010 or the free Visual Web Developer 2010 Express. These include the ASP.NET MVC 2
template by default.
Visual Studio 2008 SP1 (any edition) or the free Visual Web Developer 2008 Express with SP1. These do
not include ASP.NET MVC 2 by default; you must also download and install ASP.NET MVC 2 from
http://www.asp.net/mvc/.
So once you have all your pre-requisites it is time to start the first lab.
Lab 1: Creating a simple Hello World ASP.NET MVC

application
In this lab we will create a simple Hello World program using an MVC template. We will create a simple
controller, attach the controller to a simple index.aspx page, and view the display on the browser.
Video demonstration for lab 1

6/24
28/06/2013
In case you want to spend more time with your family rather than reading the complete article you can watch
the following 5 minute YouTube video: http://youtu.be/KAKxm4eQP24?hd=1.
Step 1: Create project

Create a new project by selecting the MVC 2 empty web application template as shown in the below figure.
Once you click OK, you have a readymade structure with the appropriate folders where you can add
controllers, models, and views.
Step 2: Add controller

So lets go and add a new controller as shown in the below figure.
7/24
28/06/2013
Once you add the new controller, you should see some kind of code snippet as shown below:
public class Default1Controller : Controller
{
//
// GET: /Default1/
public ActionResult Index()
{
return View();
}
}
Step 3: Add view

Now that we have the controller we need to go and add the view. So click on the Index function which is
present in the control and click on the Add View menu as shown in the below figure.
The add view pops up a modal box to enter the view name which will be invoked when this controller is called
as shown in the figure below. For now, keep the view name same as the controller name and also uncheck the
master page check box.
8/24
28/06/2013
Once you click on the OK button of the view, you should see a simple ASPX page with the below HTML code
snippet. In the below code snippet I have added This is my first MVC application.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index</title>
</head>
<body>
<div>
This is my first MVC application
</div>
</body>
</html>
Step 4: Run the application

If you do a CTRL + F5 you should see an error as shown in the below figure. This error is obvious because we
have not invoked the appropriate controller / action.
9/24
28/06/2013
If you append the proper controller on the URL you should be able to see the proper view.

Now that we have created a simple MVC Hello World, its time to see how we can pass data from the
controllers to the views. The first hit comes to the controller which will load your business objects or model
and you would like to transfer these objects to the view to display them.
Lab 2: Passing data between controllers and views

The controller gets the first hit and loads the model. Most of the time we would like to pass the model to the
view for display purposes. As an ASP.NET developer your choice would be to use session variables, view state,
or some other ASP.NET session management object.
The problem with using the ASP.NET session or view state object is the scope. ASP.NET session objects have
10/24
28/06/2013
session scope and view state has page scope. For MVC we would like to see the scope limited to the controller
and the view. In other words we would like to maintain data when the hit comes to the controller and reaches
the view and after that the scope of the data should expire.
Thats where the new session management technique has been introduced in the ASP.NET MVC framework,
i.e., ViewData.

Below is a simple YouTube video which demonstrates the lab for the view data. In this video we will see how
we can share data between the controller and the view using view data. So we will create a simple controller,
record the current data in a view data variable, and then display the same in the view using the percentage
tag: http://youtu.be/Fu9v2MIDlTA?hd=1.
Step 1: Create project and set view data

So the first step is to create a project and a controller. In the controller, set the viewdata variable as shown in
the below code snippet and kick off the view.
public class DisplayTimeController : Controller
{
//
// GET: /DisplayTime/
public ActionResult Index()

{
ViewData["CurrentTime"] = DateTime.Now.ToString();
return View();
}
Step 2: Display view data in the view

The next thing is to display data in the view by using the percentage tag. One important point to note is, the
view does not have a code-behind. So to display the view we need to use the <
%:tag in the ASPX page as
shown in the below code snippet.
<body>
<div>
<%: ViewData["CurrentTime"] %>
</div>
</body>
11/24
28/06/2013

So now that we know how to pass data using view data, the next lab is to create a simple model and see all
the three MVC entities (i.e., model, view, and controller) in action.
Lab 3: Creating a simple model using MVC

In this lab we will create a simple customer model, flourish it with some data, and display it in a view.

Below is a video demonstration: http://youtu.be/0-UdqWy9lVc?hd=1.
Step 1: Create a simple class file

The first step is to create a simple customer model which is nothing but a class with three properties: code,
name, and amount. Create a simple 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 Cu

stomer.
Create the class with three properties as shown in the below code snippet.
12/24
28/06/2013
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;
}
}
Step 2: Define the controller with action

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 create an object of the customer
class, flourish with some data, and pass it to a view named D
isplayCustomer.
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);
13/24
28/06/2013
Step 3: Create strongly typed view using the class

We need to now join the points of MVC by creating views. So right click on the view folder and click Add View.
You should see a dropdown 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.
Note :- In case you are not able to see the model in the drop down , please compile your project
once.
The advantage of creating a strong typed view is you can now get the properties of the class in the view by
typing the model and . as shown in the below figure.
14/24
28/06/2013
Below is the view code which displays the customer property value. We have also put an i
fcondition which
displays the customer as a privileged customer if above 100 and a 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>
Step 4: Run your application

Now the D thing, hit Ctrl + F5 and pat yourself for one more lab success.
15/24
28/06/2013

In this sample we flourished the customer object from within the controller. In the next lab we will take data
from an input view and display it. In other words we will see how to create data entry screens for accepting
data from views.
Lab 4: Creating a simple MVC data entry screen

Every project small or big needs data entry screens. In this lab we will create a simple customer data entry
screen as shown in the below figure using an MVC template.
As soon as the end user enters details and submits data it redirects to a screen as shown below. If the entered
amount is less than 100 it displays normal customer, else it displays privileged customer.

Here is a simple video demonstration for this lab: http://youtu.be/1dlxtHuRw34?hd=1.
Step 1: Creating your data entry ASPX page

16/24
28/06/2013
The first step is to create the data entry page using the simple HTML form action tag as shown in the below
code snippet. The most important point to note in the below code snippet is that the action is pointing to the
controller action, i.e., D
isplayCustomer.
<form action="DisplayCustomer" method="post">
Enter customer id :- <input type="text" name="Id" /> <br />
Enter customer code :- <input type="text" name="CustomerCode" /><br />
Enter customer Amount :-<input type="text" name="Amount" /><br />
<input type="submit" value="Submit customer data" />
</form>
Step 2: Creating the controller

The above defined form action will post to the controller class and on the function D
isplayCustomer. So
we need to get the data from the HTML controls, flourish the object, and send the object to the view.
Below is the code snippet of Di
splayCustomerwhich flourishes the customer object by collecting data from
Request.Formand sends the object to the view DisplayCustomer.
{
..
.
[HttpPost]
{
objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
objCustomer.CustomerCode = Request.Form["Id"].ToString();
objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
return View("DisplayCustomer", objCustomer);
}
}
Step 3: Create the view to display the customer object

The next step is to create the Di
splayCustomer view. So right click on the view folder and click Add view.
You should see a dropdown 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.
17/24
28/06/2013
The advantage of creating a strong typed view is you can now get the properties of the 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 i
fcondition which
displays the customer as a 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 />
18/24
28/06/2013
<% if (Model.Amount > 100) {%>

This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>
</div>
</body>
Step 4: Finally run the project

The final step is to run the project and see the output.
You should also be able to test above 100 and below 100 scenarios.

In this lab we created a simple data entry screen which helped us flourish the customer object. This customer
object was then passed to the view for display. If you closely watch the current lab we have done a lot of
coding, i.e., creating the HTML screens, flourishing the object, etc. It would be great if there was some kind of
automation. In the next lab we see how HTML helper classes help to minimize many of these manual coding
19/24
28/06/2013
and thus increase productivity.
Lab 5: Using HTMLHelper to create views faster

In our previous lab we created a simple customer data entry screen. We completed the lab successfully but
with two big problems:
The complete HTML code was written manually. In other words, it was less productive. Its like going
back to the dark ages where developers used to write HTML tags in Notepad.
Enter customer code :- <input type="text" name="CustomerCode" /><br />
Enter customer Amount :-<input type="text" name="Amount" /><br />
</form>
Added to that, a lot of manual code was also written in the controller to flourish the object and send
data to the MVC view.
{
..
.
[HttpPost]
{
objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
objCustomer.CustomerCode = Request.Form["Id"].ToString();
objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
return View("DisplayCustomer", objCustomer);
}
}
In this lab we will see how to use MVC HTMLHelper classes to minimize manual coding and increase
productivity.
Step 1: Create the Customer class

Create a simple customer class, please refer to Lab 5 for details.
Step 2: Creating the input HTML form using helper classes

HTML helper classes have readymade functions by which you can create HTML controls with ease. Go to any
MVC view and see the intellisense for the HTMLHelper class, and you should see something as shown in the
below figure.
20/24
28/06/2013
By using the HTMLHelper class you can create any HTML control like T
extBox, Label, ListBox, etc., just by
invoking the appropriate function.
In order to create the f
ormtag for HTML we need to use Html.BeginForm. Shown below is the code
snippet for that:
<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))
{%>
-- HTML input fields will go here
<%} %>
The above code will generate the below HTML:

..
..
</form>
The HTML helper b

eginform takes three input parameters: action name (method inside the controller),
controller name (actual controller name), and HTTP posting methodology (POST or GET).
If you want to create a text box, simply use the Te

xtBox function of the HTMLHelper class as shown in the
below code. This way you can create HTML controls using the HTMLHelper class functions.
Enter customer id :- <%= Html.TextBox("Id",Model)%> <br />
The above code snippet will generate the below HTML code:
To create a data entry screen like the one shown below, we need to the use the below code snippet.
21/24
28/06/2013
<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))

{ %>
Enter customer id :- <%= Html.TextBox("Id",Model)%> <br />
Enter customer code :- <%= Html.TextBox("CustomerCode",Model) %><br />
Enter customer Amount :- <%= Html.TextBox("Amount",Model) %><br />
<%} %>
Step 3: Create a strong typed view by using the customer class

So once you have created the view using the HTMLHelper classes its time to attach the customer class with
the view; please refer to lab 5 for details.
Step 4: Creating the controller class

The final thing is the controller code. The controller code now becomes very simple. The customer object will
be auto flourished as we have used the HTML Helper classes. You will create the controller class as we did in
Lab 4 but we do not need to write any kind of code for connecting the HTML screens with the controller, its
all hidden and automated.
[HttpPost]
public ActionResult DisplayCustomer(Customer obj)
{
return View(obj);
}
Enjoy your output for different conditions of customer amounts entered.
22/24
28/06/2013
So have a toast of beer for completing your first day of MVC labs.
Whats for the second day?

In the second session, we will talk about URL routing, ease of MVC unit testing, MVC Controller attributes,
and a lot more. The next lab will be a bit more advanced as compared to the first day. Below is the link for the
second day: Click here for the day second MVC step by step.
License
This article, along with any associated source code and files, is licensed under The Code Project Open License
(CPOL)
23/24
28/06/2013
About the Author

Shivprasad koirala
Architect http://www.questpond.com
India
I am a Microsoft MVP for ASP/ASP.NET and currently a CEO of a small

E-learning company in India. We are very much active in making training videos ,
writing books and corporate trainings. Do visit my site for
.NET, C# , design pattern , WCF , Silverlight
, LINQ , ASP.NET , ADO.NET , Sharepoint , UML , SQL Server training
and Interview questions and answers
Comments and Discussions

126 messages have been posted for this article Visit
http://www.codeproject.com/Articles/207797/Learn-MVC-Model-View-Controller-step-by-step-in-7
to post and view comments on this article, or click here to get a print view with messages.
Permalink | Advertise | Privacy | Mobile
Web04 | 2.6.130627.1 | Last Updated 26 Mar 2013
Article Copyright 2011 by Shivprasad koirala

Everything else Copyright CodeProject, 1999-2013
Terms of Use
24/24

Learn MVC

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learn MVC

Uploaded by

Copyright:

Available Formats

28/06/2013

Articles Web Development ASP.NET General

Learn MVC (Model View Controller) step by step in 7

Step 3: Create strongly typed view using the class

So, whats the agenda?

Introduction, Why MVC?

A simple Hello World ASP.NET MVC application.

In this lab we will see how we can share data

between the controller and the view using view

In this lab we will create a simple customer

In this lab we will create a simple customer data http://youtu.be/1dlxtHuRw34?

This lab will demonstrate how to expedite your

Other Parts of MVC Step by Step in 7 days

So why MVC when ASP.NET code-behind is so

Lets try to analyze the problems.

Problem number 1: Unit Testing

Problem 2: The reality of separation of code and UI

Our HERO MVC (Model, View, and Controller)

Pre-requisite for MVC

Lab 1: Creating a simple Hello World ASP.NET MVC

Video demonstration for lab 1

Step 1: Create project

Step 2: Add controller

Step 3: Add view

Step 4: Run the application

So whats in the next lab?

Lab 2: Passing data between controllers and views

Video demonstration for lab 2

Step 1: Create project and set view data

public ActionResult Index()

Step 2: Display view data in the view

So whats in the next lab?

Lab 3: Creating a simple model using MVC

Video demonstration for Lab 3

Step 1: Create a simple class file

From the templates, select a simple class and name it as Cu

public class Customer

public double Amount

Step 2: Define the controller with action

Step 3: Create strongly typed view using the class

Step 4: Run your application

So whats in the next lab?

Lab 4: Creating a simple MVC data entry screen

Video demonstration for lab 4

Step 1: Creating your data entry ASPX page

Step 2: Creating the controller

Step 3: Create the view to display the customer object

<% if (Model.Amount > 100) {%>

Step 4: Finally run the project

So whats in the next lab?

and thus increase productivity.

Lab 5: Using HTMLHelper to create views faster

Step 1: Create the Customer class

Step 2: Creating the input HTML form using helper classes

The above code will generate the below HTML:

The HTML helper b

If you want to create a text box, simply use the Te

<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))

Step 3: Create a strong typed view by using the customer class

Step 4: Creating the controller class

Enjoy your output for different conditions of customer amounts entered.

Whats for the second day?

About the Author

I am a Microsoft MVP for ASP/ASP.NET and currently a CEO of a small