Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Let's do a quick review of the MVC design pattern and the structure of the project that Visual Studio created for us.
Additional Learning
For more information about the MVC design pattern, see this Microsoft Developer Network (MSDN) article.
If you'd like to learn more about HTML, CSS, or JavaScript, be sure to check out these Treehouse courses.
-
0:00
When Visual Studio set up our project for
-
0:02
us, it created a number of files organized into a set of folders.
-
0:07
When you're first learning MVC, it's helpful to familiarize yourself
-
0:10
with the overall structure and organization of your project.
-
0:14
Before we do that, let's talk a little bit about the MVC design pattern.
-
0:19
Well before we do that, let's talk in general about design patterns.
-
0:23
Over the decades that developers have been creating software,
-
0:26
they noticed a set of problems that kept coming up time and time again,
-
0:30
some of these problems were so common that developers realized it would be helpful to
-
0:34
describe their solutions in very general terms and then share them with others.
-
0:40
That way developers everywhere, regardless of what specific
-
0:43
technology they were using, could learn and benefit from these efforts.
-
0:48
These solutions often represented as written descriptions, or
-
0:52
templates, are referred to as design patterns.
-
0:56
So, what is in MVC?
-
0:59
MVC is a design pattern.
-
1:01
In fact, MVC is a very common design pattern
-
1:04
used by developers to create all sorts of applications including websites and
-
1:09
mobile applications like iPhone or Android apps.
-
1:13
Let's take a closer look.
-
1:15
MVC is an acronym that stands for Model-View-Controller.
-
1:19
For now, think of the model as the data in your website,
-
1:22
the view is the visual part, and the controller as the coordinator.
-
1:26
When users browse to a specific page in our website,
-
1:29
the controller is responsible for coordinating what specific actions
-
1:33
need to be performed in order to return a response to that user request.
-
1:38
At this point,
-
1:39
don't worry if you don't fully understand how the MVC pattern works.
-
1:43
For this workshop, it's good enough to know that there's something
-
1:46
called a model, a view, and a controller.
-
1:49
In future courses, we'll explore the MVC design pattern in greater detail.
-
1:55
Let's take a look at the project that Visual Studio created for us.
-
1:59
Within Visual Studio,
-
2:00
we can use the Solution Explorer panel to see our project's folders and files.
-
2:05
If you're not able to see this panel,
-
2:06
you can display it by selecting the View, Solution menu item.
-
2:12
We can make more room for
-
2:13
the Solution Explorer by clicking the pin here on the Properties panel,
-
2:17
and while we're at it, let's go ahead and collapse the output panel, there.
-
2:22
Now we have more room to see the folders and files in our project.
-
2:27
Let's start by looking at the heart of our website.
-
2:29
The Controllers folder contains all the files for our controllers.
-
2:33
If we double-click it to expand it,
-
2:37
we see that we have just one controller, our Home Controller.
-
2:41
The Models folder contains all the files for our models.
-
2:46
Hmm, that's interesting.
-
2:47
There aren't any files here.
-
2:49
Remember though, models are used to represent data within our website.
-
2:53
But our website doesn't work with any data, at least for now.
-
2:57
So, the Models folder is empty.
-
3:00
The Views folder contains all the files for
-
3:02
our views, organized into folders, one folder for each of our controllers.
-
3:08
Remember, we just have the Home Controller now, so
-
3:11
that means we have just the one Home sub folder.
-
3:15
Looking inside the Home sub folder,
-
3:18
we can see there are three files, About.cshtml,
-
3:23
Contact.cshtml, and Index.cshtml.
-
3:27
We'll take a closer look at these files in a bit.
-
3:31
The Shared folder contains views that are shared across our controllers.
-
3:36
The _ Layout.cshtml file, often referred to as the layout or master page,
-
3:41
is used to specify the overall look and feel for every page on our website.
-
3:47
Later in this workshop, we'll be making changes to this file.
-
3:51
Most websites have CSS and JavaScript files, and ours is no exception.
-
3:55
The Content folder contains all of our website's CSS files,
-
4:00
while the Scripts folder contains all of our website's JavaScript files.
-
4:04
For now, we're going to ignore everything else that we see here, but
-
4:08
don't worry, we'll be taking a closer look in future courses, so
-
4:12
in time, you'll be familiar with every part of a MVC project.
-
4:16
Not every aspect of our project's folder structure is required by ASP.NET MVC.
-
4:22
That being said, the majority of projects will look very similar to,
-
4:26
if not exactly like, our project's folder structure.
-
4:29
Following the standard project structure makes it easier for
-
4:32
other developers to quickly find what they're looking for.
-
4:36
Now that we're more familiar with the parts of our project,
-
4:39
let's work on adding a new page to our website.
You need to sign up for Treehouse in order to download course files.
Sign up