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