This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let’s improve navigation for our users by adding a “Return to List” button to our Comic Book Detail view.
Follow Along
To follow along commiting your changes to this course, you'll need to fork the aspnet-comic-book-gallery repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork>
cd aspnet-comic-book-gallery
git checkout tags/v5.5 -b improving-navigation
Code
Here’s the markup for the “Return to List” button.
<div class="backbar">
<div class="container">
<a class="btn btn-default" href="/">Return to List</a>
</div>
</div>
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up