Introduction

ASP.NET MVC framework follows the well-defined MVC pattern to create a web
application. MVC design pattern is used to separate the different parts of the application
for more scalability, extensibility and testability purposes.
One of the major challenges with normal web forms is the testability of the business
logic. Unit test of code-behind logic is very complex. Also, the extensibility of the
application required a lot of re-work on the application. ASP.NET MVC addresses the pain
points associated with the traditional web form applications.
In this article, we will discuss about how to create an MVC application and understand
the Controller, Views & Models.

MVC
MVC means Model View Controller. Controller takes care of the overall execution of a
request. Controller receives the request from the web server and identifies the data
requirements. Depending on the data requirements, Controller contacts the
corresponding Model. Model will supply the required data, which will be rendered to the
UI using a View.

For working with ASP.NET MVC, we can install the Web Platform Installer, which consists
of Visual Studio 2010 Express for coding the MVC application, SQL Server Express for
storing the data and IIS Express for hosting the application. We can download the Web
Platform Installer from Microsoft Web Platform Installer 3.0.

How to Create an ASP.NET MVC Application

Let us start our discussion by creating the first MVC application. File-> New Project and
select the ASP.NET MVC 3 Web Application template.

This will open the new ASP.NET MVC 3 Project window.

Select either Empty or Internet Application. Empty will create a blank application.
Internet application will create an application with few default pages. For our sample, I
will select the Internet Application option.
We can choose to create a test project along with our MVC application from the same
window. Also, we can choose the View Engine as ASPX or Razor. ASPX is for backward
compatibility.
Our new solution will look like:

We have different folders to hold the Controllers, Views and Models. As we selected
Internet Application, our application is a fully functional application. We can run it and
see the pages.

It opens a small application with two tabs, Home and about. Also, we have the option to
Log On, from where we can register a new User.
When you select the About tab, it goes to the HomeController and returns a View using
the About() method.About() is not specified any View name, so the controller will goes
to the Views and find the directory corresponding to the HomeController. Here also, it
uses the name of the controller to find the corresponding directory. Then, the controller
checks whether it contains any view with the name About.

We can specify a View name in the About() method like:

Collapse | Copy Code

public ActionResult About()

{
return View("Index");
}

Now, both Home and About display the same content.

Data Passing from Controller to View

Now, let us see how we can pass some information to the View from Controller. There
are two ways to pass data from Controller to View.

Using ViewBag
ViewBag is a dynamic object, where we can add any properties dynamically.

For example, if I want to pass some contact information like Name and Contact number
to About View from the Home controller, we can define it using the ViewBag as:
Collapse | Copy Code

public ActionResult About()

{
ViewBag.ContactPerson = "George MAthew";
ViewBag.ContactNumber = "91-99444444000";
return View();
}

This data will be accessed in about.cshtml as:

Collapse | Copy Code

@{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<div>
Contact person : @ViewBag.ContactPerson
Contact Number : @ViewBag.Contactnumber
</div>

Note that the dynamic properties added are not case sensitive. Also, it wont
throw any exception, in case of a wrong dynamic property reference.
Now, our About tab looks like:

Using Model
Now, let us see how we can pass data using a Model. Define a Model class and specify
the required properties. Our sample Model class looks like:
Collapse | Copy Code

namespace SampleApp.Models

{
public class ContactAddress
{
public string Address { get; set; }
public string City { get; <br />set; }
public string Country { get; set; }
}
}

Now, let us construct the Model in Controller and pass the same to our View:
Collapse | Copy Code

public ActionResult About()

{
var address = new ContactAddress()
{
Address = "Lane 21, Gachibowli",
City = "Hyderabad",
Country = "India"
};
return View(address);
}

Now, we will use the same in our View. In View, we have another object called Model,
which holds the dynamic properties like ViewBag. We can extract the model properties
using Model.
Collapse | Copy Code

@{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<div>
Contact Address: @Model.Address, @Model.City, @Model.Country
</div>

Now, our About tab looks like:

Notice that there is no intellisense support for the Model properties. We can define the
type of the expected model on top of the View, which will gives the Intellisense support
for the Model object.