1 00:00:00,490 --> 00:00:03,860 I was just showing our designer the progress that we're making 2 00:00:03,860 --> 00:00:06,200 on our comic book gallery website. 3 00:00:06,200 --> 00:00:10,680 They were happy to see that we integrated their design without having to ask for 4 00:00:10,680 --> 00:00:12,360 any changes. 5 00:00:12,360 --> 00:00:13,630 That being said, 6 00:00:13,630 --> 00:00:18,400 it did feel like our comic book detail view was lacking some pizzazz. 7 00:00:18,400 --> 00:00:22,620 So they decided to work up a new design for that view. 8 00:00:22,620 --> 00:00:25,010 I just got their email with the new layout. 9 00:00:25,010 --> 00:00:26,510 Let's implement those changes now. 10 00:00:27,960 --> 00:00:30,900 Here's the markup that our designers sent me. 11 00:00:30,900 --> 00:00:32,480 If you're following along, 12 00:00:32,480 --> 00:00:35,960 you can get a copy of this markup in the teacher's notes. 13 00:00:35,960 --> 00:00:40,410 There are a couple of different approaches we could take with updating our view. 14 00:00:40,410 --> 00:00:45,510 We could work on updating our existing code with the new layout elements, or 15 00:00:45,510 --> 00:00:49,880 we could bring the new markup into our view and work on making it dynamic. 16 00:00:49,880 --> 00:00:52,260 I'm going to opt for the latter option. 17 00:00:52,260 --> 00:00:55,740 Before we switch to Visual Studio, let's select and 18 00:00:55,740 --> 00:00:57,530 copy this markup to the Clipboard. 19 00:00:58,640 --> 00:01:01,229 Now, let's open the detail Comic View. 20 00:01:06,283 --> 00:01:10,621 Instead of replacing the existing markup, I'm going to create some empty lines 21 00:01:10,621 --> 00:01:14,420 here and paste the contents of the Clipboard into the view. 22 00:01:14,420 --> 00:01:17,890 Let's start at the top and work our way through the new markup. 23 00:01:17,890 --> 00:01:21,500 The first element that we need to update is this heading. 24 00:01:21,500 --> 00:01:23,880 The heading text looks familiar. 25 00:01:23,880 --> 00:01:27,150 Didn't we create a model property that returns the combination 26 00:01:27,150 --> 00:01:29,430 of the series title and issue number? 27 00:01:29,430 --> 00:01:32,180 Let's open our comic book model and review the code. 28 00:01:33,520 --> 00:01:35,980 Okay, I'm not losing my mind. 29 00:01:35,980 --> 00:01:41,380 We did add a display text property that returns the series title and issue number. 30 00:01:41,380 --> 00:01:45,280 Let's update the heading to use that property value for its content. 31 00:01:48,350 --> 00:01:54,528 Continuing on, we encounter a series of div elements with the CSS classes row, 32 00:01:54,528 --> 00:01:58,960 col-md-6, and well. 33 00:01:58,960 --> 00:02:04,780 All three of these CSS classes are part of the Twitter Bootstrap CSS framework. 34 00:02:04,780 --> 00:02:09,523 Bootstrap provides a responsive grid for page layout, the row and 35 00:02:09,523 --> 00:02:15,420 col-md-6 CSS classes are part of this grid system. 36 00:02:15,420 --> 00:02:20,320 The row class creates a grid row and the col-md-6 37 00:02:20,320 --> 00:02:26,300 class creates a column that spans six of the twelve available grid columns. 38 00:02:26,300 --> 00:02:30,070 If we look a little further down in the markup, we'll find the second column 39 00:02:30,070 --> 00:02:34,040 that is also configured to span six of the grid columns. 40 00:02:34,040 --> 00:02:37,920 The well class is used to give an element a simple inset effect. 41 00:02:38,930 --> 00:02:41,120 If we browse to the Bootstrap website, 42 00:02:41,120 --> 00:02:44,400 we can see an example of what this effect looks like. 43 00:02:44,400 --> 00:02:49,070 For more information on the Bootstrap CSS framework, see the teacher's notes for 44 00:02:49,070 --> 00:02:51,730 links to additional resources. 45 00:02:51,730 --> 00:02:54,750 Let's work on updating our well content next. 46 00:02:54,750 --> 00:02:58,010 I'll collapse the solution explorer to give us more room. 47 00:02:58,010 --> 00:03:00,730 Updating the series title, issue number, and 48 00:03:00,730 --> 00:03:03,790 favorite values looks straightforward enough. 49 00:03:03,790 --> 00:03:10,730 Let's replace the text The Amazing Spider-Man with @Model.SeriesTitle. 50 00:03:10,730 --> 00:03:17,144 Replace 700 with @Model.IssueNumber and 51 00:03:17,144 --> 00:03:22,440 replace Yes with @Model.Favorite. 52 00:03:22,440 --> 00:03:26,100 I'm not completely sure about that last one. 53 00:03:26,100 --> 00:03:30,028 Let's go ahead and run our website and see how the favorite property will render. 54 00:03:30,028 --> 00:03:34,150 I'll zoom in to make it easier to see the well content. 55 00:03:34,150 --> 00:03:38,850 It looks like our Boolean property renders as true/false instead of the yes 56 00:03:38,850 --> 00:03:41,680 no text that our design is using. 57 00:03:41,680 --> 00:03:46,090 We need a simple expression to convert our Boolean value to text. 58 00:03:46,090 --> 00:03:54,970 Let's use the C-sharp ternary operator to convert true to yes and false to no. 59 00:03:54,970 --> 00:03:58,220 Okay, save the file and refresh the page. 60 00:03:59,790 --> 00:04:01,690 Wow, did you expect that? 61 00:04:03,110 --> 00:04:07,480 It looks like Razor interpreted the space after the favorite property 62 00:04:07,480 --> 00:04:11,480 as our intention to leave code and switch to writing content. 63 00:04:11,480 --> 00:04:14,930 In these cases, we need to be more explicit with Razor 64 00:04:14,930 --> 00:04:18,335 by surrounding our entire expression with parentheses. 65 00:04:20,170 --> 00:04:22,740 Save the file and refresh the page. 66 00:04:23,840 --> 00:04:26,320 Now it displays as expected. 67 00:04:26,320 --> 00:04:30,990 Sometimes this kind of tweaking is necessary when working with Razor. 68 00:04:30,990 --> 00:04:34,150 Luckily, it's quick and easy to make a change, 69 00:04:34,150 --> 00:04:38,160 refresh the page in the browser, and see the results of the change. 70 00:04:38,160 --> 00:04:42,560 MVC makes this possible by allowing us to make changes to views 71 00:04:42,560 --> 00:04:45,610 without having to stop and restart our website. 72 00:04:45,610 --> 00:04:49,190 Let's finish up the well content by updating the artists lists. 73 00:04:49,190 --> 00:04:53,670 The markup for the new design doesn't look like it has changed from our old markup. 74 00:04:53,670 --> 00:04:54,340 Let's go ahead and 75 00:04:54,340 --> 00:04:57,890 replace the new markup with the old markup from the bottom of the view. 76 00:04:59,210 --> 00:05:01,840 Select the markup that we're interested in. 77 00:05:01,840 --> 00:05:05,380 Be sure to keep the if statement that surrounding the artists lists. 78 00:05:05,380 --> 00:05:09,380 Cut it to the Clipboard, scroll back up to the top of the view, 79 00:05:09,380 --> 00:05:13,110 select the new markup, and paste from the Clipboard. 80 00:05:14,120 --> 00:05:16,050 Lastly let's fix the indenting. 81 00:05:19,120 --> 00:05:21,430 Save the file and refresh the page. 82 00:05:22,590 --> 00:05:23,470 Looks good to go. 83 00:05:24,570 --> 00:05:26,150 Moving down from the well, 84 00:05:26,150 --> 00:05:30,820 it looks like the description is also unchanged from the old markup. 85 00:05:30,820 --> 00:05:34,590 Snake a copy of the description from the old markup like we did for 86 00:05:34,590 --> 00:05:38,090 the artists lists and paste it over the top of the new markup. 87 00:05:39,110 --> 00:05:41,940 We can also remove the rest of the old markup. 88 00:05:41,940 --> 00:05:44,100 Nothing of consequence here now. 89 00:05:44,100 --> 00:05:46,910 That leaves just the comic book cover image to deal with. 90 00:05:48,010 --> 00:05:52,110 So far, we've primarily been using Razor to render content. 91 00:05:52,110 --> 00:05:56,290 But here's an opportunity to see how well it works when working with 92 00:05:56,290 --> 00:05:59,080 HTML elements and attributes. 93 00:05:59,080 --> 00:06:02,680 Remember how we added a property to the comic book model for 94 00:06:02,680 --> 00:06:04,560 our cover image filename? 95 00:06:04,560 --> 00:06:06,410 Now's the time to use it. 96 00:06:06,410 --> 00:06:14,539 Let's replace this text here the-amazing-spider-man-700.jpg 97 00:06:14,539 --> 00:06:19,560 with @Model.CoverImageFileName. 98 00:06:19,560 --> 00:06:23,680 We could also use our displayed text property for the image alternate text. 99 00:06:27,310 --> 00:06:31,130 Save the file, switch back to the browser, and refresh the page. 100 00:06:32,770 --> 00:06:37,490 Once the page is loaded, zoom back out to 100% by pressing control minus. 101 00:06:39,660 --> 00:06:44,020 Great, now we have our view updated with the new design. 102 00:06:44,020 --> 00:06:47,800 While we're here, let's also check out the mobile version. 103 00:06:47,800 --> 00:06:51,040 Right click on any of the page's white space. 104 00:06:51,040 --> 00:06:52,753 Select the Inspect menu item. 105 00:06:54,657 --> 00:06:59,220 And toggle on the device mode if it's not already enabled. 106 00:06:59,220 --> 00:07:03,520 Notice how our grid columns that were displayed side by side in desktop mode 107 00:07:03,520 --> 00:07:05,910 are now stacked on top of each other? 108 00:07:05,910 --> 00:07:09,460 That's the Bootstrap responsive grid in action. 109 00:07:09,460 --> 00:07:10,770 Cool? 110 00:07:10,770 --> 00:07:13,820 Go ahead and close Chrome and stop the website. 111 00:07:15,390 --> 00:07:21,734 If you're using GitHub, let's commit our changes into our commit message 112 00:07:21,734 --> 00:07:28,190 of Updated the Comic Book Detail View Layout and click the Commit All button. 113 00:07:30,960 --> 00:07:34,160 Our website is really starting to come together. 114 00:07:34,160 --> 00:07:39,060 Good job digging further into Razor and updating our comic book detail view. 115 00:07:39,060 --> 00:07:40,360 In the next video, 116 00:07:40,360 --> 00:07:44,280 we're going to turn our attention to an issue that's lurking in our controller