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
In this video, we’re going to complete work on our Comic Books List view by adding links 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.4 -b linking-between-views
Additional Learning
For more information about member overloading, see this MSDN page.
To learn more about anonymous types, see this page on MSDN.
For more information on how ASP.NET MVC constructs URLs from routes, see this MSDN page.
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
In this video, we're going to complete
work on our comic books listview
0:00
by adding links to our
comic book detail view.
0:04
This will allow users to click
on a comic book title or
0:07
cover image to easily browse from
the list view to the detail view.
0:10
Go ahead and open the comic books
list view, which is the Index.cshtml
0:15
file located under the Views
> ComicBooks folder.
0:20
I'll collapse the solution explorer
panel to give us more room.
0:24
Let's start by converting
the h4 heading element
0:28
that displays the comicBook.DisplayText
property value into a hyperlink.
0:31
To create a hyperlink, we can use
the ActionLink HTML helper method.
0:36
Just after we type the opening
parentheses, Visual Studio IntelliSense
0:41
will typically display the information
about the ActionLink method.
0:45
If you don't see any method information,
try typing a comma to invoke IntelliSense.
0:50
If you look closely on
the left side of the pop up,
0:55
you'll notice an item counter
that currently shows 1 of 10.
0:58
This is telling us that we're
viewing the information for
1:02
the first of ten method overloads.
1:05
Remember, method overloads
are versions of the same method
1:08
that differ by their signature.
1:11
In other words, they differ by
the parameters that they accept,
1:13
either by parameter type,
the number of parameters, or both.
1:17
We can use these method overloads to
shape the resulting anchor element.
1:22
The first method overload accepts
parameters for the link text and
1:26
the action name to route to.
1:30
Let's use the comicBook.DisplayText
property value for the link text parameter
1:32
and the string literal Detail for
the action name parameter.
1:37
That's simple enough to use, but
there's a problem with this approach.
1:41
Our comic book slash detail route
requires that we provide an id parameter.
1:45
So, how do we supply that parameter value?
1:51
If we look at the next ActionLink
method overload by typing a comma
1:54
after the string literal Detail,
1:58
we can see that there's a version of
the method that accepts parameters for
2:00
the link text, action name, and
an object for the route values.
2:04
That looks promising.
2:10
The syntax for
2:11
the routeValues object might look a little
strange the first time you see it.
2:12
It's defined as an anonymous type
using object initializer syntax.
2:17
That sounds worse than it really is.
2:22
Let's walk through an example.
2:25
Normally, when we instantiate a class,
we'd use the new keyword
2:27
followed by the name of the class and
a set of parentheses.
2:31
Then we could add a set
of curly braces and
2:35
set the property values on the new object.
2:37
This syntactic shortcut is known
as object initializer syntax.
2:42
Visual Studio is politely telling us that
the RouteValues class doesn't exist.
2:47
That makes sense though.
2:52
We didn't create the definition for
that class.
2:54
We could go to the trouble of adding
that class to our project, but
2:57
fortunately, there's a simpler,
better way.
3:00
We can use a C# feature
called anonymous types.
3:04
Anonymous types give us
a way to instantiate objects
3:08
without defining a class beforehand.
3:12
Even better, it's simple to do.
3:15
Just remove the class name and
parentheses.
3:17
Now, we're creating an anonymous type for
the RouteValues parameter.
3:20
By passing this anonymous object for
the RouteValues,
3:25
this id property, whose value is set
to the comic books id property value,
3:29
will get mapped by mvc to
the id route parameter.
3:33
Notice that we aren't supplying the
controller name to the ActionLink method.
3:38
The controller name will be defaulted to
the current controller's name, which,
3:43
in this case, is comic books.
3:47
If we need to supply
a different controller name,
3:49
there's another method overload that
accepts a parameter for the name to use.
3:52
The ActionLink method is able to
use the controller, action, and
3:57
id route values, along with
the routes that we have defined for
4:01
our website,
to determine what the URL should be.
4:04
For more information on how that process
works, see the teacher's notes for
4:08
links to additional resources.
4:12
Let's save the view and start the website,
so that we can test our hyperlinks.
4:14
Here's our list of comics.
4:21
The headings are now hyperlinks.
4:22
That's a good sign.
4:25
If we click on the hyperlink for
4:27
the first comic book, we should browse
to the detail view for that comic.
4:28
Great, so far, so good.
4:33
Let's click the Back button,
and try the other hyperlinks.
4:35
Clicking on the second comic book
takes us to its detail view.
4:39
And clicking on the third
takes us to its detail view.
4:43
We still can't click on a comic book
cover to navigate to the detail view.
4:47
Let's work on that next.
4:51
To convert our comic book
cover images to hyperlinks,
4:53
we need to surround the image
element with an anchor element.
4:57
Unfortunately, the ActionLink method won't
work in this case, because it doesn't
5:00
allow us to set the anchor element's inner
content to anything other than text.
5:06
Fortunately, mvc provides
the action URL helper method,
5:11
which we can use to generate URLs
independent of any HTML elements.
5:16
Let's start by surrounding our image
element with an anchor element.
5:21
For now, leave the href attribute empty.
5:26
Now we can use Razor to set
the href attribute value.
5:33
Type an at symbol, followed by
a call to the Url.Action method.
5:37
The third method overload accepts
parameter values for the action name and
5:42
route values.
5:47
That's the one that we want to use.
5:48
For the action name,
use the string literal Detail,
5:50
and for the route values,
use an anonymous type with an id
5:55
property set to the comicBook.Id
property value.
6:00
Let's save the view and refresh the page
to test our comic book cover hyperlinks.
6:05
Clicking on the first comic book's
cover takes us to its detail view.
6:12
The second and
third comic book covers also work.
6:16
Go ahead and close Chrome,
and stop the website.
6:25
If you're using GitHub,
let's commit our changes.
6:30
Enter a commit message of Added
6:33
hyperlinks to the Comic Books List view,
6:37
and click the Commit All button.
6:42
Being able to easily browse from the list
view to the detail view is a nice
6:46
improvement to our website.
6:50
We still don't have a link from our
detail view back to the list view, but
6:52
don't worry.
6:56
We'll fix that in the next video.
6:57
See you then.
6:59
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