1
00:00:00,510 --> 00:00:01,480
Okay.

2
00:00:01,480 --> 00:00:03,430
We need to add a new item to our menu.

3
00:00:03,430 --> 00:00:06,450
So users have a way to browse
to our new links page.

4
00:00:06,450 --> 00:00:10,410
Let's explore our project and
see if we can figure out how to do that.

5
00:00:10,410 --> 00:00:15,190
First off, let's run our website and take
a closer look at the HTML for our menu.

6
00:00:15,190 --> 00:00:17,220
I prefer Chrome's developer tools.

7
00:00:17,220 --> 00:00:20,260
So I'm going to change my selected
browser to Google Chrome.

8
00:00:20,260 --> 00:00:24,281
And press the play button or the F5
function key to start running our website.

9
00:00:24,281 --> 00:00:29,357
To see the markup for our menu, let's
right-click on the Contact menu item and

10
00:00:29,357 --> 00:00:32,180
select Inspect in Chrome's pop-up menu.

11
00:00:33,370 --> 00:00:36,920
Notice that as we hover our mouse
over markup in the elements window.

12
00:00:36,920 --> 00:00:39,310
Chrome will highlight that
element in the browser.

13
00:00:40,460 --> 00:00:43,005
Here's the line item for
the about menu item.

14
00:00:43,005 --> 00:00:45,350
And the line item for the home menu item.

15
00:00:46,440 --> 00:00:50,530
We can also click the little gray
triangle to the left of the HTML tag

16
00:00:50,530 --> 00:00:52,340
to see the content inside that item.

17
00:00:53,570 --> 00:00:57,370
Moving up a bit, here's the UL tag for
our menu's line items.

18
00:00:57,370 --> 00:01:00,070
We want to add a new item
to this unordered list.

19
00:01:00,070 --> 00:01:04,000
So let's search our project for
the file that contains this tag.

20
00:01:04,000 --> 00:01:06,820
To make sure that I'm
finding the correct UL tag.

21
00:01:06,820 --> 00:01:10,440
I'm going to use the entire element
including the class attribute for

22
00:01:10,440 --> 00:01:11,420
my search criteria.

23
00:01:12,460 --> 00:01:17,760
Let's right-click on the element
then select Copy > Copy Element.

24
00:01:17,760 --> 00:01:19,740
Let's switch back to Visual Studio and

25
00:01:19,740 --> 00:01:22,310
stop our website by
clicking the stop button.

26
00:01:22,310 --> 00:01:27,922
Next we'll open the find and replace
dialog by clicking on the Edit+Find and

27
00:01:27,922 --> 00:01:30,670
Replace find in files menu item.

28
00:01:31,750 --> 00:01:33,580
You'll be using this dialog often.

29
00:01:33,580 --> 00:01:35,840
So it's helpful to learn
the keyboard shortcut for

30
00:01:35,840 --> 00:01:40,840
the find in files command
which is Ctrl+Shift+F.

31
00:01:40,840 --> 00:01:44,870
Notice that Visual Studio automatically
filled in the find what field

32
00:01:44,870 --> 00:01:48,330
with the HTML element that
we copied to the clipboard.

33
00:01:48,330 --> 00:01:49,850
If that didn't happen for you.

34
00:01:49,850 --> 00:01:54,810
Just place your cursor in this field and
press Ctrl+V to paste.

35
00:01:54,810 --> 00:01:57,460
We want to search across
every file in our website.

36
00:01:57,460 --> 00:02:01,710
So make sure that the look in
field is set to entire solution.

37
00:02:01,710 --> 00:02:03,790
Then click the Find All button.

38
00:02:03,790 --> 00:02:08,500
This will open a panel here at the bottom
of our environment named Find Results 1.

39
00:02:08,500 --> 00:02:11,270
Let's collapse
the Solution Explorer panel.

40
00:02:11,270 --> 00:02:14,030
So that we can see more of the results.

41
00:02:14,030 --> 00:02:19,890
We can see that one matching line was
found and that 40 files were searched.

42
00:02:19,890 --> 00:02:24,514
The full path of the file is displayed
along with a snippet of the match in line.

43
00:02:24,514 --> 00:02:28,803
If we double click the search result,
Visual Studio will open

44
00:02:28,803 --> 00:02:32,930
the _layout.cs HTML file and
take us to the match in line.

45
00:02:33,960 --> 00:02:34,550
Ha.

46
00:02:34,550 --> 00:02:38,280
Looks like we found the markup and
code for our menu.

