Finishing the List View4:55 with James Churchill
In the previous video, we added our Comic Book List view, but we left it in an unfinished state. Let’s work on finishing it now.
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.2 -b finishing-the-list-view
Here’s the markup that the designer provided to us for the “Comic Books List” view.
<div class="row"> <div class="col-md-3"> <h4>The Amazing Spider-Man #700</h4> <img src="/Images/the-amazing-spider-man-700.jpg" alt="The Amazing Spider-Man #700" class="img-responsive" /> </div> </div>
In the previous video, we added our comic book list view, but 0:00 we left it in an unfinished state, let's work on finishing it now, 0:04 start by adding the model directive to the top of the view. 0:09 Remember, we need to provide the full name space, to our comic book model. 0:13 Don't forget the brackets to indicate that we're expecting an array. 0:19 This will make our view strongly typed, specifically making the view's Model 0:23 property to be an array of ComicBook objects. 0:28 That aligns with the type of data that the controller is passing to this view. 0:31 Next, let's set the ViewBag property to the string literal comic books. 0:36 For the H2 heading element content 0:42 let's replace index with the ViewBag Title property value. 0:44 By using the ViewBag Title property we've prevented the unnecessary duplications 0:50 of the string literal comic books. 0:55 If we ever decided to change our page title, 0:57 this will make it slightly easier to do. 1:00 Now we're ready to build up the market for our comic books. 1:02 Our designer has provided us with the HTML they'd like to use, just like they did for 1:06 the comic book detail view. 1:11 Here's the HTML that they sent me. 1:13 Let's select, copy and paste this markup into our view. 1:16 The markup itself is fairly straightforward. 1:22 We start with a bootstrap grid row followed by a grid column 1:25 that will occupy three of the twelve available grid columns. 1:29 Within the grid column, is a heading containing our comic books display text 1:33 followed by the comic book cover image. 1:38 The cover image uses bootstraps img-responsive C.S.S. 1:41 class, which ensures that the image will scale to fit its parent element. 1:46 To make this HTML dynamic, we need to start by surrounding the Grid column, 1:51 with the for each loop. 1:56 So the markup for a comic book will be repeated for 1:57 each item that we have in our array just after the grid row, 2:00 create a new line, type an at symbol to switch to code and 2:04 type for each to select the for each code snippet and press tab. 2:09 Lets name our item variable comicBook. 2:13 Remember our array of comic books is available to us 2:17 via the view's model property. 2:21 So they'll be the source for our loop. 2:23 Press escape to exit the code snippet. 2:26 Lastly cut and paste the grid column markup into the code block. 2:29 Now, let's update the comicBook markup starting with the heading. 2:34 Replace the text, The Amazing Spider-Man #700. 2:38 With the comicBook.DisplayText property value. 2:42 Then, like we did for 2:46 the cover image, on the comic book detail view we can replace the image file name 2:47 with the comicBook.CoverImageFileName property value. 2:52 And the alternate text with the comicBook.DisplayText property value. 2:56 Let's test our changes save the view and start the website. 3:03 Great, here's our list of comic books, if we open the developer tools and 3:09 enable the device mode, we can see that the bootstrap response of grid 3:15 will vertically stack are coming books in order to adjust to the smaller screen 3:20 Bootstrap really makes it easy to create mobile friendly layouts. 3:25 Let's switch back to Visual Studio. 3:30 Notice that we didn't need to set the view's layout property in order for 3:32 the view to use our layout page. 3:36 This is possible because Visual Studio added an _ViewStart.cs 3:39 HTML file to our project's views folder when we added our index view. 3:43 The view start file allows us to provide code 3:49 to execute at the start of each views rendering. 3:52 This helps consolidate initialization code 3:55 that would otherwise need to be added to each individual view. 3:58 This is another example of the dry, don't repeat yourself, design principle at work. 4:01 Let's go ahead and jump into our comic book detail view and 4:07 do a little cleanup work. 4:10 We no longer need to set the view's Layout property here. 4:12 So let's remove that line of code and save the view. 4:15 Now that we have our comic book's list view let's test our home page by browsing 4:19 to the root of our website. 4:23 No, we're still getting a 404 error. 4:25 in the next video will work on resolving this issue once and for all. 4:28 Go ahead and close Chrome and stop the website. 4:33 If you're using GitHub, let's commit our changes before we wrap up this video. 4:37 Enter a commit message of updated comic books list view. 4:42 and click the commit all button. 4:49 See you after a short break where you can exercise your brain. 4:51
You need to sign up for Treehouse in order to download course files.Sign up