Introduction

MVC is one of the more popular design paradigms for modern web applications. It allows the code to be split up into three sections that pass data between them. Popular MVC based frameworks include Ruby on Rails and ASP.NET MVC. This post will be focused on Microsoft's ASP.NET MVC5 framework, although the principles are transferable.

MVC Component Overview

MVC Diagram

Model

The model represents data, or knowledge in your program. It could be made up of a single object for a simple page, or many different objects and collections for a more complicated page. The information you want to display on your page is in this model. If the program uses a database, then the models often reflect the structure of the database.

The model can be accessed by both the controller and the view, and allows the controller to pass data into the view.

View

This is a visual representation of a model, how you want to display the data to the user. In a simple case, the view could just be a table of data or some drop down menus. Each view has a model linked to it, and each view can only have one model.

Controller

The controller is a way for the user to call functions on the server and is the heart of the MVC application since is the part that actually responds to users requests. The controller can access any model, add or remove data to it, and send that model to the view.

ASP.NET MVC Example

Those definitions are all well and good, but it becomes a lot easier to see if we actually can visualise it. We're going to briefly go over a simple ASP.NET MVC app that displays information about a person. I'm not going to worry about anything like databases or Entity Framework, just on the MVC principles.

This app is going to need to show the user information about a person, so we're going to need a model for that information. We'll call this model Person. This model is nothing complicated, just a C# class with a few properties:

public class Person {  
   public string Forename {get; set;}
   public string Surname {get; set;}
   public int Age {get; set;}
   public string Gender {get; set;}
}

Obviously we're not limited to basic types such as string and int here, you can add whatever types you like here. We could add other objects, lists or whatever we need to represent our data.

So, now we have a model that represents our data. How are we going to allow the user to fetch this data? The controller.

The controller will be responsible for taking the user's query (in this case, a URL request), updating the model and returning that model to the view. The structure of the controller also represents how the URLs will be structured. If our controller is called Person and has a method called Info, then the user can request /Person/Info to call that method. Let's create a controller.

public class PersonController : Controller  
{
   public ActionResult Info()
   {
      var person = new Person();
      person.Forename = "Joe";
      person.Surname = "Bloggs";
      person.Age = 21;
      person.Gender = "Male";

      return View(person);
   }
}

Wow, what's going on there? Let's break it down...

public class PersonController : Controller {...

We have named our controller PersonController. This means that any methods inside this controller can be called by the user by requesting /Person/<method name>. The controller must inherit the System.Web.Mvc.Controller class in ASP.NET for it to function.

public ActionResult Info() {...

This method is called info, so can be requested by browsing to /Person/Info. It returns an ActionResult in MVC, which in our case is a View. It is also possible to return other things, such as a file or some JSON. However, for now, we will be returning a view.

In this method, we create a new Person object, and set its properties to the desired values. In real life, this wouldn't be this simple - you would make a request to a database or a web service for example.

Then we return our view, passing the person object we just made as a parameter. This means the controller is sending our model over to the view so it can be displayed. Speaking of views...

We now need some way of formatting our data to show it to the user. It's all well and good having a model with some data inside, but unless we have a way to present it, it's useless. Let's create a basic view.

@model Person
<!DOCTYPE html>  
<html>  
  <head>
    <meta charset="utf-8">
    <title>MVC Example Page</title>
  </head>
  <body>
    <h1>@Model.Name's Information</h1>
    <table>
      <tr>
        <td>Name</td>
        <td>@Model.Name @Model.Surname</td>
      </tr>
      <tr>
        <td>Age</td>
        <td>@Model.Age</td>
      </tr>
      <tr>
        <td>Gender</td>
        <td>@Model.Gender</td>
      </tr>
    </table>
  </body>
</html>  

The first line of this view is very important. It tells the view what model it should be expecting from the controller. This has to match up otherwise the view won't know what to do with the data it is sent from the controller. And yes, model must be lower case here!

Now we just have a basic HTML page, but with some extra bits scattered in. We are using the Razor syntax here, so anything prefixed with @ is some server side code. @Model (with a capital M) allows us to access the data inside our model, so @Model.Name returns "Joe" in this example. Note how we can easily mix HTML and Razor tags together, even down to the 's after the name in the heading.

If we wanted to display information about multiple people in our view, then we can extend our view and controller as follows:

public class PersonController : Controller  
{
   public ActionResult Info()
   {
      var Joe = new Person();
      Joe.Forename = "Joe";
      Joe.Surname = "Bloggs";
      Joe.Age = 21;
      Joe.Gender = "Male";

      var Mary = new Person();
      Mary.Forename = "Mary";
      Mary.Surname = "Smith";
      Mary.Age = 28;
      Mary.Gender = "Female";

      var people = new List<Person>();
      people.Add(Joe);
      people.Add(Mary);


      return View(people);
   }
}
@model List<Person>
<!DOCTYPE html>  
<html>  
  <head>
    <meta charset="utf-8">
    <title>MVC Example Page</title>
  </head>
  <body>
    <h1>Information</h1>
    <table>
      @foreach (var person in Model)
      {
         <tr>
           <td>Name</td>
           <td>@person.Name @person.Surname</td>
         </tr>
         <tr>
           <td>Age</td>
           <td>@person.Age</td>
         </tr>
         <tr>
           <td>Gender</td>
           <td>@person.Gender</td>
         </tr>
      }
    </table>
  </body>
</html>  

Here, we have created a list of people in the controller and added our two example people two it. This list is then passed into the view. Since the view is now being sent a different object from the controller, we must update the first line of the view to reflect this. Then, inside the view we can iterate over our list and display the information about each person in our table.

In real life, you wouldn't write a full HTML page for each view. Instead you'd have a shared view that contains the layout of the page, the CSS and JS files you need and then your views would be rendered inside that.

There is so much more that we could discuss, but it's beyond what I wanted to talk about in this post. This is just a simple overview of the MVC architecture.

Useful References