Adding a Menu Item

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