Linking Between Views7:01 with James Churchill
In this video, we’re going to complete work on our Comic Books List view by adding links to our Comic Book Detail view.
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
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.
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 up