This workshop will be retired on May 1, 2025.
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 walk through the steps to add a new page to our website.
Additional Learning
If you'd like to learn more about C# be sure to check out these Treehouse courses.
More information can also be found on Microsoft's Developer Network (MSDN).
For more information on Razor, see the following tutorial on the official ASP.NET website.
Keyboard Shortcuts
- F5 - Start debugging (i.e. build and run your website/project)
- Ctrl + S - Save Current File
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
Using the built in Project templates,
0:00
Visual Studio makes it easy
to create an MVC website.
0:02
While that's helpful.
0:06
It's not very likely that the resulting
website will align with the requirements
0:07
for your project.
0:11
Well unless they happen to call for a
website with nothing but home, about, and
0:12
contact pages.
0:17
Fortunately for us adding new pages
to an MVC website is easy to do.
0:19
Before we get started.
0:24
We need to know a little about the page
that we're going to add for instance.
0:25
What's the title of the page?
0:29
What kind of content
will the page contain?
0:31
I'm gonna go with an oldie, but goodie.
0:34
A links page.
0:36
That will display a list of links.
0:37
I know.
0:39
It's not very your original, but
it will suit our purposes just fine.
0:40
URL path for our new links page,
will be links.
0:44
When we browse to that URL,
the MVC framework will look for
0:48
a controller named links.
0:52
And an action method on that
controller named index.
0:53
Remember since we aren't including
the actual name in the URL.
0:56
MVC by default will look for
an action named index.
1:00
All right.
1:04
I think we've done enough planning.
1:06
Let's get started.
1:07
Our first step is to
add a links controller.
1:09
Right-click on the controllers folder and
select the Add controller menu item.
1:12
Visual Studio will open up a dialog
listing the available controller
1:19
templates.
1:22
Select the first one in the list
MVC5 controller dash empty and
1:23
click the Add button.
1:28
This brings up the ADD controller dialog,
1:30
which prompts us to supply
the name of the controller.
1:32
Notice that the dialogue is automatically
including the suffix controller.
1:35
The MVC framework requires that controller
names end with the word controller.
1:39
So don't remove that text.
1:43
Instead, replace the word
Default with Links.
1:45
And then click the Add button.
1:49
Okay, here's our Links controller.
1:52
Pretty simple, right?
1:54
The first thing to notice is that
our controller is just a class.
1:55
We can tell this because of
the class keyword right here.
1:59
Immediately to the right of the class
keyword is the name of our class
2:04
links controller.
2:08
If you're not familiar with classes.
2:10
You can think of them as
a way of organizing code.
2:12
Everything between these two curly
braces is considered part of our class.
2:14
The word public is called
an Access modifier.
2:20
The public access modifier indicates that
our class should be accessible to code
2:23
outside of our website.
2:27
This allows the MVC framework to
discover and use our controller,
2:29
which is what we want to be able to do.
2:33
If we look to the right of our class name.
2:35
We'll see a colon followed
by the word controller.
2:37
Controller is the name of the class
that's part of the MVC framework.
2:42
The colon indicates that
our links controller class
2:46
is inheriting from the controller class.
2:48
Every controller on our website needs
to inherit from the controller class.
2:51
Don't worry if you're not
familiar with class inheritance.
2:56
That's a concept that we'll
cover in future courses.
2:59
For now, just think of it as a way for
3:02
our class to use functionality that's
defined in the controller class.
3:04
Let's take a closer look
at the index action method.
3:09
Like our controller,
the methods access modifier is public.
3:12
All controller action
methods must be public.
3:16
Meaning they can be accessed
from code outside of this class.
3:18
This allows the MVC framework to be able
to call your controllers action methods.
3:22
The methods return type is action result.
3:27
Which as the name describes represents
the result of an action method.
3:30
The controller class,
the class that we're inheriting from
3:34
provides a number of helpful methods for
returning action results.
3:37
One of these methods the view
method that we're calling here.
3:41
Renders your view to the response.
3:44
Next let's add our view by right
clicking on the View method and
3:47
selecting the ADD View menu item.
3:51
This opens up the ADD view dialogue.
3:53
Visual Studio will default the name
of the view to the action method name
3:56
which in our cases index.
4:00
If we open the template combo box.
4:02
We can see that there are a variety
of templates that we can choose from.
4:04
For now we're going to
keep things simple and
4:08
select the Empty (without model) option.
4:10
In future courses, we'll take
a closer look at the other templates.
4:13
We'll keep the use a layout
page checkbox checked.
4:17
Layout pages are master pages.
4:20
That allow us to define
a common set of markup for
4:22
all of the pages in our website.
4:24
Go ahead and click the Add button
to finish out in the view.
4:27
Visual Studio add an indexed.css
HTML file inside of a new
4:30
links folder underneath the Views folder.
4:35
The convention for
MVC websites is to use a sub folder for
4:38
each controller's views
under the views folder.
4:41
Additionally, the views themselves
are typically named after the action
4:45
methods they're associated with.
4:48
Following this convention makes it easy
to find the view you're looking for.
4:50
For example,
if we want to find the view for
4:54
the home controller's about action method.
4:56
We'd look in the View's Home folder for
a file named About.cshtml.
4:58
Let's take a look at our Links view.
5:05
The view that was created for
us doesn't contain much content.
5:08
That makes sense though given that we
selected the Empty Without Model template.
5:11
The h2 tag is pretty straightforward.
5:15
That's our page heading.
5:18
But what's this section of the top that
starts with an at symbol followed by
5:19
a set of curly braces?
5:23
The at symbol's part of
a special syntax called Razor.
5:24
That allows us to mix C#
with our HTML markup.
5:27
Typing an at symbol tells the editor
that we want to switch to using C#.
5:31
The curly braces create a code block,
which allows us to write one or
5:35
more lines of C# code.
5:39
We currently just have
a single line of code.
5:42
ViewBag.Title equals Index.
5:44
ViewBag is a special MVC framework
object that can be used to pass data
5:47
from a controller to a view, or
in this case from view to view.
5:51
By setting the ViewBag.Title
property here.
5:55
Our layout page will use
the same ViewBag property
5:58
to determine what
the page title should be.
6:01
The view template sets
both the page title and
6:03
the heading to index which was
the name of our action method.
6:05
Let's change index to something
more meaningful like links.
6:09
Instead of typing the text links for
our heading.
6:13
We can actually just type in at
symbol to switch to C sharp code,
6:16
and use the View.big the Title property.
6:20
That way, if we ever need to change
our page title and heading text.
6:23
We only need to change the view
ViewBag.Title property here at the top of
6:26
the view.
6:30
To finish our view,
let's add our list of links.
6:31
I'll use an unordered list for that.
6:34
Next, I'll create my first
line item with an anchor tag,
6:37
leaving the href attribute
partially incomplete, for now.
6:40
I want two more of these line items.
6:47
So I'm gonna put my cursor here
at the beginning of the line.
6:50
Press Ctrl-C to copy the line, and
6:53
Ctrl-V to paste the line just below
the line that I'm currently on.
6:56
Then I can press Ctrl-V again
to create a third line.
7:01
For the links themselves.
7:05
Let's link to Google, Bing, and Yahoo.
7:07
So now we'll finish the href for
the first item.
7:10
Google.com, and
then the anchor text Google.
7:12
And then do the same for the second item.
7:18
So bing.com, and then Bing for
the anchor text.
7:20
And then the third item, yahoo.com.
7:25
And then Yahoo for the anchor text.
7:28
Just in case users don't
recognize what these links are.
7:32
I'll add a h3 heading tag with
the text search engines right above
7:35
the unordered list.
7:40
Save the file by clicking the save
toolbar button, or by pressing Ctrl-S.
7:42
Then let's run our website by pressing
the play button or the F5 function key.
7:48
Awesome.
7:57
Welcome to our links page.
7:58
Let's test each of our links to
make sure that they work correctly.
7:59
Clicking on Google takes us to google.com.
8:03
Clicking on Bing takes us to Bing.com.
8:08
And clicking on Yahoo
takes us to yahoo.com.
8:12
Congrats on adding your
first controller and view.
8:17
As an ASP.NET MVC developer,
8:19
this is something that you'll
do frequently on your projects.
8:22
So over time you'll become very
familiar with the process.
8:25
If any of the terms that I used.
8:30
Including class, method, or
return type were confusing or new to you.
8:32
You'll want to take some time to learn
more about the C sharp language.
8:37
See the teachers notes for
8:41
links to additional resources that
cover the basics of the C# language.
8:42
So, while we have our new page, expecting
our website users to manually type
8:49
the URL for
our links page is obviously not ideal.
8:53
Sounds like we need to update our menu.
8:58
Let's do this next.
9:00
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