Post
Ask Question

Design Pattern (1), MVC

These will be a series of articles about Design Patterns. We start from MVC Pattern:

Introduction

 
The discussions in this article will be as following,
  • History
  • What is MVC Pattern
  • Why is MVC: Separate of Content by MVC

A: History

 
We talk about the Design pattern history because since the pattern as an architectural concept introduced in 1977, and design patterns gained popularity by the book of "Gang of Four" in 1994 as a main stone, the MVC design pattern was introduced by Trygve Reenskaug in 1979, that is a pioneer work in the design pattern field.
 
A-1: Design Pattern[ref]
 
"Patterns originated as an architectural concept by Christopher Alexander as early as 1977. In 1987, Kent Beck and Ward Cunningham began experimenting with the idea of applying patterns to programming – specifically pattern languages – and presented their results at the OOPSLA conference that year.
 
"Design patterns gained popularity in computer science after the book Design Patterns: Elements of Reusable Object-Oriented Software was published in 1994 by the so-called "Gang of Four" (Gamma et al.), which is frequently abbreviated as "GoF". That same year, the first Pattern Languages of Programming Conference was held."
 
A-2: MVC Pattern[ref]
 
"Trygve Reenskaug is attributed with the formulation of the Model View Controller pattern in 1979 while working at XEROX’ Palo Alto Research Center (PARC). You can refer to the original paper here, where it was originally referred to as Thing-Model-View-Controller. MVC was developed to solve the problem of users controlling large and complex data sets. The following rather unique image explains the main purpose of MVC – to bridge the gap between a User’s mental Model and the digital model that exists in the computer (original source)."
 

B: What is MVC

 
B-1: Understanding MVC
 
MVC stands for Model, View, and Controller. MVC separates an application into three components - Model, View, and Controller.
  • Model: What --- Data
  • View: What Look like --- Format (with data)
  • Controller: How --- operation
The following image is from the original author (Trygve Reenskaug) of MVC to explain the MVC Design Pattern and its purpose:
 
Computer
 
 
We may understand this from a restaurant example,
 
Restaurant
 
 
Where,
  • Food: What the restaurant need to supply to customers
  • Dish: Container holding the Foods
  • Waitress: Deliverer doing the delivery job
B-2: Conceptual Model
 
Model View Controller in ASP.NET Core
 
Each of these layers has very specific set of responsibility.
  • Model: Contain Data and Business logic.
  • View: Presenting content through the user interface.
  • Controller: Work with the model, Select a view to render, And handle user interaction
Model View Controller Pattern in ASP.NET MVC Core
 
B-3: Physical Model
 
MVC Pattern
 
This diagram is from Microsoft,  that shows the three main components and which ones reference the others, i.e., this diagram is showing the dependencies of MVC. That is the reason, the arrowhead between View and Model is from View to Model (View got reference from Model), instead of opposite like a lot of Diagram showing.
 
NOw we show the dependencies with real code: an example of movie entity with controller and view:
 
Model
 
No reference from either Controller or View
  1. using System;  
  2. using System.Data.Entity;  
  3.   
  4. namespace MvcMovie1.Models  
  5. {  
  6.     public class Movie  
  7.     {  
  8.         public int ID { get; set; }  
  9.         public string Title { get; set; }  
  10.         public DateTime ReleaseDate { get; set; }  
  11.         public string Genre { get; set; }  
  12.         public decimal Price { get; set; }  
  13.     }  
  14.   
  15.     public class Movie1DBContext : DbContext  
  16.     {  
  17.         public DbSet<Movie> Movies { get; set; }  
  18.     }  
  19. } 
Controller
  • Reference from Model, also
  • Reference from View (each action referenced from a view page, e.g.: Index <= Index.chtml)
  1. using System.Web.Mvc;  
  2. using MvcMovie1.Models;  
  3.   
  4. namespace MvcMovie1.Controllers  
  5. {  
  6.     public class MoviesController : Controller  
  7.     {  
  8.         private Movie1DBContext db = new Movie1DBContext();  
  9.  
  10.         // GET: Movies  
  11.         public async Task<ActionResult> Index()  
  12.         {  
  13.             return View(await db.Movies.ToListAsync());  
  14.         }  
  15.     }  
  16. } 
