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.