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 6th lab, we will create a simple
customer data entry screen using HTML Helper classes.
Lab
No.
1
2
3

Lab description

YouTube video demonstration

Introduction, Why MVC?

NA.
A simple Hello World
http://youtu.be/KAKxm4eQP24?hd=1
ASP.NET MVC application.
In this lab we will see how we
can share data between the
http://youtu.be/Fu9v2MIDlTA?hd=1
controller and the view using
view data.
In this lab we will create a
simple customer model,
flourish the same with some http://youtu.be/0-UdqWy9lVc?hd=1
data, and display the same in
a view.
In this lab we will create a
simple customer data entry
http://youtu.be/1dlxtHuRw34?hd=1
screen with some validation
on the view.
This lab will demonstrate how
to expedite your MVC
Pending
development process using
HTML Helper classes.

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.

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 codebehind and do unit testing on it.
The ASP.NET code-behind is completely tied up with the ASP.NET HttpContext object
which makes unit testing very difficult. Just think os how to unit test the below ASP.NET
code-behind. How do I create an HttpCcontext object, how do I simulate the sender
and EventArgs objects of the button clicks, etc.
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)

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

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.

Once you add the new controller, you should see some kind of code snippet as shown
below:
Collapse | Copy Code
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.

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.
Collapse | Copy Code
<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.

If you append the proper controller on the URL you should be able to see the proper view.

So whats in the next lab?

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 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.

Video demonstration for lab 2

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.
Collapse | Copy Code
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.
Collapse | Copy Code

<body>
<div>
<%: ViewData["CurrentTime"] %>
</div>
</body>

So whats in the next lab?

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.

Video demonstration for Lab 3

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 Customer.

Create the class with three properties as shown in the below code snippet.
Collapse | Copy Code
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 DisplayCustomer.
Collapse | Copy Code
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);
}

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.

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
if condition which displays the customer as a privileged customer if above 100 and a
normal customer if below 100.
Collapse | Copy Code
<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.

So whats in the next lab?

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.

Video demonstration for lab 4

Here is a simple video demonstration for this lab: http://youtu.be/1dlxtHuRw34?hd=1.

Step 1: Creating your data entry ASPX page

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., DisplayCustomer.
Collapse | Copy Code
<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
DisplayCustomer. 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 DisplayCustomer which flourishes the customer object by
collecting data from Request.Form and sends the object to the view DisplayCustomer.
Collapse | Copy Code
public class CustomerController : Controller
{
..
.
[HttpPost]
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
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 DisplayCustomer 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.

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
if condition which displays the customer as a privileged customer if above 100 and
normal customer if below 100.

Collapse | Copy Code

<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: 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.

So whats in the next lab?

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 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.
Collapse | Copy Code

<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>

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.
Collapse | Copy Code

public class CustomerController : Controller

{
..
.
[HttpPost]
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
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.

By using the HTMLHelper class you can create any HTML control like TextBox, Label,
ListBox, etc., just by invoking the appropriate function.

In order to create the form tag for HTML we need to use Html.BeginForm. Shown
below is the code snippet for that:
Collapse | Copy Code
<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))
{%>
-- HTML input fields will go here
<%} %>

The above code will generate the below HTML:

Collapse | Copy Code
<form action="DisplayCustomer" method="post">
..
..
</form>

The HTML helper beginform 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 TextBox function of the HTMLHelper
class as shown in the below code. This way you can create HTML controls using the
HTMLHelper class functions.
Collapse | Copy Code
Enter customer id :- <%= Html.TextBox("Id",Model)%> <br />

The above code snippet will generate the below HTML code:
Collapse | Copy Code

Enter customer id :- <input type="text" name="Id" /> <br />

To create a data entry screen like the one shown below, we need to the use the below code
snippet.

Collapse | Copy Code

<% 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 />
<input type="submit" value="Submit customer data" />
<%} %>

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.
Collapse | Copy Code

[HttpPost]
public ActionResult DisplayCustomer(Customer obj)
{
return View(obj);
}

Enjoy your output for different conditions of customer amounts entered.

So, whats the agenda?

This article is continuation to Learn MVC step by step in 7 days you can read the first
day from Click here for Day 1 article.
Get Part 3 of the MVC Step by Step article.
In day 2 we will look in do the following 4 labs.
Writing unit tests on MVC projects.
Configure MVC routings.
Validating MVC routes.
Configure MVC outbound routes.
In case you are completely a fresher I will suggest to start with the below 4 videos which
are 10 minutes approximately so that you can come to MVC quickly.
Lab
No.

Lab description

