Click here to Skip to main content
Click here to Skip to main content

ASP.NET MVC Overview

By , 7 May 2011
Rate this:
Please Sign up or sign in to vote.

Introduction

ASP.NET MVC is one of the methods of developing ASP.NET applications. In this article, we will go through the overview of ASP.NET MVC by creating a simple application.

ASP.NET MVC Framework is Microsoft’s Web Application development framework, the other one being traditional webforms framework.

MVC or Model View Controller is a design pattern that addresses the separation of concerns(Soc) which is the process of identifying and separating the application into distinct parts like UI, Logic and Data Access.

Soc has proven to be useful in the design of web applications. Keeping the view separate from the other parts of the application means that we can easily change the view without affecting the rest of the application.

Similarly, if we want to change the main application logic, we just need to change the controller.

ASP.NET MVC is an implementation of the MVC design pattern. The framework helps Test Driven Development which is a method of development in which Unit Test Cases are written before the rest of the application.

The above diagram shows the relationship between the MVC Framework and the .NET Framework. Observe that the Web Forms and MVC are both built on top of ASP.NET Framework.

While building web applications, developers can either choose the web forms model or the MVC model depending on the requirements of the application.

An MVC application consists of Model, View and Controller at its core:

  1. Model: Consists of the data access logic and the classes that represent the objects in the application domain (Business Objects)
  2. View: A view contains HTML markup
  3. Controller: Consists of the main application flow logic

Let’s start with creating simple MVC application to understand the basics of the MVC application. We will start by creating a blank ASP.NET MVC application.

Once the web application is created, we will add the functionality to make it work.

Adding the Controller

For adding the controller, we will right click the controllers folder and select Add -> Controller. We will type the name NamesController in controller name dialog.

Note that the Controller name must end with Suffix Controller. Doing so creates a controller with the default code. We have renamed the action as in the following code.

//public class ProductsController : Controller
    //{
    //    //
    //    // GET: /Names/

    //    public ActionResult Electronics()
    //    {
    //        ViewData["Message"] = "Electronics Products Listing";
    //        return View();
    //    }
    //}

Here NamesController is the name of our Controller. It inherits from System.Web.Mvc.Controller Framework class. View is a method defined in the base controller class.

Controller is just a normal class that contains action methods which is a non static public method defined in the Controller class.

A controller action is invoked in response to the requested URL like Products.

We will see later how URLs map to the Actions defined in the controller class.

A controller action always returns an action result which determines the response returned to the browser. In the above code, the action returns viewresult which represents an ASP.NET view.

Few of the actionresults are:

  • ViewResult - Represents the HTML for the view
  • RedirectResult - Represents Redirect to another controller action
  • ContentResult - Represents RAW URL sent to the browser
  • EmptyResult - Represents that no result is returned by the action

Typically, we call the method defined in the base controller class whose return type is the appropriate view instead of directly returning the action result.

To invoke the above action, we just need to type the following in the browser Names/Index.

If we want to add another action to the controller, we just need to add another public method to the controller. We can also specify the name of the view explicitly as:

return View("index");

The above code will return the index view instead of returning the default view (which in this case is also index). Now that we have our controller in place, let us create our first view.

View: Views are responsible for rendering the Interface on the browser. To create a view in the controller, we right click on the action and select Add View.

We will leave the default options selected in the create new view dialog. This creates a new view with two content elements. In the first content, we place the content we want to appear in the title, while in the second content we place the content we want to appear in the body of an HTML page. We will replace the second content control with the following:

 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2> <%=ViewData["Message"]  %></h2>
</asp:Content> 

Remember that we have assigned the ViewData property in the Controller’s Index action method. View data is a dictionary object used to pass the information between the controller and the view. Here, we are using the view data property to display the message in the view.

Routing

In traditional web applications, the URL is hardwired with the application code that gets executed or resource that is requested. URL Routing decouples the URL with the application code.

URL ----------> ROUTING ----------> APPLICATION LOGIC

One of the advantages of this decoupling is that it makes the URL more user friendly since we can give more meaningful names to the URL. For example, instead of using something like ListProduct.aspx, we can use simply Products which is more meaningful to the end user.

Routing defines a URL pattern that should match to access the application.

We normally define the routes in the global.asax file since it contains the application life cycle events. By default, routes are defined in the RegisterRoutes method which is called from Application_Start event.

  routes.MapRoute(
		"Default",
                	"{controller}/{action}/{id}",
                	new { controller = "Products", action = "Electronics",
		id = UrlParameter.Optional }
            );

The second parameter in the MapRoute method matches all the URLs that satisfy the above pattern e.g. {Controller}/{Action}/{id} and the appropriate Controllers action method is called for the matched URL.

License

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

About the Author

Ashish__Shukla
Technical Lead
India India
I have a keen interest in technology and software development.I have worked in C#,ASP.NET WebForms,MVC,HTML5 and SQL Server.I try to keep myself updated and learn and implement new technologies.
Please vote if you like my article ,also I would appreciate your suggestions.
Please use the following for more information code-compiled
Follow on   Twitter

Comments and Discussions

 
QuestionCode explaination PinmemberMember 99637861-Jan-14 1:31 
QuestionCheck the following article. PinmemberAshish Shukla - Software Developer13-Oct-13 7:50 
GeneralMy vote of 5 PinmemberRahul (Software Engineer)8-Oct-13 20:29 
QuestionHave you worked in headstrong??? Pinmemberrakesh.aset19-Dec-12 18:51 
GeneralMy vote of 4 PinmemberRavider5-Dec-12 19:29 
GeneralMy vote of 5 PinmemberChristiaan Rakowski7-Nov-12 21:32 
GeneralMVC Overview Pinmembermitu sinha28-Oct-12 22:46 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140421.2 | Last Updated 7 May 2011
Article Copyright 2011 by Ashish__Shukla
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid