ASP.NET MVC QuickStart 1: Introducing ASP.NET MVC

Objectives

In this Hands-On Lab, you will be introduced to the ASP.NET MVC framework. In particular, you will:

  • Understand key benefits of ASP.NET MVC
  • Understand what the MVC design pattern is about
  • Create an ASP.NET MVC application
  • Understand ASP.NET MVC default routing

System requirements

You must have the following items to complete this lab:

  • Microsoft Visual Studio 2008 SP1 (professional edition)
  • Microsoft ASP.NET MVC 1.0

Prequisites

You must have the following skills to understand this lab:

  • Fundamental knowledge of software development in .NET 3.5
  • Some experience in ASP.NET web development

Task 1: Understand key benefits of ASP.NET MVC

Before you begin, you should understand the main advantages of ASP.NET MVC and why it is important to adopt it in most of your projects:

  • MVC design pattern: the ASP.NET MVC framework is a modern MVC implementation
  • Extensibility: the ASP.NET MVC framework consists of a number of independent components that can be completely replaced with your own implementation if needed. Your options are:
    • Use the default implementation
    • Derive a subclass of the default implementation to tweak behavior
    • Replace a component entirely with a new implementation
  • Testability: the ASP.NET MVC framework is made to be tested using today’s testing and mocking frameworks.
  • Full control: no generated HTML that violates standards, because you are in control over the rendered HTML, scripts and markup. This also means that there is no hidden magic going on. As an example, there is no ViewState anymore, so pages are smaller and faster to load.
  • Routing system: ASP.NET MVC works with a powerful routing system that maps search-engine friendly URL’s to actions.
  • Stateless nature: embraces stateless nature of the web instead of trying to hide it and therefore avoiding complex situations.

Task 2: Understand what the MVC pattern is about

ASP.NET MVC is based on the MVC architectural pattern, which stands for Model-View-Controller, and is all about keeping things organized via separation of concerns:

MVC

This means that we have 3 areas of responsibility:

  • Model: contains the business and data logic.
  • View: is responsible for presentation logic, so this is your user interface
  • Controller: contains application logic; here we receive user input and react on it by retrieving data from the model and asking views to render themselves using this data. So the controllers act as a bridge between your model and the user interface.

As an example, if an event occurs (user clicks a button on a web page), then the controller takes action and reacts on this event by using the model to execute business and data logic (retrieving data) and asking a specific view to render itself using this data:

MVC

The goal of this separation is that each area has its own concern and concerns should never be mixed; and as a result it is possible to modify either the visual appearance of the application, the application logic or the underlying business rules without affecting the other.

Task 3: Create an ASP.NET MVC application

In this task you will create and configure an empty ASP.NET MVC application project using the MVC Visual Studio template.

Start Visual Studio 2008. Click File -> New -> Project, click the Web project type and select ASP.NET MVC Web Application. Give your project a name ‘MvcApplication1’ and location and click OK:

Create new MVC project

In a next dialog, you will get the option of creating a unit test project too. For now, check the ‘No, do not create a unit test project’ option and click OK:

Create test project

As a result, the solution and web project will be created, containing some default folders and files, structured to support the MVC pattern:

Visual studio solution

As you see, the most important folders are:

  • Controllers: contains all controller classes.
  • Models: contains all models and underlying business and data logic.
  • Views: contains all views, for example .aspx or .ascx files.
  • Shared: contains all shared views, for example master pages…
  • Scripts: contains all java script files.
  • Content: contains content files, for example images, style sheets…

If you run this, you will see this simple web application:

MVC application

Task 4: Understand ASP.NET MVC default routing

When the user types in a URL, a routing system takes care of mapping this incoming request to a specific action method of a specific controller, using a default naming convention.

This means that a URL in the form of http://localhost, http://localhost/home or http://localhost/home/index all map to an action method called ‘Index’ of a controller called HomeController. We will later see how this routing from URL to controller works and can be modified, but for now just assume that routing takes care using some default naming convention.

The controller HomeController is a normal C# class (inheriting from Controller) that is created in the Controllers folder of the project, and the action Index is a normal C# method in that HomeController class:

public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
}

When the Index action method gets executed, it returns a view which has to be rendered. Again, using the default naming convention it knows that it has to render the Index.aspx view in the Views/Home folder of the project:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent"
runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent"
runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit <a
href="http://asp.net/mvc" title="ASP.NET MVC
Website"
>http://asp.net/mvc</a>.
</p>
</asp:Content>

In this case, the controller Index action stores a string in ViewData (which is a built-in loosely typed dictionary) , and because the Index.aspx view has also access to it, this data can be used in the view. So, ViewData is a way to pass data from the controller to the view.

Note: obviously, passing data in a loosely typed way is evil. In the next lab, we will use a strongly typed way to do this!

Go to next part.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s