Youtube Video demonstration for the

same

A simple Hello world ASP.NET

MVC application.

In this Lab we will see how we can

share data between controller and the http://youtu.be/Fu9v2MIDlTA?hd=1
view using view data.

In this lab we will create a simple

customer model, flourish the same
http://youtu.be/0-UdqWy9lVc?hd=1
with some data and display the same
in a view.

In this lab we will create a simple

customer data entry screen with
some validation on the view.

http://youtu.be/KAKxm4eQP24?hd=1

http://youtu.be/1dlxtHuRw34?hd=1

So lets start with the above 4 labs one by one.

Lab 6:- Unit test MVC projects

When we started this whole MVC series (Day 1) we started with two concerns regarding
behind code: How can we do unit testing on the ASP.NET behind code?
How can we reuse the ASP.NET behind code with different user interfaces?
In this section lets concentrate on the first point i.e. Unit testing.
Just a quick recap if we need to unit test the below method btngenerateinvoices_click
in ASP.NET behind code , we have the following problems : How do we create the sender and eventargs object?
The below complete code runs under HttpContext object, how do I mimic them?
What about ASP.NET UI controls , how do I access them ?
What about other ASP.NET object like session object, application, how do I access
them?.
FYI: - Many developers would talk about mock test, rhino mocks etc but still its
cryptic and the complication increases with session variables, view data objects,
ASP.NET UI controls creating further confusion.

So what we will do in this section is we will create a simple MVC application and we
will do unit test on the ASP.NET application using VSTS unit test framework.

Step1:- Create the simple display customer screen project

The first step is to create a simple MVC project. We will use the same project which we
have discussed in MVC (Model view controller) day 1 LearnMVC.aspx. So in case you
do not have any sample project please create one using the link above.

The controller class at the end of the day is a simple .NET class. For instance if you
watch your project code closely, you can easily see the customer controller class as
shown below.
Collapse | Copy Code
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);
}
}

In simple words because this is a simple .NET class we can easily instantiate the class
and create automated unit tests for the same. Thats what exactly we are going to do in
our next steps.

Step 2:- Add a simple unit test project

Lets use our VSTS unit test framework to test the controller class. In case you are a
complete fresher to VSTS unit testing we would request to see this article to get a hang of
unit testing http://www.codeproject.com/KB/cs/VSTSTesting.aspx . Add a new project to

your solution using the test project solution template.

Step 3:- Add appropriate project references

We need to add reference to the MVC application in our unit test project so that we can
get hold of the controller class.

Once you add the references you should see the MVC application in your project
references as shown in the below figure.

Step 4:- Write the unit test

Once you have added the references open the unit test class i.e. UnitTest1.cs. In this
class create a simple test method called as DisplayCustomer which is attributed by
TestMethod attribute as shown in the below code snippet.
If you see the below code snippet we are creating object of the controller class, invoking
the controller action i.e. DisplayCustomer and then checking if the view name is
DisplayCustomer. If they are equal that means the test passes or else it fails.
Collapse | Copy Code

[TestMethod]
public void DisplayCustomer()
{
CustomerController obj = new CustomerController();
var varresult = obj.DisplayCustomer();
Assert.AreEqual("DisplayCustomer", varresult.ViewName);
}

Step 5 :- Finally run the unit test

Once you have written your test case its time to run the test case by clicking on test ,
windows and then clicking test view.

On the test view right click on the test and run the selected test
case as shown below.

If everything goes well you should see green color indicating that
the test has passed or else you should see a red color with details
regarding why the test failed.

So whats in the next Lab

In the next lab we will discuss about MVC routing. MVC is all about connecting the
actions to the controllers and MVC routing helps us to achieve the same. So be ready to
get routed in our next tutorial.

Lab 7:- Understanding MVC routing

Introduction

At the end of the day MVC is nothing but URL mapped to controllers and controllers
mapped to actions.
For example when a user sends a request URL like www.questpond.com/locateproduct
from the browser, these actions are mapped with MVC controllers and MVC controllers
finally invokes those functions.
Below is a simple table which shows how the whole thing looks like.

Adding further to the complication we can have multiple URLs mapped to one controller
or you can have more than one controller mapped to a single URL. For instance you can
have www.questpond.com/contactus and www.questpond.com/aboutus mapped to a
single controller called as AboutUsController.

It would be great if we have some kind of mechanism by which we can configure these
mappings. Thats what exactly MVC routing is meant for. MVC routing helps to easily
configure and map the URL with the controllers.

Step 1:- Take the MVC project created in Day 1.

Lets take the same customer project we had discussed in the previous section.

Step 2 :- Change global.asax.cs

All route mappings are stored in the global.asax.cs behind code file. So the first step is
we need to go and change this file.

All routing mapping are stored in to a collection called as routes. This collection
belongs to the namespace System.Web.Routing. To add a route you need to call the
MapRoute method and pass three parameters name,url and defaults.
Below is a print screen of the snippet of the maproute function.

Name is the key name by which the route will be identified from the collection.
Url defines what kind of URL format we want to connect with the controllers. For
instance in the below code snippet we are saying that View/ViewCustomer is the URL
format.
Defaults defines the controller class and action functions which will be invoked when
the URL is called. For instance in the below code we are saying that when
View/ViewCustomer is called it will invoke the Customer controller class and the
action function invoked will be DisplayCustomer.
In case your controller takes parameters you can use the {brackets. For instance in the
below code snippet we have used {to specify that we can have id parameter.
If you want to define the parameter as optional you can use the UrlParameter.Optional
enum.

The first thing is comment the default mapping code. We will explain the default
mapping code later.
Collapse | Copy Code
//routes.MapRoute(
// "Default", // Route name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id =
UrlParameter.Optional }); // Parameter defaults

Put the below code , which means when we call http://localhost/View/ViewCustomer/ it

will invoke the customer controller and will call displaycustomer function.
Collapse | Copy Code

routes.MapRoute(
"View", // Route name
"View/ViewCustomer/{id}", // URL with parameters
new { controller = "Customer", action = "DisplayCustomer",
id = UrlParameter.Optional }); // Parameter defaults

Below is the action function DisplayCustomer which will be invoked.

Collapse | Copy Code
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = 12;
objCustomer.CustomerCode = "1001";
objCustomer.Amount = 90.34;
return View("DisplayCustomer",objCustomer);
}

Step 3:- Run the application

If you run the application you should see the below display.

If you remember we commented the default entry route. Lets understand what exactly
this default code meant.
"{controller}/{action}/{id}" defines that URL will be automatically named with the
convention of controller name / function action name / value. So if you have a controller
class with Customer and action function as Search then the URL will be structured as
http://xyz.com/Customer/Search automatically.
Collapse | Copy Code
//routes.MapRoute(
// "Default", // Route name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id =
UrlParameter.Optional }); // Parameter defaults

So whats in the next Lab

In the next lab we will discuss how to validate MVC URL. All actions to MVC come via
MVC URL and even data is fed via MVC URL. So in the next section we will see how
we can validate the data passed in the MVC URL.

Lab 8:- Validating and setting default values to MVC URLS

MVC is all about action which happens via URL and data for those actions is also
provided by the URL. It would be great if we can validate data which is passed via these
MVC URLs.
For instance lets consider the MVC URL http://localhost/Customer/ViewCustomer . If
anyone wants to view customer details for 1001 customer code he needs to enter
http://localhost/Customer/ViewCustomer/1001 .
The customer code is numeric in nature. In other words anyone entering a MVC URL

like http://localhost/Customer/ViewCustomer/Shiv is invalid. MVC framework provides

a validation mechanism by which we can check on the URL itself if the data is
appropriate. In this lab we will see how to validate data which is entered on the MVC
URL.

Step 1:- Create a simple customer model

The first is to create a simple customer class model which will be invoked by the
controller.
Collapse | Copy Code
public
{
public
public
public
}

class Customer
int Id { set; get; }
string CustomerCode { set; get; }
double Amount { set; get; }

Step 2:- Create the controller class

The next step is to create a simple controller class which has collection of the customer
model object which was created in step 1.
Collapse | Copy Code
public class CustomerController : Controller
{
List<Customer> Customers = new List<Customer>();
//
// GET: /Customer/
public CustomerController()
{
Customer obj1 = new Customer();
obj1.Id = 12;
obj1.CustomerCode = "1001";
obj1.Amount = 90.34;
Customers.Add(obj1);
obj1 = new Customer();
obj1.Id = 11;
obj1.CustomerCode = "1002";
obj1.Amount = 91;
Customers.Add(obj1);
}
[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];
return View("DisplayCustomer",objCustomer);

}
}

The controller has a simple DisplayCustomer function which displays the customer
using the id value. This function takes the id value and looks up through the customer
collection. Below is the downsized reposted code of the function.
Collapse | Copy Code
[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];
return View("DisplayCustomer",objCustomer);
}

If you look at the DisplayCustomer function it takes an id value which is numeric. We

