Navigating from our detail view back to the list view currently requires that

you use the browser's back button, which isn't very user friendly.

When I discovered this issue, I contacted our designer and asked them to

update the design of the detail view to include a return to list button.

They were happy to help and quickly replied back with an updated design.

While that would be convenient to put this button in our detail view,

the new design calls for the button to be nested right below our header.

Given that, we'll need to put the HTML for the button in our layout page.

Since we only want this button to display when the detail view is being shown,

we'll need to control its visibility from that view.

Lets see how to do that.

In the layout page, let's start by adding the returned to list button markup.

Go ahead and open the _Layout.cshtml file in the views shared folder.

Here's the HTML that our designer provided to us.

If you're following along,

you can grab a copy of this markup in the teacher's notes.

Let's select and copy this markup to the clipboard.

Switching back to the layout page, we need to paste this markup

right between the div elements for our header and body content.

We only want this HTML to be included when the content view specifically us for

the return to the list button to be displayed.

To accomplish that, we need to surround this markup with an if statement.

Notice that the designer is using the CSS class back bar.

That's how they're describing the area that the return to a list button

is located within.

I'll use that CSS class name as inspiration for

our view bag property name.

Viewbag show back bar.

Remember, when using Viewbag, you have to be extra careful when typing the property

names, as Visual Studio is unable to provide any checking for dynamic types.

To finish the if statement condition, let's check for

the presence of the show back bar property by checking to see if it's null or not.

And if it's not null, we'll check to see if the property is set to true.

To render the button, we can use the action link HTML helper method.

The anchor element needs to include two CSS classes, BTN and BTN dash default.

Let's look for a method overload that allows us to set HTML attributes.

This looks promising.

The fifth method overload in the list accepts parameters for the link text,

action name, route values and HTML attributes.

Just like we did for the route values in the previous video,

we can supply an anonymous object for the HTML attributes parameter.

Each property on the anonymous object will get mapped

to a corresponding element attribute.

Let's use the string literal return to list for the link text, index for

the action name, null for the route values,

and an anonymous object with the class property set to the string btn

btn-default.

Hmm, Visual Studio is showing that there is a problem with the class property.

If we hover over the word class, we can see that Visual Studio is expecting

a curly brace, a right parenthesis, semicolon, and a couple more curly braces.

The error message hints at the problem, but doesn't tell us explicitly what it is.

We can't use the word class for a property name on our anonymous object

because class is a reserve keyword in C#.

Luckily, the solution is simple.

We just need to escape the word class with an at symbol.

Doing this makes our intentions clear.

So Visual Studio doesn't get confused, and

think that we're trying to define a C# class.

To finish up,

don't forget to remove the original HTML markup below our action link method call.

Let's open the comic book detail view.

By default, the back bar in the layout page will display.

So we need to update our detail view to set the view bag,

show back bar property to true.

We can do that here at the top of the view,

just below where we're setting the ViewBag.Title property.

Again, be careful that you type the ViewBag property name correctly.

Make sure that both the detail view and the layout page have been saved and

start the website.

Here's our list view.

We're not seeing the back bar, which is what we wanted.

Let's browse to the detail view.

Now we're seeing the back bar just below our header.

Go ahead and click the Return to List button to browse back to the list view and

then browse to the detail view for the second comic book.

Nice.

Now we've given users a convenient way to browse from the detail view

back to the list view.

Go ahead and close Chrome and stop the website.

If you're using GitHub, let's commit our changes.

Enter a commit message of added, return to list button,

to the detail view and click the commit all button.

Let's also sync with the remote server.

Navigate to the synchronization panel and click the Push link.

In the next video, we'll review the section and wrap up the course.

See you then.