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
We have our new page now, but our website users don't have a way to easily browse to it. Let's learn how to update our menu in order to fix that problem.
Additional Learning
For more information about Chrome's Developer Tools see:
Keyboard Shortcuts
- F5 - Start debugging (i.e. build and run your website/project)
- Ctrl + Shift + F - Find in Files
- 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
Okay.
0:00
We need to add a new item to our menu.
0:01
So users have a way to browse
to our new links page.
0:03
Let's explore our project and
see if we can figure out how to do that.
0:06
First off, let's run our website and take
a closer look at the HTML for our menu.
0:10
I prefer Chrome's developer tools.
0:15
So I'm going to change my selected
browser to Google Chrome.
0:17
And press the play button or the F5
function key to start running our website.
0:20
To see the markup for our menu, let's
right-click on the Contact menu item and
0:24
select Inspect in Chrome's pop-up menu.
0:29
Notice that as we hover our mouse
over markup in the elements window.
0:33
Chrome will highlight that
element in the browser.
0:36
Here's the line item for
the about menu item.
0:40
And the line item for the home menu item.
0:43
We can also click the little gray
triangle to the left of the HTML tag
0:46
to see the content inside that item.
0:50
Moving up a bit, here's the UL tag for
our menu's line items.
0:53
We want to add a new item
to this unordered list.
0:57
So let's search our project for
the file that contains this tag.
1:00
To make sure that I'm
finding the correct UL tag.
1:04
I'm going to use the entire element
including the class attribute for
1:06
my search criteria.
1:10
Let's right-click on the element
then select Copy > Copy Element.
1:12
Let's switch back to Visual Studio and
1:17
stop our website by
clicking the stop button.
1:19
Next we'll open the find and replace
dialog by clicking on the Edit+Find and
1:22
Replace find in files menu item.
1:27
You'll be using this dialog often.
1:31
So it's helpful to learn
the keyboard shortcut for
1:33
the find in files command
which is Ctrl+Shift+F.
1:35
Notice that Visual Studio automatically
filled in the find what field
1:40
with the HTML element that
we copied to the clipboard.
1:44
If that didn't happen for you.
1:48
Just place your cursor in this field and
press Ctrl+V to paste.
1:49
We want to search across
every file in our website.
1:54
So make sure that the look in
field is set to entire solution.
1:57
Then click the Find All button.
2:01
This will open a panel here at the bottom
of our environment named Find Results 1.
2:03
Let's collapse
the Solution Explorer panel.
2:08
So that we can see more of the results.
2:11
We can see that one matching line was
found and that 40 files were searched.
2:14
The full path of the file is displayed
along with a snippet of the match in line.
2:19
If we double click the search result,
Visual Studio will open
2:24
the _layout.cs HTML file and
take us to the match in line.
2:28
Ha.
2:33
Looks like we found the markup and
code for our menu.
2:34
Let's take a closer look at
the contents of the last tag.
2:38
This doesn't look like HTML, does it?
2:42
It's actually C#.
2:44
But, what's this at symbol?
2:46
As mentioned in an earlier video.
2:48
The at symbol is part of
a special syntax called Razor.
2:50
That allows us to mix C#
with our HTML mark up.
2:54
Typing an at symbol tells the editor
that we want to switch to using C#.
2:58
Notice that we don't have to tell
Razor where the C# code ends.
3:03
Razor is intelligent enough to detect when
we have transitioned back to using HTML.
3:08
Pretty cool?
3:13
We haven't covered how the HTML
action link method works.
3:14
But that's okay.
3:18
From the name of the method.
3:19
It sounds like it will create a link,
which would make sense given our context.
3:20
Let's go ahead and
copy one of the existing menu line items.
3:25
And see if we can make it work.
3:28
I'm gonna put my cursor at the beginning
of the line that contains the last
3:29
li element.
3:34
Press Ctrl+C to copy the line and
3:34
Ctrl+V to paste the line just below
the line that I'm currently on.
3:37
Now that we have our new line item.
3:42
Let's update the call to
the action link method.
3:44
If we hover our mouse pointer
over the action link method name.
3:47
Visual Studio will display a tool tip
containing information about the method
3:51
including the parameter list.
3:55
We can see that the first
parameter is the link text.
3:57
The second is the action name.
4:00
And the third is the controller name.
4:02
For our links page,
let's use Links for the link text.
4:05
Index for the action name.
4:09
And Links again for the controller name.
4:15
Let's save by pressing Ctrl+S and
then F5 to run the website.
4:18
Look at that.
4:24
Here's our Links menu item.
4:25
If we click on it.
4:27
We should see our Links page.
4:28
Great job.
4:31
Now we have a way for
users to discover and view our Links page.
4:32
Knowing how to use the tools
in your toolbox to explore and
4:37
make changes to your website
is a critical developer skill.
4:40
Inspecting, searching for, and
4:43
modifying code is something that
you'll do over and over again.
4:45
So take the necessary time to practice and
master that process.
4:49
We also got to use the developer
tools built into the Chrome browser.
4:54
We're just scratching the surface
of what these tools can do.
4:58
To learn more about what's possible,
check the teacher's notes for
5:01
links to additional resources.
5:04
Next let's wrap up work on our project
by updating our website's content.
5:07
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