47
00:02:38,280 --> 00:02:42,180
Let's take a closer look at
the contents of the last tag.

48
00:02:42,180 --> 00:02:44,963
This doesn't look like HTML, does it?

49
00:02:44,963 --> 00:02:46,645
It's actually C#.

50
00:02:46,645 --> 00:02:48,869
But, what's this at symbol?

51
00:02:48,869 --> 00:02:50,199
As mentioned in an earlier video.

52
00:02:50,199 --> 00:02:54,441
The at symbol is part of
a special syntax called Razor.

53
00:02:54,441 --> 00:02:58,238
That allows us to mix C#
with our HTML mark up.

54
00:02:58,238 --> 00:03:03,481
Typing an at symbol tells the editor
that we want to switch to using C#.

55
00:03:03,481 --> 00:03:08,060
Notice that we don't have to tell
Razor where the C# code ends.

56
00:03:08,060 --> 00:03:13,330
Razor is intelligent enough to detect when
we have transitioned back to using HTML.

57
00:03:13,330 --> 00:03:14,920
Pretty cool?

58
00:03:14,920 --> 00:03:18,500
We haven't covered how the HTML
action link method works.

59
00:03:18,500 --> 00:03:19,770
But that's okay.

60
00:03:19,770 --> 00:03:20,910
From the name of the method.

61
00:03:20,910 --> 00:03:24,610
It sounds like it will create a link,
which would make sense given our context.

62
00:03:25,730 --> 00:03:28,740
Let's go ahead and
copy one of the existing menu line items.

63
00:03:28,740 --> 00:03:29,862
And see if we can make it work.

64
00:03:29,862 --> 00:03:34,030
I'm gonna put my cursor at the beginning
of the line that contains the last

65
00:03:34,030 --> 00:03:34,794
li element.

66
00:03:34,794 --> 00:03:37,875
Press Ctrl+C to copy the line and

67
00:03:37,875 --> 00:03:42,760
Ctrl+V to paste the line just below
the line that I'm currently on.

68
00:03:42,760 --> 00:03:44,430
Now that we have our new line item.

69
00:03:44,430 --> 00:03:46,550
Let's update the call to
the action link method.

70
00:03:47,580 --> 00:03:51,220
If we hover our mouse pointer
over the action link method name.

71
00:03:51,220 --> 00:03:55,090
Visual Studio will display a tool tip
containing information about the method

72
00:03:55,090 --> 00:03:57,030
including the parameter list.

73
00:03:57,030 --> 00:04:00,390
We can see that the first
parameter is the link text.

74
00:04:00,390 --> 00:04:02,180
The second is the action name.

75
00:04:02,180 --> 00:04:03,680
And the third is the controller name.

76
00:04:05,290 --> 00:04:09,697
For our links page,
let's use Links for the link text.

77
00:04:09,697 --> 00:04:12,210
Index for the action name.

78
00:04:15,140 --> 00:04:18,140
And Links again for the controller name.

79
00:04:18,140 --> 00:04:22,540
Let's save by pressing Ctrl+S and
then F5 to run the website.

80
00:04:24,300 --> 00:04:25,450
Look at that.

81
00:04:25,450 --> 00:04:27,540
Here's our Links menu item.

82
00:04:27,540 --> 00:04:28,520
If we click on it.

83
00:04:28,520 --> 00:04:30,290
We should see our Links page.

84
00:04:31,570 --> 00:04:32,600
Great job.

85
00:04:32,600 --> 00:04:37,110
Now we have a way for
users to discover and view our Links page.

86
00:04:37,110 --> 00:04:40,030
Knowing how to use the tools
in your toolbox to explore and

87
00:04:40,030 --> 00:04:43,730
make changes to your website
is a critical developer skill.

88
00:04:43,730 --> 00:04:45,530
Inspecting, searching for, and

89
00:04:45,530 --> 00:04:49,800
modifying code is something that
you'll do over and over again.

90
00:04:49,800 --> 00:04:54,110
So take the necessary time to practice and
master that process.

91
00:04:54,110 --> 00:04:58,510
We also got to use the developer
tools built into the Chrome browser.

92
00:04:58,510 --> 00:05:01,660
We're just scratching the surface
of what these tools can do.

93
00:05:01,660 --> 00:05:04,710
To learn more about what's possible,
check the teacher's notes for

94
00:05:04,710 --> 00:05:07,220
links to additional resources.

95
00:05:07,220 --> 00:05:11,370
Next let's wrap up work on our project
by updating our website's content.