Understanding the Model View Controller (MVC)

Novice to MVC: Read this

This article is meant for beginners of the Model-View-Controller (MVC) pattern (do not be confused with ASP.NET MVC; if you want to learn ASP.NET MVC, then please read this article). If you're a novice in this framework, then this article will surely help you. I will cover most of the parts of the MVC framework and will also explain how to implement this framework in your applications.

Understanding the Model-View-Controller

If you have already developed a few applications in the OOP model, then it would be easier for you to understand. Otherwise, you may have some tough time understanding this MVC pattern. But, don't worry, you will easily synchronize as we move further.

First of all, do not think of any other programming model or framework. Also, (as mentioned earlier) do not confuse MVC with ASP.NET MVC. This pattern is very common among other patterns of software architecture. MVC is just a term used to develop the software in a pattern such that it is divided into the following three sub-categories.

  1. Model: the data source for your application.
  2. View: your application's views, in other words the Graphical User Interface (GUI).
  3. Controller: Controller is the actual background logic for your application.

These were the three categories in which code is distributed efficiently. I will explain in further sections how application programming can be made simpler. Let us first explain the concepts of MVC, then I will walk you through the implementation of MVC in various programming languages and frameworks.

Diving into MVC

Let us first consider MVC as our subject of discussion. How can we use it and what is it actually? MVC is just a framework, architecture or a pattern, whatsoever you want to call it. It is just the model for your software development process that is targeted to maintain your source code and data sources. Also, this framework is targeted to reduce ambiguity and complexity found in enterprise software. Usually, when an application reaches an enterprise level of complexity, it is much harder to debug it.



Now, let us dissect the MVC into the following three sections and study it thoroughly.

Model

The Model is the part of the architecture that focuses on the data of the application. Your data may come through the following given methods:

  1. Database
  2. Reports
  3. Data sources such as files; JSON is a major example
  4. User input

These compose the model section for your application. The Model is responsible for updating the user interfaces and indicating a trigger to an event (if any) in the application to demonstrate that the data has now changed. Usually, these are just fancy names given to a simple model of the data. In most programming languages it can be a simple class, with a few members (trailing the properties or the attributes in the database table for the object) and a few functions to store the data in the data source and extract it. This must be kept secure and away from user interactions. Keeping it separate would help in minimizing unauthorized access attempts.

Note: The function part can also be implemented inside the controller to save the data or extract it.

View

The View is the user-interface part of the software application. All of the interface designs, such as buttons, input fields and so on, are to be added to this category. In most applications (such as web applications), HTML pages are the View whereas in other applications and frameworks other methods are used to create an interface, such as XAML files in WPF applications.

The main purpose of having a view is to get the data from the model and represent it to the user. All of the styles and other UI and UX techniques must be applied here. Views are usually called by the the controllers and returned to the users as a response after being filled up by the data from a model.

Controller

Getting to the most important part of this framework, the Controller is the actual software logic running underground. It is mostly composed of functions that your application runs, other underlying logical code for the users and such other code that must run throughout the initial stage to the very last line when the application ends.

In web applications, a controller is responsible for handling the requests coming from a user and then returns the response to the user after merging the data from the model into the required view. Although the process is similar to getting a request and returning the response. But under the hood the process is something like:
  1. A request is made.
  2. The Controller handles the request.
  3. The URL is read and then appropriate functions are triggered.
  4. Inside those functions, the Model is asked for data and the data is placed into the view.
  5. The View is then returned as a response.

The overall framework is something like the following image.



The user must be allowed to interact with the Model himself but instead a Controller must be used to connect to the Model to get the data for the user's View that would be shown to him.

As I have said earlier, the user must not be allowed to interact with the Model. The user must be provided with the required tools and buttons on the view. The View can interact with the Controller to download data (if required). This is the MVC pattern of software development. Now, in the next section, I will provide you with other helpful resources that you might find helpful.

Other material

I will provide other tools and materials for developers in a specific framework or language.

Any framework or type

This section is meant for everyone. If you're developing an application and want to implement the MVC pattern then read this section and you will understand how to develop it in your own application development process.

The default language used is C#. However, you can use your own specific language also. C, C++ and Java are quite similar to the language.

Creating a Model

Creating a model is an easy task. It is just the wrapper for your data sources that can be converted to an object and then interacted with in the application. You can think of it as a simple object.
  1. class Model   
  2. {  
  3.     public string Name   
  4.     {  
  5.         get;  
  6.         set;  
  7.     }  
  8.     public int Age   
  9.     {  
  10.         get;  
  11.         set;  
  12.     }  
  13.     public string Email   
  14.     {  
  15.         get;  
  16.         set;  
  17.     }  
  18.     public string Message   
  19.     {  
  20.         get;  
  21.         set;  
  22.     }  
  23.   
  24.     // Functions  
  25.     public static List < Model > GetData() { /* code */  
  26.     }  
  27.     public static void SaveData(List < Model > data) { /* code */  
  28.     }  
  29. }  
The preceding code is the model for your own application. It has a few attributes (from the database) and 2 functions, one to retrieve the data and another to store it.

You can now connect this with the database, file or other resource in the functions. Fill up your data using the data sources that you have right now.

Creating a View

This is a simple (another) task. It contains building up the user-interface. If you're using a web application, then you will create HTML web pages and add the required elements in the web page. The same process must be applied to software applications, where you can design the user-interface for your application and show it using back-end code.

Creating a Controller

Now for the necessary part. The Controller is the only code that runs the logic for your application, its interaction with the events and underlying operating system. What happens when your application is to be started, what should be done when your application must terminate and what happens in between them. The code for this is the Controller.
 
You can create classes that handle the startup events and also the classes that handle other interaction events with your View. The Controller also has the code to trigger the model, such as the code to trigger either one of the methods in our model (see the preceding “Creating a Model” part).

MVC in Web Applications

If you are going to develop a new web application, you can develop it in a very similar manner as discussed above. Write your code in a manner that it is categorized into the following three categories.
  1. Model
  2. View
  3. Controller

It is helpful once your application reaches an enterprise level of complexity. So, at that time you won't need to scratch your head twice to think like, “What was I thinking?”.

If (however) you are going to use ASP.NET, then there is already an MVC framework built for you with the underlying code and an IDE ready to serve your needs. For more on that for learning purposes, please read this another article of mine. That article of mine has all the required information that a beginner requires to kick-start his ASP.NET MVC Web Application development.

Offline applications

If you are using Java, then I have another major thread for the same purpose. You can read it to learn how to implement the same pattern in your Java application development. Download and try the samples included in it.

Other software languages and frameworks can also implement the MVC pattern, you just need to categorize the code of your software application.

Points of interest

That said, now I might provide you with other helpful points for secure applications and frameworks. The following might be helpful for you.

  1. The MVC pattern helps you in sorting your code and categorizing the same types of code under a single label M-V-or-C.
  2. You should never allow your user to interact with the Model. The Model contains the data or the definition for your data. If the potential user is able to interact with your application's model he might also get through the security checks. That is why to always use the Controller to validate the requests and then access the data from the model.
  3. I have used databases, JSON files and a variety of other data sources available. So your Model is capable of interacting with any kind of data source present (provided you have enough code to make it work).
  4. You can also use Ajax to run a Controller partially on the views. If you are interested in learning how to use Ajax in the MVC pattern then please read this other article of mine.
  5. The MVC pattern is a software design and development architecture. It does not require you to be in a web or offline context.

I hope this article has helped you.

Next Recommended Readings