What is MVC? How does it work? Let’s dissect it

In this article, we will discuss:

  • What is MVC?
  • How does it work?

What is the MVC

MVC consists of three basic parts — the Model, the View and the Controller. It is an architectural design pattern for implementing the user interface layer of an application. A typical real-world application typically has the following layers:

  • User presentation layer
  • Business logic processing layer
  • Data access read layer

The MVC design pattern is typically used to implement the user interface layer of an application.

How MVC works

Let’s see how the MVC design pattern works with the case. Suppose we want to query the details of a particular employee (that is, the employee with ID 1) and display those details on a web page in an HTML table, as shown below.

So, from the Web browser we make a request with a URL like this:

http://JoeZ.com/employee/details/1
Copy the code

Here’s what the picture above means:

  • When our request arrives at the server, as a Controller in MVC design mode, we receive the request and process it.
  • The Controller creates the Model, which is a class file that presents the data.
  • In Molde, in addition to the data itself, the Model also contains logical information after querying the data from the underlying data source, such as a database.
  • In addition to creating the Model, the controller selects the View and passes the Model object to the View.
  • The view is only responsible for rendering Modle’s data.
  • The view generates the HTML needed to display the model data, the employee data that the Controller provides to it.
  • This HTML is then sent across the network and finally presented to the user who made the request.

Model = Model

So, in the current case, Model is made up of the Employee class and the EmployeeRepository class that manages the Employee data, as shown below

public class Employee { public int Id { get; set; } public string Name { get; set; } public string DepartmentName { get; set; } } public interface IEmployeeRepository { Employee GetEmployee(int id); void Save(Employee employee); } public class EmployeeRepository : Throw new NotImplementedException(); IEmployeeRepository {public Employee GetEmployee(int ID) {throw new NotImplementedException(); } public void Save(Employee Employee) {throw new NotImplementedException(); }}Copy the code

We use the Employee class to hold Employee data, and the EmployeeRepository class is responsible for querying and saving Employee information to the database. If you want to generalize a Model, it is the class in MVC that contains a set of data and the logical information that manages that data. The class representing the data is the Employee class, and the class managing the data is the EmployeeRepository class.

If you want to know why we use the IEmployeeRepository interface? Can I use the EmployeeRepository class without an interface?

The answer is yes, but the reason we use interfaces is because interfaces allow us to use dependency injection, and dependency injection helps us create systems that are low coupling and easy to test.

The View – View

The View in an MVC should only contain the logic to display the Model data that the Controller provides to it. You can think of the view as an HTML template. For example, we want to display Employee data in an HTML table. In this case, the view and the Employee object together form a presentation. The Employee object is the model that passes Employee data to the view. The view’s sole purpose is to display employee data in an HTML table. This is the code in the view.

@model EmployeeManagement.Model.Employee <! DOCTYPE HTML > < HTML > < head > < title > employee details page < / title > < / head > < body > < table > < tr > < td > Id < / td > < td > @ model. The Id < / td > < / tr > < tr > < td > Name < / td > < td > @ model. The Name < / td > < / tr > < tr > < td > department < / td > < td > @ model. The DepartmentName < / td > < / tr > < / table > < / body > < / HTML >Copy the code

In MVC, the View is only responsible for rendering model data. There should be no complex logic in views. The logic in the view must be minimal and small, and it must only be used to render data. If you encounter a point where the logic is too complex, consider using ViewModel or View Component. View Components is a new feature in this version of MVC.

The Controller Controller

When a request from the browser arrives in our application, as the controller in the MVC, it handles the incoming HTTP request and responds to the user’s actions.

In this case, the user has made a request to the URL (/ Employee/Details /1), so the request is mapped to the Details method in the EmployeeController, passing it the ID of Employee. This mapping is done by routing rules defined in our Web application.

public class EmployeeController:Controller { private IEmployeeRepository _employeeRepository; public EmployeeController(IEmployeeRepository employeeRepository) { _employeeRepository = employeeRepository; } public IActionResult Details(int id) { Employee model = _employeeRepository.GetEmployee(id); return View(model); }}Copy the code

As you can see, from the code in the Details method, the controller generates the Model, which in this case is the Employee object. To retrieve Employee data from an underlying data source, such as a database, the controller uses the EmployeeRepository class.

Once the controller constructs the Employee model object with the required data, it passes the Employee model object to the view. The view then generates the HTML needed to display the Employee data that the Controller provides to it. This HTML is then sent over the network to the user who made the request.

summary

MVC is an architectural design pattern used to implement the user interface layer of an application

  • Model: A class that contains a set of data and the logical information that manages that data.
  • View: Contains display logic for displaying data in the model that the Controller provides to it.
  • Controller(Controller): Handles Http requests, invokes the model, please select a view to render the model.

As you can see, in the MVC design pattern, we can clearly separate concerns and let them do their job. Each component has a very specific task to do.