Click here to Skip to main content
15,861,172 members
Articles / Web Development / ASP.NET

Introduction to ASP.NET MVC 3

Rate me:
Please Sign up or sign in to vote.
4.77/5 (79 votes)
28 Apr 2011CPOL4 min read 200.3K   127   43
Introduction to ASP.NET MVC 3 framework and how to create an application using ASP.NET MVC 3

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.

1.png

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.

2.png

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

3.png

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:

4.png

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.

5.png

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.

6.png

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

C#
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:

C#
public ActionResult About()
{
    ViewBag.ContactPerson = "George MAthew";
    ViewBag.ContactNumber = "91-99444444000";
    return View();
}

This data will be accessed in about.cshtml as:

HTML
@{    
   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 won’t throw any exception, in case of a wrong dynamic property reference.

Now, our About tab looks like:

7.png

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:

C#
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:

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

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

Now, our About tab looks like:

8.png

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.

9.png

Conclusion

In this article, we discussed about the ASP.NET MVC framework, how to create a basic MVC application and discussed about the Controller to View communication. We have a lot more to discuss in MVC like the Content folder holding all images and styles, Scripts folder with jQuery scripts and MVC detail. We will discuss the topics in detail later.

History

  • 28th April, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect TCS
India India
I have over 10 years of experience working on Microsoft Technologies. I am carrying the passion on Microsoft technologies specifically on web technologies such as ASP.Net, HTML5, jQuery and Ajax. My interests also include TFS, Azure, Windows 8, Visual Studio 2010. Technology adoption and learning is my key strength and technology sharing is my passion.

Microsoft MVP: Connected Service Developer

Comments and Discussions

 
QuestionGood Pin
paletiramprasad12-Feb-12 19:29
paletiramprasad12-Feb-12 19:29 
GeneralMy vote of 5 Pin
Sridhar Patnayak23-Jan-12 6:21
professionalSridhar Patnayak23-Jan-12 6:21 
QuestionWhen should I use the normal web form Vs MVC? Pin
SudeepPradhan15-Jan-12 20:31
SudeepPradhan15-Jan-12 20:31 
AnswerRe: When should I use the normal web form Vs MVC? Pin
Zoltán Zörgő23-Apr-12 8:36
Zoltán Zörgő23-Apr-12 8:36 
GeneralMy vote of 5 Pin
ismail aakhil8-Jan-12 2:14
ismail aakhil8-Jan-12 2:14 
GeneralMy vote of 5 Pin
saxenaabhi630-Nov-11 17:08
saxenaabhi630-Nov-11 17:08 
GeneralMy vote of 4 Pin
Amol_27101982, India21-Nov-11 2:24
Amol_27101982, India21-Nov-11 2:24 
GeneralMy vote of 5 Pin
Kerem Kat17-Nov-11 6:09
Kerem Kat17-Nov-11 6:09 
maybe need a little English grammar and syntax check Smile | :)
GeneralNice starter Pin
BulbulAhmed31-Oct-11 2:30
BulbulAhmed31-Oct-11 2:30 
GeneralMy vote of 5 Pin
usermeister1-Jul-11 15:28
usermeister1-Jul-11 15:28 
GeneralMy vote of 5 Pin
Shivprasad koirala15-Jun-11 5:02
Shivprasad koirala15-Jun-11 5:02 
GeneralMy vote of 5 Pin
Member 201025622-May-11 20:18
Member 201025622-May-11 20:18 
GeneralMy vote of 5 Pin
Rhuros13-May-11 0:32
professionalRhuros13-May-11 0:32 
GeneralMy vote of 5 Pin
Monjurul Habib28-Apr-11 7:18
professionalMonjurul Habib28-Apr-11 7:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.