Click here to Skip to main content
15,861,125 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

 
QuestionGreat Pin
MdRasel6-Mar-16 10:26
MdRasel6-Mar-16 10:26 
GeneralAwsome Article Pin
mrpostiga29-Apr-14 23:46
mrpostiga29-Apr-14 23:46 
QuestionUseful article for novice Pin
SankarHarsha16-Feb-14 19:25
SankarHarsha16-Feb-14 19:25 
GeneralMy vote of 5 Pin
rkbindazz9-Jul-13 23:45
rkbindazz9-Jul-13 23:45 
GeneralUseful Article Pin
jigneshprjpt1-May-13 22:47
professionaljigneshprjpt1-May-13 22:47 
QuestionMy vote of 5+ Pin
alexrinconz8-Apr-13 8:29
alexrinconz8-Apr-13 8:29 
GeneralMy vote of 4 Pin
AlmaVqz13-Mar-13 11:34
AlmaVqz13-Mar-13 11:34 
GeneralMy vote of 4 Pin
Subramanyam Reddy12-Feb-13 22:23
Subramanyam Reddy12-Feb-13 22:23 
QuestionMy Vote Of 3 Pin
Alireza_13623-Feb-13 3:49
Alireza_13623-Feb-13 3:49 
GeneralMy vote of 5 Pin
Renju Vinod24-Jan-13 18:01
professionalRenju Vinod24-Jan-13 18:01 
GeneralThanks Pin
magiccoder1-Jan-13 23:57
magiccoder1-Jan-13 23:57 
GeneralMy vote of 5 Pin
Unque21-Dec-12 1:53
Unque21-Dec-12 1:53 
GeneralMy vote of 5 Pin
Ricardo Ostos6-Dec-12 11:37
Ricardo Ostos6-Dec-12 11:37 
GeneralMy vote of 4 Pin
majisuman4-Dec-12 18:51
majisuman4-Dec-12 18:51 
Generalvery very thanks Pin
AntonyAugustine12328-Nov-12 6:31
AntonyAugustine12328-Nov-12 6:31 
QuestionThanx Pin
stacy12345614-Nov-12 23:43
stacy12345614-Nov-12 23:43 
Questionthanks.. great article Pin
Talha Malik8-Nov-12 17:13
Talha Malik8-Nov-12 17:13 
QuestionRe: MVP architecture Pin
khalithbasha17-Oct-12 2:40
khalithbasha17-Oct-12 2:40 
Hello mam,



MVC article shared by you is very useful for me.. I need to know MVP asp.NET pls help me.. Post it as soon as possible.
Else mail to tis id bashatec@ymail.com

Regards,
Khalith Basha
GeneralMy vote of 5 Pin
khalithbasha17-Oct-12 0:45
khalithbasha17-Oct-12 0:45 
QuestionAbout MVC 3 Pin
Debojyoti Roy Chowdhury31-Aug-12 19:26
Debojyoti Roy Chowdhury31-Aug-12 19:26 
GeneralMy vote of 5 Pin
Azziet21-Aug-12 20:53
Azziet21-Aug-12 20:53 
Generalthanks for sharing Pin
khin nandar win9-Jul-12 18:52
khin nandar win9-Jul-12 18:52 
SuggestionNext one! Pin
Vitaly Tomilov9-Jul-12 14:16
Vitaly Tomilov9-Jul-12 14:16 
GeneralMy vote of 5 Pin
Rahul Rajat Singh27-Jun-12 16:41
professionalRahul Rajat Singh27-Jun-12 16:41 
GeneralMy vote of 5 Pin
Aditya Bhushan Chaturvedi8-May-12 1:02
professionalAditya Bhushan Chaturvedi8-May-12 1:02 

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.