Improving Our View Layout7:45 with James Churchill
Let’s update our Comic Book Detail view with the new layout from our designer.
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/v4.4 -b improving-our-view-layout
Here’s the markup that the designer provided to us for the “Comic Book Detail” view.
<h2>The Amazing Spider-Man #700</h2> <div class="row"> <div class="col-md-6"> <div class="well"> <h5><label>Series Title:</label> The Amazing Spider-Man</h5> <h5><label>Issue #:</label> 700</h5> <h5><label>Favorite:</label> Yes</h5> <h5>Artists:</h5> <div> <ul> <li>Script: Dan Slott</li> <li>Pencils: Humberto Ramos</li> <li>Inks: Victor Olazaba</li> <li>Colors: Edgar Delgado</li> <li>Letters: Chris Eliopoulos</li> </ul> </div> </div> <h5>Description</h5> <p>Final issue! Witness the final hours of Doctor Octopus' life and his one, last, great act of revenge! Even if Spider-Man survives...<strong>will Peter Parker?</strong></p> </div> <div class="col-md-6"> <img src="/Images/the-amazing-spider-man-700.jpg" alt="The Amazing Spider-Man #700" class="img-responsive" /> </div> </div>
For more information on how to build websites using Bootstrap, see this Treehouse course.
The Bootstrap documentation can be found on the official Bootstrap website.
I was just showing our designer the progress that we're making 0:00 on our comic book gallery website. 0:03 They were happy to see that we integrated their design without having to ask for 0:06 any changes. 0:10 That being said, 0:12 it did feel like our comic book detail view was lacking some pizzazz. 0:13 So they decided to work up a new design for that view. 0:18 I just got their email with the new layout. 0:22 Let's implement those changes now. 0:25 Here's the markup that our designers sent me. 0:27 If you're following along, 0:30 you can get a copy of this markup in the teacher's notes. 0:32 There are a couple of different approaches we could take with updating our view. 0:35 We could work on updating our existing code with the new layout elements, or 0:40 we could bring the new markup into our view and work on making it dynamic. 0:45 I'm going to opt for the latter option. 0:49 Before we switch to Visual Studio, let's select and 0:52 copy this markup to the Clipboard. 0:55 Now, let's open the detail Comic View. 0:58 Instead of replacing the existing markup, I'm going to create some empty lines 1:06 here and paste the contents of the Clipboard into the view. 1:10 Let's start at the top and work our way through the new markup. 1:14 The first element that we need to update is this heading. 1:17 The heading text looks familiar. 1:21 Didn't we create a model property that returns the combination 1:23 of the series title and issue number? 1:27 Let's open our comic book model and review the code. 1:29 Okay, I'm not losing my mind. 1:33 We did add a display text property that returns the series title and issue number. 1:35 Let's update the heading to use that property value for its content. 1:41 Continuing on, we encounter a series of div elements with the CSS classes row, 1:48 col-md-6, and well. 1:54 All three of these CSS classes are part of the Twitter Bootstrap CSS framework. 1:58 Bootstrap provides a responsive grid for page layout, the row and 2:04 col-md-6 CSS classes are part of this grid system. 2:09 The row class creates a grid row and the col-md-6 2:15 class creates a column that spans six of the twelve available grid columns. 2:20 If we look a little further down in the markup, we'll find the second column 2:26 that is also configured to span six of the grid columns. 2:30 The well class is used to give an element a simple inset effect. 2:34 If we browse to the Bootstrap website, 2:38 we can see an example of what this effect looks like. 2:41 For more information on the Bootstrap CSS framework, see the teacher's notes for 2:44 links to additional resources. 2:49 Let's work on updating our well content next. 2:51 I'll collapse the solution explorer to give us more room. 2:54 Updating the series title, issue number, and 2:58 favorite values looks straightforward enough. 3:00 Let's replace the text The Amazing Spider-Man with @Model.SeriesTitle. 3:03 Replace 700 with @Model.IssueNumber and 3:10 replace Yes with @Model.Favorite. 3:17 I'm not completely sure about that last one. 3:22 Let's go ahead and run our website and see how the favorite property will render. 3:26 I'll zoom in to make it easier to see the well content. 3:30 It looks like our Boolean property renders as true/false instead of the yes 3:34 no text that our design is using. 3:38 We need a simple expression to convert our Boolean value to text. 3:41 Let's use the C-sharp ternary operator to convert true to yes and false to no. 3:46 Okay, save the file and refresh the page. 3:54 Wow, did you expect that? 3:59 It looks like Razor interpreted the space after the favorite property 4:03 as our intention to leave code and switch to writing content. 4:07 In these cases, we need to be more explicit with Razor 4:11 by surrounding our entire expression with parentheses. 4:14 Save the file and refresh the page. 4:20 Now it displays as expected. 4:23 Sometimes this kind of tweaking is necessary when working with Razor. 4:26 Luckily, it's quick and easy to make a change, 4:30 refresh the page in the browser, and see the results of the change. 4:34 MVC makes this possible by allowing us to make changes to views 4:38 without having to stop and restart our website. 4:42 Let's finish up the well content by updating the artists lists. 4:45 The markup for the new design doesn't look like it has changed from our old markup. 4:49 Let's go ahead and 4:53 replace the new markup with the old markup from the bottom of the view. 4:54 Select the markup that we're interested in. 4:59 Be sure to keep the if statement that surrounding the artists lists. 5:01 Cut it to the Clipboard, scroll back up to the top of the view, 5:05 select the new markup, and paste from the Clipboard. 5:09 Lastly let's fix the indenting. 5:14 Save the file and refresh the page. 5:19 Looks good to go. 5:22 Moving down from the well, 5:24 it looks like the description is also unchanged from the old markup. 5:26 Snake a copy of the description from the old markup like we did for 5:30 the artists lists and paste it over the top of the new markup. 5:34 We can also remove the rest of the old markup. 5:39 Nothing of consequence here now. 5:41 That leaves just the comic book cover image to deal with. 5:44 So far, we've primarily been using Razor to render content. 5:48 But here's an opportunity to see how well it works when working with 5:52 HTML elements and attributes. 5:56 Remember how we added a property to the comic book model for 5:59 our cover image filename? 6:02 Now's the time to use it. 6:04 Let's replace this text here the-amazing-spider-man-700.jpg 6:06 with @Model.CoverImageFileName. 6:14 We could also use our displayed text property for the image alternate text. 6:19 Save the file, switch back to the browser, and refresh the page. 6:27 Once the page is loaded, zoom back out to 100% by pressing control minus. 6:32 Great, now we have our view updated with the new design. 6:39 While we're here, let's also check out the mobile version. 6:44 Right click on any of the page's white space. 6:47 Select the Inspect menu item. 6:51 And toggle on the device mode if it's not already enabled. 6:54 Notice how our grid columns that were displayed side by side in desktop mode 6:59 are now stacked on top of each other? 7:03 That's the Bootstrap responsive grid in action. 7:05 Cool? 7:09 Go ahead and close Chrome and stop the website. 7:10 If you're using GitHub, let's commit our changes into our commit message 7:15 of Updated the Comic Book Detail View Layout and click the Commit All button. 7:21 Our website is really starting to come together. 7:30 Good job digging further into Razor and updating our comic book detail view. 7:34 In the next video, 7:39 we're going to turn our attention to an issue that's lurking in our controller 7:40
You need to sign up for Treehouse in order to download course files.Sign up