Improving Our View Layout

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