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