If you want a video-version of this article, watch here on YouTube:

Watch the Video: MVC Architecture in Web Technology

Introduction to the MVC Architectural Pattern

The MVC Pattern is used to structure the presentation layer of an application. To understand MVC architecture, let’s say, we have a web application for a book catalog that’s hosted on a server computer. And further assume that this application is built using an MVC framework like ASP.NET Core MVC, or Ruby on Rails, or Spring MVC. So, the application follows the MVC architectural pattern.

Models, Views, and Controllers Explained

Our web app is divided into 3 sets of components: Models, Views, and Controllers:

MVC Pattern

Now, let’s say a user wants to retrieve a list of books stored on our server. He opens his web browser on a computer, types in the URL to our application, and hits ENTER. The web browser will then send an HTTP request to our server. This request may contain information such as query string parameters.

Next, on our server, the Controller, which is the C part of MVC, receives the request. The controller handles the incoming request and decides what to do with it.

The controller then talks to the Model. The model is the component in MVC that is responsible for getting the required data and executing any business logic necessary. So the model may talk to a data store such as a database, get the required data (such as the books, in our case), and then it passes this data to the controller.

The controller takes this data and passes it to the View. The view is the component in MVC that is responsible for producing the UI (User Interface). The view takes the data it got from the controller and uses it to produce the UI—which, for a web application, it is simply HTML markup with data contained in it.

This HTML markup is added to the HTTP response, which is sent to the client computer. The browser takes the HTML markup in the HTTP response and renders the final web page:

Model View Controller

The MVC Advantage

With the MVC pattern, each component has a distinct responsibility. This clear separation is the primary advantage.

  • The Model: Only responsible for data access logic and any business logic.
  • The View: Its sole purpose is to provide the User Interface (UI) that needs to be displayed to the user.
  • The Controller: Responsible for handling user interaction and coordinating between the model and the view.

Separation of Concerns (SoC)

With the MVC pattern, we achieve a clear Separation of Concerns (SoC). The code becomes more organized, easier to maintain, and easier to test.

When I say each component in MVC is responsible for doing only one thing, I am referring to the Single Responsibility Principle (SRP). This principle is one of the 5 SOLID principles of Object-Oriented Design (OOD).

Learn More About SOLID

If you’re interested in learning about all the SOLID principles with examples, watch my video on YouTube:

Watch the Video: SOLID Principles with Examples