Improving Navigation

Navigating from our detail view back to the list view currently requires that 0:00 you use the browser's back button, which isn't very user friendly. 0:05 When I discovered this issue, I contacted our designer and asked them to 0:09 update the design of the detail view to include a return to list button. 0:13 They were happy to help and quickly replied back with an updated design. 0:19 While that would be convenient to put this button in our detail view, 0:24 the new design calls for the button to be nested right below our header. 0:27 Given that, we'll need to put the HTML for the button in our layout page. 0:32 Since we only want this button to display when the detail view is being shown, 0:38 we'll need to control its visibility from that view. 0:41 Lets see how to do that. 0:45 In the layout page, let's start by adding the returned to list button markup. 0:48 Go ahead and open the _Layout.cshtml file in the views shared folder. 0:52 Here's the HTML that our designer provided to us. 1:00 If you're following along, 1:03 you can grab a copy of this markup in the teacher's notes. 1:05 Let's select and copy this markup to the clipboard. 1:08 Switching back to the layout page, we need to paste this markup 1:13 right between the div elements for our header and body content. 1:16 We only want this HTML to be included when the content view specifically us for 1:22 the return to the list button to be displayed. 1:27 To accomplish that, we need to surround this markup with an if statement. 1:30 Notice that the designer is using the CSS class back bar. 1:39 That's how they're describing the area that the return to a list button 1:43 is located within. 1:47 I'll use that CSS class name as inspiration for 1:49 our view bag property name. 1:52 Viewbag show back bar. 1:53 Remember, when using Viewbag, you have to be extra careful when typing the property 1:56 names, as Visual Studio is unable to provide any checking for dynamic types. 2:01 To finish the if statement condition, let's check for 2:07 the presence of the show back bar property by checking to see if it's null or not. 2:09 And if it's not null, we'll check to see if the property is set to true. 2:14 To render the button, we can use the action link HTML helper method. 2:19 The anchor element needs to include two CSS classes, BTN and BTN dash default. 2:24 Let's look for a method overload that allows us to set HTML attributes. 2:31 This looks promising. 2:37 The fifth method overload in the list accepts parameters for the link text, 2:38 action name, route values and HTML attributes. 2:43 Just like we did for the route values in the previous video, 2:49 we can supply an anonymous object for the HTML attributes parameter. 2:52 Each property on the anonymous object will get mapped 2:57 to a corresponding element attribute. 3:00 Let's use the string literal return to list for the link text, index for 3:03 the action name, null for the route values, 3:08 and an anonymous object with the class property set to the string btn 3:14 btn-default. 3:20 Hmm, Visual Studio is showing that there is a problem with the class property. 3:25 If we hover over the word class, we can see that Visual Studio is expecting 3:30 a curly brace, a right parenthesis, semicolon, and a couple more curly braces. 3:34 The error message hints at the problem, but doesn't tell us explicitly what it is. 3:41 We can't use the word class for a property name on our anonymous object 3:46 because class is a reserve keyword in C#. 3:51 Luckily, the solution is simple. 3:55 We just need to escape the word class with an at symbol. 3:57 Doing this makes our intentions clear. 4:01 So Visual Studio doesn't get confused, and 4:03 think that we're trying to define a C# class. 4:06 To finish up, 4:09 don't forget to remove the original HTML markup below our action link method call. 4:10 Let's open the comic book detail view. 4:16 By default, the back bar in the layout page will display. 4:19 So we need to update our detail view to set the view bag, 4:23 show back bar property to true. 4:26 We can do that here at the top of the view, 4:29 just below where we're setting the ViewBag.Title property. 4:31 Again, be careful that you type the ViewBag property name correctly. 4:35 Make sure that both the detail view and the layout page have been saved and 4:39 start the website. 4:43 Here's our list view. 4:48 We're not seeing the back bar, which is what we wanted. 4:49 Let's browse to the detail view. 4:53 Now we're seeing the back bar just below our header. 4:55 Go ahead and click the Return to List button to browse back to the list view and 4:58 then browse to the detail view for the second comic book. 5:02 Nice. 5:06 Now we've given users a convenient way to browse from the detail view 5:07 back to the list view. 5:11 Go ahead and close Chrome and stop the website. 5:13 If you're using GitHub, let's commit our changes. 5:16 Enter a commit message of added, return to list button, 5:19 to the detail view and click the commit all button. 5:25 Let's also sync with the remote server. 5:31 Navigate to the synchronization panel and click the Push link. 5:34 In the next video, we'll review the section and wrap up the course. 5:39 See you then. 5:43