Basics of .NET Web Apps – Part 3: MVC

Welcome back! Now that we have our environment set up, this post is going to go into more detail about the MVC (Model-View-Controller) design pattern and how it helps us write clear and reusable code.

If this is the first post of the series you are reading, everything should make just as much sense to you as it would if you were following along. However, if you need help setting up your environment, feel free to check out the first two posts here and here.

Let’s dive in!

First, what is a design pattern? A Design Pattern is a commonly used solution to commonly encountered problems. The problem MVC handles, is how to separate business logic from what the end user sees. The reason I’m choosing to use MVC is because it is relatively simple to understand and implement and has a solid community around it (MVC has been around since the 70s but has been an official project type if ASP.NET for about 10 years).

Let’s break it up.

M (Model) – The model is where you hold your business logic and data.

V (View) – The view is what the end user sees and interacts with. We will be setting up our views using Razor syntax.

C (Controller) – The controller is how the model and view communicate and decides which view to render to the user.

The flow looks a little like this:

The Controller renders data from the Model to the View, deciding which view the user needs to see. The user sees the View and sends requests back to the Controller. The Controller then updates the Model. The Model accesses data from the database and sends the data back to the Controller that sends the data up to the View for the user.

Here is a way to visualize:

Let’s walk through an example using our handy Dog class.

First, let’s create out Model.

We set up our dog class in Part 2 and it looked a little like this:

namespace RescueShare.Models
{
public class Dog
{
public string ID { get; set; }
public string Name { get; set; }
public string Breed { get; set;}
}
}

This class is going to be our Model (conveniently positioned in the Models folder). Notice we have our 3 properties. We could also add some basic functions but we’ll leave it at the properties for now.

Next up is our Controller.

You should already have a “Controllers” folder if you’ve installed MVC as discussed in Part 1 but if not, go ahead and create a folder under your solution called “Controllers”.

Right click on this folder and hit Add -> Controller .

Select MVC Controller with Views…

On the next screen, we are going to tell the Controller which Model we want it to be tied to. In this example, we will be using the Dogs Model:

It will also ask for your DbContext and what you want to name the Controller. Naming convention for Controllers is [Model] + ‘s’. So, since our Model is called “Dog”, our Controller will be called “Dogs”.

And, create!

Take a minute to look around at what just got created:

1. Brand new Controller class with several built in HTTP requests
2. A new Views folder named after our model with 5 built in Views (Create, Edit, Delete, Details, Index)
3. Click into one of the Views, your Model is already wired up and looks like this:

@model RescueShare.Models.Dog

Woo! Now we have used the MVC design pattern!

Now we’ll walk through how these parts interact with the user.

On our Create Dog page

we see our Name and Breed fields. The Controller grabs these from the Model then displays them to the View. If we remove either of those fields from the Model and refresh, the Controller will see that change and update the View.

Now, we can enter some values into the fields. Once saved, the Controller will take these values and bring them to the Model. The Model checks to see if it needs to do anything with these values and if not, stores them in the database.

Here are the 3 main files interacting on this page using MVC:

And there you have it! The very basics of MVC.