View
 
Reference from Model
  1. @model IEnumerable<MvcMovie1.Models.Movie>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6.   
  7. <h2>Index</h2>  
  8.   
  9. <p>  
  10.     @Html.ActionLink("Create New", "Create")  
  11. </p>  
  12. <table class="table">  
  13.     <tr>  
  14.         <th>  
  15.             @Html.DisplayNameFor(model => model.Title)  
  16.         </th>  
  17.         <th>  
  18.             @Html.DisplayNameFor(model => model.ReleaseDate)  
  19.         </th>  
  20.         <th>  
  21.             @Html.DisplayNameFor(model => model.Genre)  
  22.         </th>  
  23.         <th>  
  24.             @Html.DisplayNameFor(model => model.Price)  
  25.         </th>  
  26.         <th></th>  
  27.     </tr>  
  28.   
  29. @foreach (var item in Model) {  
  30.     <tr>  
  31.         <td>  
  32.             @Html.DisplayFor(modelItem => item.Title)  
  33.         </td>  
  34.         <td>  
  35.             @Html.DisplayFor(modelItem => item.ReleaseDate)  
  36.         </td>  
  37.         <td>  
  38.             @Html.DisplayFor(modelItem => item.Genre)  
  39.         </td>  
  40.         <td>  
  41.             @Html.DisplayFor(modelItem => item.Price)  
  42.         </td>  
  43.         <td>  
  44.             @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |  
  45.             @Html.ActionLink("Details", "Details", new { id=item.ID }) |  
  46.             @Html.ActionLink("Delete", "Delete", new { id=item.ID })  
  47.         </td>  
  48.     </tr>  
  49. }  
  50.   
  51. </table> 

C: Why is MVC: Separate of Content by MVC

 
In the early stage of Web development, such as ASP age, the front end HTML code was merged with Server Processing Script, usually VBScript, and Client-Side script, usually, JavaScript together.
 
When web development evolved into .NET age, the ASP.NET Web Application separates a .ASPX page and a Page behind (C# or VB code). This efficiently separates the client-side development and server-side processing.  However, in the code behind part, it still mixes the data (and business logic) with front-end demonstration action together.
 
For example, 
  1. protected void txtAccount_TextChanged(object sender, EventArgs e)  
  2. {  
  3.     txtAccount.Text = account.Amount.ToString();  
  4. } 
For this code,the front end format and back end data is mixed together with operations:
  • on the left, txtAccount.Text is to assign value to a front end text box (format), while
  • on the right hand, it is an account class to bring the data of Amount in.
  • Combining the back end data with front end demonstration together, we could view it controlled by a "controller". 
The code behind is only for data binding or presentation purpose, it should not include any business logic.  However, developer is easier to put some business related code into code behind, such as
  1. protected void txtAccount_TextChanged(object sender, EventArgs e)    
  2. {   
  3.     if(account.Amount > 300)
  4.     {
  5.          txtAccount.Text = account.Amount + ............;
  6.     }
  7.     else
  8.     {
             txtAccount.Text = account.Amount + ............;
  9.     }   
  10. }   
finally, make a "broad presentation layer" mixing business logic and presentation operation together. 
Previously, what we did is to split this too "broad presentation layer" into two: presentation and application logic. Then we have so-called three tier architecture. I would say, the three tier architecture is a separation of content, in concept, we could say, it followed the MVC model, but not exactly MVC model that the controller was not clearly separated out. And furthermore, it was just a concept pattern, it is not built into the Visual Studio.
 
 
That is the reason, I believe, Microsoft introduced the ASP.NET MVC module into the Visual Studio, it makes developer work much easier: directly using the MVC module instead of making a lot of more work to develop some MVC similar one by themselves.
 
Finally, we will give a perfect example of the separation of data and view.  We know, Visual Studio Web API module is based on MVC module, and similar to MVC module without the VIEW. Actually, there IS a view (format).  Let us examine the default Web API Core Web API, the output could be in JSON format by, say, Firefox browser:
 
 
Or could be Text format like this,
 
 
They are actually the VIEW of the Web API, i.e., the format with data, that is separated from the data and controller.
 

Summary

 
This article discussed several aspects of MVC design pattern with understanding and examples.
 
Reference


Similar Articles