Design Pattern (1), MVC

Note: this article is published on 04/21/2021.

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

Design Pattern (0), Overview
Design Pattern (1), MVC --- this article
Design Pattern (2), MVVM
Design Pattern (3), Singleton
- Design Pattern (3-1), Differences between Singleton and Static Class
Design Pattern (4), Desposal
Design Pattern (5), Dependency Injection

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

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

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

using System;
using System.Data.Entity;
namespace MvcMovie1.Models
{
public class Movie
{
public int ID { get; set; }
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
}
public class Movie1DBContext : DbContext
{
public DbSet<Movie> Movies { get; set; }
}
}

Controller

Reference from Model, also
Reference from View (each action referenced from a view page, e.g.: Index <= Index.chtml)

using System.Web.Mvc;
using MvcMovie1.Models;
namespace MvcMovie1.Controllers
{
public class MoviesController : Controller
{
private Movie1DBContext db = new Movie1DBContext();
// GET: Movies
public async Task<ActionResult> Index()
{
return View(await db.Movies.ToListAsync());
}
}
}

View

Reference from Model

@model IEnumerable<MvcMovie1.Models.Movie>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Title)
</th>
<th>
@Html.DisplayNameFor(model => model.ReleaseDate)
</th>
<th>
@Html.DisplayNameFor(model => model.Genre)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.ReleaseDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.Genre)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID })
</td>
</tr>
}
</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,

protected void txtAccount_TextChanged(object sender, EventArgs e)
{
txtAccount.Text = account.Amount.ToString();
}

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

protected void txtAccount_TextChanged(object sender, EventArgs e)
{
if(account.Amount > 300)
{
txtAccount.Text = account.Amount + ............;
}
else
{
txtAccount.Text = account.Amount + ............;
}
}

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

The MVC Pattern and ASP.NET MVC - Back to Basics --- MVC History
Overview of ASP.NET Core MVC --- MS
MVC Design Pattern in ASP.NET Core --- tektutorialshub
ASP.NET MVC Architecture --- tutorialsteacher
ASP.NET Patterns every developer should know - ASP.NET tutorial - developer Fusion
Introducing MVC#: A Model View Presenter Framework for .NET Platform (c-sharpcorner.com)