would like put a validation on this id field with the following constraints: Id should always be numeric.
It should be between 0 to 99.
We want the above validations to fire when the MVC URL is invoked with data.

Step 3:- Apply validation using regex on the MVC routes

The validation described in the step 2 can be achieved by applying regular expression on
the route map. If you go to global.asax file and see the maproute function on the inputs to
this function is the constraint as shown in the below figure.

In case you are new to regular expression we would advise you to go through this video
on regular expressions http://youtu.be/C2zm0roE-Uc?hd=1
So in order to accommodate the numeric validation we need to the specify the regex
constraint i.e. \d{1,2} in the maproute function as shown below. \d{1,2} in regex
means that the input should be numeric and should be maximum of length 1 or 2 , i.e.
between 0 to 99.

You can specify default values by saying id=0 as shown in the below code snippet. So
just in case if some one does not specify the value to the id it will take the value as zero
by default.
Collapse | Copy Code
routes.MapRoute(
"View", // Route name
"View/ViewCustomer/{id}", // URL with parameters
new { controller = "Customer", action = "DisplayCustomer",
id = 0 }, new { id = @"\d{1,2}" }); // Parameter defaults

Step 4:- Test if it works

So now that we are done with the validation using the maproute functions, its time to
test if these validations work.
So in the first test we have specified valid 1 and we see that the controller is hit and the
data is displayed.

If you try to specify value more than 100 you would get error as shown below. Please
note that the error is confusing but its the effect of the regex validation which is specified
on the maproute function.

If you try to specify a non-numeric value you should again get the same error which
confirms that our regex validation is working properly.

The most important point to note is that these validations are executed even before the
request reaches the controller functions.

So whats in the next lab

One of the crucial things in any website development is defining navigations from one
page to the other page. In MVC everything is an action and those actions invoke the
views or pages. We can not specify direct hyperlinks like
www.questpond.com/home.aspx , this would defeat the purpose of MVC. In other words
we need to specify actions and these actions will invoke the URLs.

In the next lab we will look in to how to define outbound URL in MVC views which will
help us to navigate from one page to other page.

Lab 9:- Understanding MVC outbound URLs

Introduction
When we talk about web applications end users would like to navigate from one page to
other page. So as a simple developer your first thought would be to just give page names
as shown in the below figure.
So for example if you want to go and browse from home.aspx to about.aspx give the
anchor hyper link page name and things should be fine.
By doing that you are violating MVC principles. MVC principle says that hit should first
come to the controller but by specifying <a href=Home.aspx> the first hit comes to the
view. This bypasses your controller logic completely and your MVC architecture falls
flat.

Ideally the actions should direct which page should be invoked. So the hyperlink should
have actions in the anchor tags and not the page names i.e. direct view name.

Step 1:- Create views

Lets create three views as shown in the below figure Home,About and Product.

Lets create a simple navigation between these 3 pages as shown below. From the home
view we would like to navigate to about and product view. From about and product view
we would like to navigate back to the home view.

Step 2 :- Create controller for the views

Next step is to define controller actions which will invoke these views. In the below code
snippet we have defined 3 actions GotoHome (this invokes home view), Aboutus
( this invokes the about view) and SeeProduct ( this invokes product view).
Collapse | Copy Code
public class SiteController : Controller
{
//
// GET: /Site/
public ActionResult GotoHome()
{
return View("Home");
}
public ActionResult AboutUs()
{
return View("About");
}
public ActionResult SeeProduct()
{
return View("Product");
}
}

Step 3:- Provide actions in the link

To invoke the actions rather than the views we need to specify the actions in the anchor
tag as shown in the below code snippet.
Collapse | Copy Code
This is products
<a href="GotoHome">Go Home</a><br />
<a href="Aboutus">About us</a><br />

If you want to create the anchor links using the HTML helper classes you can use the
action link function as shown in the below code snippet.
Collapse | Copy Code

<%= Html.ActionLink("Home","Gotohome") %>

The above code was for the products page , you can do the same type of navigations for
the about us and the home page.
Collapse | Copy Code
This is About us
<a href="GotoHome">Go Home</a><br />

<a href="SeeProduct">See Product</a><br />

This is home page
<br />
<a href="SeeProduct">See Product</a><br />
<a href="Aboutus">About us</a><br />

Collapse | Copy Code

</div>

Step 4:- Enjoy your navigation

Once you have specified the actions inside the link you navigate between home, about
and products page.

While navigating you can see how the URLs are pointing to the actions rather than
absolute page names like home.aspx, aboutus.aspx etc which violates the complete MVC
principle.

So, whats the agenda?

