Understanding The Essentials Of MVC

Introduction

In this post, we will discuss the very essentials of MVC. In most of the MVC articles, we found the definitions of MVC and a sample of one Controller, one Model, and one View or multiple. Here, we will discuss what the minimum requirement is to implement an MVC application. Do I need to have one of each Controller, Model, and View? Can I have an MVC application with only Model or only a Controller? etc… This will help us understand the actual relationship between these three elements of MVC.

We'll discuss this while doing the code of a small real time problem statement; and once we are done with all the code, we will quickly understand the theory as well. Yes,the  theory will be at the end.

To showcase the code base, we will utilize an empty MVC web application provided by Visual Studio 2013 and will add the code as required.

Problem Statement

Now, let’s take a very simple example (although the article applies to all the MVC applications, either small or big). Suppose, we have a requirement that we need to create a ContactUs page in MVC, or need to add this page in an already created MVC application.

Now think! Do we need a controller? The answer is, YES. Controller is the means through which an HTTP request will reach the application. So, we cannot avoid that. We get the point that we always need Controllers to create an MVC application. We will similarly discuss about the Model and the View as well, but for now, park these and start creating the Controller.

Start an MVC application, as directed below:





Select “Empty” as template, select “MVC” in folder references, and click on OK. No need to change any other option. This will give you an MVC folder structure, already created, with no Controller, Model, or View. Those, we will create from scratch.



Understanding the Controller

We have already discussed that Controller is essential. But, is a Controller alone is enough to create a MVC application? Again, the answer is, YES, at least in some scenarios. 

Now suppose, you get a requirement twist; the company is getting their addresses changed and for now, we just need to display “Page is under construction” on ContactUs page.

Let’s achieve this through only a Controller. Create a Controller class ContactUsController.cs in Controllers folder, as shown below:



Add the following code in this file.



Run the application and see what we get. We get the following screen.



We can even return the HTML with a little code change. Use the below code instead and browse the page.

return Content("<h1>Page is under construction</h1>", "text/html");

We will now get this screen.



So far, we learned that the Model and the Views are not necessary to create an MVC application. A Controller can be enough in some scenarios, as discussed above.

Now, let’s bring the View into the picture.

Understanding the View

View can also be used with or without Model. Let’s first use View with no Model associated with that and later, we will discuss about Model.

Now, let’s say, you get another update in requirements that for now we need to show only one office detail. So, we need to show only one address, city, country,  and contact number on contact us page as a table.

As we need to add a table and some other styling, let’s use a View to achieve this. And, because we just have one static data, we can easily add that in the View itself with no Model.

Inside Views/ContactUs folder, add Index.cshtml, as shown below:



Add the below code in a View and run the application.



In the above code, we just created a table and fixed the data in View itself (because it’s a single fix data). Also, in earlier code, we return a small HTML from our Controller itself. Let’s change that code to the following:

When we run the application, now, it will show the below screen.



Understanding the Model

Now that we are done with Controller and View, let’s discuss the limitations with not having a Model. Imagine, there is another addition in the requirement which says that we need to show all the addresses (3 as of now) of our offices, and the company will add a new address every month.

In this situation, we have to have a database where addresses will keep on adding and we have to show all these addresses in our View dynamically. This is substantial work if done in a View. Let’s bring a Model in the code to make it easier and more dynamic.

Add a modal class “Contacts.cs” in Models folder.



Add the below code in this class.



In our Model, we have 4 properties (City, Country, Address and ContactNo) which our complete office address contains. Notice, we are using a Contacts.json file as a data source here. In reality, it can be a database, a service, or a file itself whatever suits the project.

Inside GetContacts function, we are just fetching the address detail from JSON file, creating a list of Contacts, and returning a very simple modal class, fetching the data from a flat file and returning the same.

To add a JSON file, add a file “Contacts.json” in Appdata folder and add some data in to it, as given below:



Now, our Model is also created. Let’s use it with some minor changes in our Controller and View. Update code as the below one and run the application.

Inside View, first add Model reference, as given below:



Now, comment the static data present inside the View and add the logic to show the data from the Model, as shown below:



Also we needed a minor change in Controller. We need to populate the Model with data using the function we just created inside model class. And then, pass this model object to the View, so that the View can use it and show the dynamic data on screen.

This is simple. Just make the following changes in Controller class:



Now, run the application again. We will get the same screen but now with dynamic data.



Just add more data in JSON file and refresh the page. All the data from the JSON  should be visible on screen with no code change. As an exercise, you can now try to add some more data in the JSON, add some more properties to the contact us, and do some more styling to make it better.

Summary

Now that we have seen all the code, here are few theory points we learned:

1. Controller is essential. This is a must in an MVC application. Don’t avoid that..:)
   
   Controller is responsible for returning the View to the caller and if “How” part of the data is small or insignificant, it can take “How” responsibility as well.
   
   
2. View is responsible for “How” to show the data. But if “What” part of the data is small or insignificant, it can take “What” responsibility as well.
   
   
3. Model is responsible for “What” part of the data. It's Model’s responsibility to get or create the data. It can fetch the data from any data source, manipulate it if required, and return that to the Controller. Controller then passes that to the View, so that the View can use that. 

Note: All code used above is attached. You can comment and un-comment to test whatever scenario you want to understand.