Skip to content

1. Introduction

The PDF of this document is available |HERE|.

The examples in this document are available |HERE|.

Here, we aim to introduce, through examples, the key concepts of ASP.NET MVC, a .NET web framework that provides a framework for developing web applications according to the MVC (Model–View–Controller) pattern.

Understanding the examples in this document requires few prerequisites. Only basic knowledge of the C# language is necessary. This can be found in the document Introduction to the C# Language at the URL [http://tahe.developpez.com/dotnet/csharp]. A case study is provided to put the knowledge gained about ASP.NET MVC into practice. It uses the Entity Framework ORM (Object-Relational Mapper). This ORM is presented in the document Introduction to Entity Framework 5 Code First, available at [http://tahe.developpez.com/dotnet/ef5cf].

The various examples in this document are available at the URL [http://tahe.developpez.com/dotnet/aspnetmvc] as a downloadable ZIP file.

This document is incomplete in many respects. To learn more about ASP.NET MVC, you can use the following references:

  • [ref1]: the book "Pro ASP.NET MVC 4" written by Adam Freeman and published by Apress. It is an excellent book. If it were available online for free and in French, this document would be unnecessary. I recommend that anyone who can do so learn ASP.NET MVC using this book. The source code for the book’s examples is available for free at [http://www.apress.com/9781430242369];
  • [ref2]: the framework’s website [http://www.asp.net/mvc]. There you will find all the materials needed for self-study. A French version is available at the URL [http://dotnet.developpez.com/mvc/];
  • the [developpez.com] website dedicated to ASP.NET [http://dotnet.developpez.com/aspnet/ ].

This document has been written so that it can be read without a computer at hand. Therefore, many screenshots are included.

1.1. The Role of ASP.NET MVC in a Web Application

First, let’s situate ASP.NET MVC within the development of a web application. Most often, it will be built on a multi-layer architecture such as the following:

  • the [Web] layer is the layer in contact with the web application user. The user interacts with the web application through web pages displayed by a browser. It is in this layer that ASP.NET MVC resides, and only in this layer;
  • the [business] layer implements the application’s business logic, such as calculating a salary or an invoice. This layer uses data from the user via the [Web] layer and from the DBMS via the [DAO] layer;
  • The [DAO] (Data Access Objects) layer, the [ORM] (Object Relational Mapper) layer, and the ADO.NET connector manage access to data in the DBMS. The [ORM] layer acts as a bridge between the objects handled by the [DAO] layer and the rows and columns of tables in a relational database. Two ORMs are commonly used in the .NET world: NHibernate (http://sourceforge.net/projects/nhibernate/) and Entity Framework (http://msdn.microsoft.com/en-us/data/ef.aspx);
  • the integration of these layers can be achieved using a dependency injection container such as Spring (http://www.springframework.net/);

Most of the examples provided below will use only a single layer, the [Web] layer:

However, this document will conclude with the construction of a multi-layer web application:

1.2. The ASP.NET MVC Development Model

ASP.NET MVC implements the MVC (Model–View–Controller) architectural pattern as follows:

The processing of a client request proceeds as follows:

  1. request - the requested URLs are in the form http://machine:port/contexte/Controlleur/Action/param1/param2/....?p1=v1&p2=v2&... The [Front Controller] uses a configuration file to "route" the request to the correct controller and the correct action within that controller. To do this, it uses the [Controller/Action] path from the URL. The rest of the URL [/param1/param2/...] consists of optional parameters that will be passed to the action. The "C" in MVC here refers to the [Front Controller, Controller, Action] chain. If the [Controller/Action] path does not lead to an existing controller or action, the web server will respond that the requested URL was not found.
  1. processing
  • The selected action can use the parameters that the [Front Controller] passed to it. These can come from several sources:
  • the [/param1/param2/...] path of the URL,
  • the [p1=v1&p2=v2] parameters of the URL,
  • parameters posted by the browser with its request;
  • when processing the user's request, the action may need the [business] layer [2b]. Once the client's request has been processed, it may trigger various responses. A classic example is:
  • an error page if the request could not be processed correctly
  • a confirmation page otherwise
  • the action instructs a specific view to be displayed [3]. This view will display data known as the view model. This is the M in MVC. The action will create this M model [2c] and instruct a V view to be displayed [3];
  1. response—the selected view V uses the model M constructed by the action to initialize the dynamic parts of the HTML response it must send to the client, then sends this response.

Now, let’s clarify the relationship between MVC web architecture and layered architecture. Depending on how we define the model, these two concepts may or may not be related. Consider a single-layer ASP.NET MVC web application:

If we implement the [Web] layer with ASP.NET MVC, we will indeed have an MVC web architecture but not a multi-layer architecture. Here, the [Web] layer will handle everything: presentation, business logic, and data access. It is the actions that will perform this work.

Now, let’s consider a multi-layer web architecture:

The [Web] layer can be implemented without a framework and without following the MVC model. We then have a multi-layer architecture, but the Web layer does not implement the MVC model.

Thus, the [Web] layer above can be implemented with ASP.NET MVC, resulting in a layered architecture with an MVC-style [Web] layer. Once this is done, we can replace this ASP.NET MVC layer with a classic ASP.NET layer (WebForms) while keeping the rest (business logic, DAO, ORM) unchanged. We then have a layered architecture with a [Web] layer that is no longer MVC-based.

In MVC, we said that the M model was that of the V view, i.e., the set of data displayed by the V view. Another definition of the M model in MVC is given:

Many authors consider that what lies to the right of the [Web] layer forms the M model of MVC. To avoid ambiguity, we can refer to:

  • the domain model when referring to everything to the right of the [Web] layer
  • the view model when referring to the data displayed by a view V

Hereinafter, the term "M model" will refer exclusively to the model of a V view.

1.3. Tools Used

Moving forward, we are using (as of September 2013) the Express versions of Visual Studio 2012:

To install the latest versions of these products, you can use Microsoft’s [Web Platform Installer] (http://www.microsoft.com/Web/downloads/platform.aspx).

Additionally, use Google’s Chrome browser (http://www.google.fr/intl/fr/chrome/browser/). Install the [ Advanced Rest Client] extension ( ). Here’s how to do it:

Image

  • the app is then available for download:

Image

  • to get it, you’ll need to create a Google account. The [Google Web Store] will then ask for confirmation [1]:
  • In [2], the added extension is available under the [Applications] option [3]. This option appears on every new tab you create (CTRL-T) in the browser.

1.4. Examples

Most of the learning examples will be limited to the web layer alone:

Once this tutorial is complete, we will present a multi-layer web application:

https://tahe.developpez.com
This tutorial written by Serge Tahé is made available to the public under the terms of the Creative Commons Attribution – Non-Commercial – ShareAlike 3.0 Unported.