In day 3 of Learn MVC Step by step we will look in do the following below 5 labs. In
case you want to see the Day 1 and Day 2 articles you can start from Learn MVC
ASP.NET step by step .

Partial views.
Validations using data annotations.
Razor (MVC 3).
MVC Windows authentication
MVC Forms Authentication

So lets start with the above three labs one by one.

FYI: In case you are completely new to MVC (Model View Controller), please see
the last section of the article for a kick start.

Day 1: Controllers, strong typed views, and helper

classes
If you are new to the series or want to refresh what we covered in Day 1 then click and
go to read it.

Day 2: Unit test, routing, and outbound URLs

See here what we did in Day 2 of MVC so that we can get in synch.

Lab 10: Partial views

When we talk about web application, reusability is the key. So as an MVC developer we
would like to create reusable views. For instance we would like to create reusable views
like footer and header views and use them inside one big MVC view.
Reusable views can be achieved by creating Partial views.

Step 1: Create a simple view

The first step would be to create a simple view with a controller. You can see from the
below snapshot, I have created a simple view called Index.aspx which will be invoked
via Homecontroller.cs.

In case you are coming to this section directly, please see the previous Labs to synch up.

Step 2: Create a simple partial view

Now that we have created the main view, its time to create a partial view which can be
consumed inside the Index view. In order to create a partial view, right click on the
view folder and mark the check box Create a partial view as shown in the below figure.

Step 3: Put something in the partial view

Put some text or logic in your partial view.
Collapse | Copy Code
<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
This is reusable view

Step 4: Call the partial view in the main

Finally call the partial view in the main view using the Html.RenderPartial function
and pass the view name in the function as shown in the below code snippet.
Collapse | Copy Code

<body>
<div>
<% Html.RenderPartial("MyView"); %>
</div>
</body>

Also ensure that the partial view is in the same folder where your main view is. In case
its not, then you need to also pass the path in the RenderPartial function. You can see
in the below figure I have moved the partial view in the main Views folder.
One more thing which is noticeable is that the icons for main view and partial are very
different. You can see the yellow border in the partial view icon which does not exist in
the main view icon.

Step 5: Run the program and see the action

Finally do a CTRL + F5, put the proper controller path, and see your results. Below is the
snapshot of how things should look like.

Lab 11: Validation using Data Annotation

Validating data is one of the key things in any web application. As a developer you
would like to run validation both on the client side (browser) and on the server side. So
you would probably like to write the validation once and then expect the validation
framework to generate the validation logic on both ends. Good news, this is possible by
using data annotations. In MVC you validate model values. So once the data comes
inside the model you would like to question the model saying, is the data provided
proper? Are values in range? etc.

Data annotations are nothing but metadata which you can apply on the model and the
MVC framework will validate using the metadata provided.
In this lab lets enforce validation by using data annotations. So the first thing is use Lab
4 and create a simple model and a strong typed data entry view. In case you have come
to this lab straight, please have a look at day 1 labs before proceeding ahead.
So assuming you have created the model and the strong typed view, lets start applying
data annotations.
Note: The view created should be a strong typed view.

Step 1: Decorate model with data annotation

Import the data annotation namespace as shown in the code snippet below.
Collapse | Copy Code
using System.ComponentModel.DataAnnotations;

Let's say we have a customer model and we want to ensure that the customer code field is
compulsory. So you can apply the attribute Required as shown in the below code
snippet. If the validation fails and you would like to display some error message, you can
pass the ErrorMessage also.
Collapse | Copy Code

public class Customer

{
[Required(ErrorMessage="Customer code is required")]
public string CustomerCode
{
set;
get;
}
}

Step 2: Change the ASPX code

Now there are some code changes we would be doing in the ASPX code as compared to
our previous lab. Inside the body we would like to display the error message if the data
is not proper. This is done by using the below code snippet.
Collapse | Copy Code
<%= Html.ValidationSummary() %>

We also need to code our HTML form to input data. Below is the code snippet for the
same. Please note, the EditorForModel function will automatically generate UI
controls looking at the model properties. So we do not need to create control individually
as we did for Lab 4.

Collapse | Copy Code

<% using (Html.BeginForm("PostCustomer", "Home", FormMethod.Post))
{ %>
<%= Html.EditorForModel() %>
<input type="submit" value="Submit customer data" />
<%}%>

Step 3: Enable client validation

As said previously we would like to fire validation on both the server and client side. In
order to fire validations on the client side, we need to refer to three JavaScript files as
shown in the below code snippet.
Collapse | Copy Code

<head runat="server">
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>"
type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>"
type="text/javascript"></script>
<script src="<%=
Url.Content("~/Scripts/MicrosoftMvcValidation.debug.js") %>"
type="text/javascript"></script>
<% Html.EnableClientValidation(); %>
</head>

Also note the call to the EnableClientValidation method due to which client side
validations are enabled.
Collapse | Copy Code

<% Html.EnableClientValidation(); %>

Step 4: Write your controller logic

From the UI, when the form calls a post on the controller, you would like to know if the
model state is proper or not. This can be done by checking the ModelState.IsValid
property. So if this property is valid then call the Save method and call the Thanks view,
else go back to the Customer view.
Collapse | Copy Code
[HttpPost]
public ActionResult PostCustomer(Customer obj)
{
if (ModelState.IsValid)
{
obj.Save();
return View("Thanks");
}
else
{
return View("Customer");
}

Step 5: Run your application to see the action

Finally run your application and see the data annotation in action.

Summary of other data annotation attributes

There are other data annotation attributes which makes complex validation a breeze.
Below are list of some of them:
If you want to check string length, you can use StringLength.
Collapse | Copy Code
[StringLength(160)]
public string FirstName { get; set; }

In case you want to use a Regular Expression, you can use the RegularExpression
attribute.
Collapse | Copy Code
[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")]
public string Email { get; set; }

If you want to check whether the numbers are in range, you can use the Range attribute.
Collapse | Copy Code
[Range(10,25)]
public int Age { get; set; }

Sometimes you would like to compare the values of a field with another field, we can use
the Compare attribute.
Collapse | Copy Code
public string Password { get; set; }
[Compare("Password")]
public string ConfirmPass { get; set; }

In case you want to get a particular error message , you can use the Errors collection.

Collapse | Copy Code

var ErrMessage = ModelState["Email"].Errors[0].ErrorMessage;

If you have created the model object yourself you can explicitly call TryUpdateModel in
your controller to check if the object is valid or not.
Collapse | Copy Code

TryUpdateModel(NewCustomer);

In case you want add errors in the controller you can use AddModelError function.
Collapse | Copy Code
ModelState.AddModelError("FirstName", "This is my server-side error.");

Lab 12: MVC 3: Razor

Till now this article was using MVC 2 but its high time we also start discussing and
doing labs with new release versions of MVC frameworks. Change is a part of human
life and the same stands true for MVC as well . So in this section lets discuss MVC 3
which is the next release version after MVC 2.
FYI: The recent version is MVC4 and in later days I will touch base even those versions.
So have patience.
In case you have not installed this, then click and get MVC 3 template.

In case you are feeling that whatever we have learnt in MVC 2 is a waste, no, not at all.
On the contrary MVC 3 is backwards compatible with MVC 2. So whatever you have
learnt in MVC 2 still holds true in MVC 3.
Now rather than discussing about all the new features lets focus on the biggest feature of
MVC3 which I personally think is a game changer, and that is Razor.
So whats Razor? just to answer short and sweet, its a type of view for MVC. In MVC 2
the default view was ASP.NET pages, i.e., Web form view. Now, the problem of web

form views was that it was not made thinking MVC in mind, so the syntaxes are a bit
heavy.
Developers demanded for a clean, lightweight view and with less syntactic noise: The
answer is Razor.
So lets create a simple lab to demonstrate the use of Razor views.

Step 1: Install MVC 3 and create a project using the same

Install MVC 3 templates and create a project selecting the MVC 3 template below.

Step 2: Select Razor

The next screen pops up what kind of application you want to create.

The Empty option creates a project with the least amount of files.
The Internet Application option creates a shell application which includes user
registration and authentication, navigation, and a consistent visual style.
The Intranet Application option is very much the same as Internet Application
with the only difference that the authentication takes place through a
domain/Active Directory infrastructure.

For now lets keep life simple and lets select the empty option. The second thing we need
to select is what kind of view we want, so lets select Razor and move ahead.

Once the project is created, you can see the Razor file with the name .cshtml. Now the
_ViewStart page is nothing but a common page which will be used by views for
common things like layout and common code.

Step 3: Add a view and invoke the same from the controller
Now go ahead and add a new view and invoke this view from the controller. Adding and
invoking the view from the controller remains the same as discussed in the previous
labs. Just remember to select the view as the Razor view.

Collapse | Copy Code

public class StartController : Controller

{
//
// GET: /Start/
public ActionResult Index()
{
return View("MyView");
}
}

Step 4: Practice Razor syntaxes

Now that we have the basic project and view ready, let's run through some common
Razor syntaxes and try to get a feel of how easy Razor is as compared to ASPX views.

Practice 1: Single line code

If you want to just display a simple variable you can do something as shown below. All
Razor syntaxes start with @. If you have just a single line of code you do not need {.
Razor figures out the ending logically.
Collapse | Copy Code
Todays date

@DateTime.Now

If you compare the above syntax with an ASPX view, you need to type the below code.
So isnt the syntax much simpler, neat, and lightweight?
Collapse | Copy Code
<%=DateTime.Now%>

Practice 2: Multiple lines of code

If you have multiples line of code you can use @ followed by {as shown in the below
code snippet.
Collapse | Copy Code
@{

List<string> obj = new List<string>();

obj.Add("Mumbai");
obj.Add("Pune");
obj.Add("Banglore");
obj.Add("Lucknow");

Practice 3: Foreach loop and IF conditions

For loops and if conditions become simpler as shown in the below lines of code.
Collapse | Copy Code

@foreach (string o in obj)

{
@o <br />
}

Collapse | Copy Code

@if (DateTime.Now.Year.Equals(2011))
{
// Some code here
}

Practice 4: Do not worry about @

If you are thinking if Razor confuse with @ of Razor and @ of your email address, do
not worry, Razor understands the difference. For instance in the below line, the first line
Razor will execute as a code and the second line of code it understands is just an email
address.
Collapse | Copy Code
@DateTime.Now
questpond@yahoo.com

Practice 5: To display @
In case you want to display @ just type it twice as shown in the below code snippet.
The display will be something as shown in the image below.

Collapse | Copy Code

Tweet me @@Shivkoirala

Practice 6: HTML display with Razor

In case you want to display HTML on the browser. For instance below is a simple
variable called as link which has HTML code. I am displaying the variable data on the
browser.
Collapse | Copy Code
@{

var link = "<a href='http://www.questpond.com'>Click here</a>";

}
@link;

If you execute the above code you would be surprised to see that it does not display as
HTML but as a simple display as shown below. Now thats not what we expect. We were
expecting a proper HTML display. This is done by Razor to avoid XSS attacks (I will
discuss about that in later sections).

But no worries, the Razor team has taken care of it. You can use the Html.Raw to
display the same as shown in the below code snippet.
Collapse | Copy Code
@{

var link = "<a href='http://www.questpond.com'>Click here</a>";

}
@Html.Raw(link);

Lab 13: MVC Security (Windows Authentication)

Security is one of the most important things in any application irrespective you develop
them in any technology, same holds true from MVC.
Before we start this lab one thing we need to understand that MVC at the end of the day
stands on ASP.NET engine. In other words MVC uses the same security methods which
are applicable for ASP.NET i.e. Windows and Forms authentication.
Note: - In this article we will not be looking in to fundamentals of Windows and Forms
authentication. In case you are new to ASP.NET forms authentication you can read this
article link http://www.codeproject.com/Articles/98950/ASP-NET-authentication-andauthorization
So lets try to implement windows authentication in MVC 3 application.
Now, one way to implement Windows authentication is by creating a project using the
Intranet Application option. As said previously, the Intranet Application option is enabled
to authenticate users from the Windows Active Directory.

For now we will not use that option, lets use the empty application option and create
from scratch so that we can understand better.

Step 1: Enable Windows authentication

One you have created a project the first step is to enable Windows authentication using
the tag shown below. Yes, this code is the same as we did for ASP.NET.
Collapse | Copy Code

<authentication mode="Windows"/>
<authorization>
<deny users="?"/>
</authorization>

Step 2: Just some defects

In MVC 3 template, there is a small defect. It runs forms authentication by default. Set
the below tags in the appsettings tag to avoid problems. It took me two hours to figure
this out, what a waste!
Collapse | Copy Code

<add key="autoFormsAuthentication" value="false" />

<add key="enableSimpleMembership" value="false"/>

Collapse | Copy Code

<appSettings>
<add key="webpages:Version" value="1.0.0.0"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
<add key="autoFormsAuthentication" value="false" />
<add key="enableSimpleMembership" value="false"/>
</appSettings>

Step 3: Apply Authorize tags on your controllers / actions

Once you have enabled Windows Authentication use the [Authorize] tag and specify
which users can have access to the controllers and actions. You can also specify the roles
if you wish.
Collapse | Copy Code
[Authorize(Users= @"WIN-3LI600MWLQN\Administrator")]
public class StartController : Controller
{
//
// GET: /Start/
[Authorize(Users = @"WIN-3LI600MWLQN\Administrator")]
publicActionResult Index()
{
return View("MyView");
}
}

Please note the user should be present in your Windows AD or local user group. Like in
my case Administrator is present in my local Windows user group.

Step 4: Create setup

Now its time to go and publish this solution on IIS so that we can test if Windows
authentication works. In order to do the same we need to have the necessary MVC DLLs
also posted to the server. So right click on the project and select Add deployable
dependencies.

In the next screen it will prompt which dependencies you want to include. For now I
have the Razor view so I have selected both the options.

Once you can see the dependent DLLs been added to the project.

Step 5: Create IIS application

The next step is to create an IIS application with only Windows authentication enabled as
shown in the below figure.

Step 6: Publish
Once you have created the IIS application, its time to publish your application to the web
application folder. So click on Build and Publish as shown in the below figure. I have
used File system as the publish method, you can use your own choice.

Step 7: Run the controller and action

Finally run the controller and action and see how the Windows authentication box pops
up for user ID and password.

If credentials are entered appropriately, you should be able to see the view.

Lab 14:- MVC Security (Forms Authentication)

In the previous lab we saw how to do windows authentication. Windows authentication is
great for intranet websites. But as soon as we talk about internet websites, creating and
validating users from Windows ADS / work groups is not a feasible option. So in those
kind of scenarios Forms authentication is the way to go.

Step 1:- Define the Login page controller

The first thing we need to do is define the controller which will invoke the login view.
So I have created a simple index action which invokes a view called as Index. This index
view will take inputs like username and password.

Collapse | Copy Code

public ActionResult Index(){return View();}

Step 2:- Create the index view

The next step is to create the login form which will take username and password. To
create the form I have used razor view and the HTML helper classes. In case you are new
to HTML helper classes please see Day 1 lab.
This HTML form is making a post to the action Login which is currently in Home
controller and its using HTTP POST method. So when the user presses submit, it will hit
the Login action. The next thing after this is to create the Login action which will
validate the username and password.
Collapse | Copy Code
@{Html.BeginForm("Login", "Home", FormMethod.Post);}
User
Name :- @Html.TextBox("txtUserName") <br />
Password :@Html.TextBox("txtPassword") <br />
<input type="submit"
value="Login" /> <br />
@{ Html.EndForm(); }

Step 3:- Validate credentials

In the login action the first thing we need to do is check if the user is proper or not. For
now I have hardcoded the validation of username and passwords. This can always be
replaced by querying from SQL Server or from some other source.
Collapse | Copy Code
if ((Request.Form["txtUserName"] == "Shiv") &&
(Request.Form["txtPassword"] == "Shiv@123")){..}

Once we have checked the credentials the next step is to use the famous
FormsAuthentication class and set the cookie saying that this user is proper.
So that in the next request when the user comes he will not be validated again and again.
After the cookie is set redirect to the About view or else just stand on the Index
view.
Collapse | Copy Code
public ActionResult Login(){if ((Request.Form["txtUserName"] == "Shiv")
&& (Request.Form["txtPassword"] == "Shiv@123"))
{
FormsAuthentication.SetAuthCookie("Shiv",true);
return View("About");}else{
return View("Index");}

My about view is just a simple page as shown below.

Collapse | Copy Code
@{
Layout = null;}<!DOCTYPE html><html><head>
<title>About</title></head><body>
<div>
</div></body></html>

This is About us

Step 4:- Authorize attribute

We also need to use put the [Authorize] attribute on controllers which we want to
restrict from unauthorized users. For instance you can see in the below code snippet,
Default and About actions are decorated using [Authorize] attribute.
So if any user who is unauthorized, directly hits any one of these controllers they will be
sent back to the Index view i.e. back to Login screen.
Collapse | Copy Code

[Authorize]public ActionResult Default(){ return View();}

[Authorize]public ActionResult About(){return View();}

Step 5:- Change Web.config file

Finally we need to make the famous change in the web.config , i.e. enabling Forms
security. The most important part in the below code snippet to note is the LoginUrl
property.

Normally in ASP.NET this login URL points to an ASP.NET page, but in MVC it points
to an action i.e. /Home/Index. This action invokes the login credentials page.
Collapse | Copy Code
<authentication mode="Forms">
<forms loginUrl="~/Home/Index"
timeout="2880"/>
</authentication>

Step 6:- See Forms authentication in action

With those above 5 steps you are now completely ready to go. If you now try to call the
About action directly, it will show up the below screen. This test proves that Forms
authentication is working. It has automatically detected that the user is not valid and
redirected the same to the Index action which further invoked the Login form.