1
00:00:00,760 --> 00:00:04,970
In the previous video,
we added the design files to our project.

2
00:00:04,970 --> 00:00:09,858
One of the files that our designer
provided was the underscore layout .cs

3
00:00:09,858 --> 00:00:15,820
HTML file which provides the overall look
and feel for every page on our website.

4
00:00:15,820 --> 00:00:17,690
Let's take a look at that file.

5
00:00:17,690 --> 00:00:20,265
Here it is in the Views Shared folder.

6
00:00:20,265 --> 00:00:25,160
I'll collapse the solution explore panel
to give the code editor more room.

7
00:00:25,160 --> 00:00:29,630
Everything up to the title element
looks like a regular HTML page.

8
00:00:29,630 --> 00:00:33,600
The at symbol here tells us
that we're using razor to write

9
00:00:33,600 --> 00:00:36,220
The viewBag.Title property to the view.

10
00:00:36,220 --> 00:00:41,070
I bet that we can use the viewBag.Title
property from our content view

11
00:00:41,070 --> 00:00:43,240
to set the title for our page.

12
00:00:43,240 --> 00:00:46,720
Let's remember to try that when we
update the comic book detail view

13
00:00:46,720 --> 00:00:49,030
to use this layout page.

14
00:00:49,030 --> 00:00:54,160
Here are links to our CSS files and
a script include for Modernizr.

15
00:00:54,160 --> 00:00:59,420
As I mentioned in a previous video,
Modernizr can be used to detect what HTML,

16
00:00:59,420 --> 00:01:04,250
CSS and JavaScript features
the user's browser has available.

17
00:01:04,250 --> 00:01:08,310
This entire section here is for
our bootstrap styled header.

18
00:01:08,310 --> 00:01:12,550
Notice that we're using the HTML
action link method here.

19
00:01:12,550 --> 00:01:16,980
The action link method is one of
a collection of HTML helper methods

20
00:01:16,980 --> 00:01:20,780
that we can use in our views
to generate HTML markup.

21
00:01:20,780 --> 00:01:25,490
The action link method, as the name
suggests, is used to generate a link.

22
00:01:25,490 --> 00:01:29,270
We'll be taking a closer look at how
to use that method in a later video.

23
00:01:30,350 --> 00:01:33,460
Moving down to the first div
element below our header

24
00:01:33,460 --> 00:01:36,300
we can see a call to
the render body method.

25
00:01:36,300 --> 00:01:41,130
The render body method is used to tell
nvc where we'd like to have the content

26
00:01:41,130 --> 00:01:46,440
included, that is the content from the
view that is being requested by the user.

27
00:01:46,440 --> 00:01:51,280
A layout page could only contain
a single call to the render body method.

28
00:01:51,280 --> 00:01:54,230
Here in the footer element,
we can see that we're using

29
00:01:54,230 --> 00:01:59,770
the DateTime.Now.Year property to
write to current year to the footer.

30
00:01:59,770 --> 00:02:05,310
The last bit here at the bottom are the
script includes for JQuery and bootstrap.

31
00:02:05,310 --> 00:02:08,002
Let's move on to updating
our comic book detail view.

32
00:02:08,002 --> 00:02:12,724
Click on the tab here on the right
to show the solution explorer panel,

33
00:02:12,724 --> 00:02:17,223
and click the pin icon in the upper
right hand corner to pin it open.

34
00:02:17,223 --> 00:02:24,263
Then open
the Views ComicBooks Detail.cshtml file.

35
00:02:24,263 --> 00:02:29,364
To tell nvc that we want
to use a layout page for

36
00:02:29,364 --> 00:02:36,076
this view, we need to set
the layout property to the path for

37
00:02:36,076 --> 00:02:42,938
our view which is
~/Views/Shared /_Layout.cshtml.

38
00:02:42,938 --> 00:02:48,426
Next, let's set the ViewBag.Title property
to the title that we want to use for

39
00:02:48,426 --> 00:02:49,165
our page.

40
00:02:49,165 --> 00:02:55,170
How about Comic Book Detail.

41
00:02:55,170 --> 00:02:59,730
Lastly, we can remove all of the markup
from our view that's not specific

42
00:02:59,730 --> 00:03:01,920
to this view's content.

43
00:03:01,920 --> 00:03:07,020
The HTML, head and body elements
now all live in the layout page.

44
00:03:07,020 --> 00:03:11,000
So I'm going to remove everything
up to and including this div.

45
00:03:12,020 --> 00:03:15,170
Don't forget to also remove
the closing tags here at the bottom.

46
00:03:16,250 --> 00:03:21,090
While I'm at it, I'll also fix
the indenting of the markup that's left,

47
00:03:21,090 --> 00:03:26,800
by selecting those lines, holding down
the shift key and pressing tab twice.

48
00:03:26,800 --> 00:03:29,260
Let's save the view and run our website.

49
00:03:30,430 --> 00:03:31,380
Awesome.

50
00:03:31,380 --> 00:03:36,250
Here's our comic book detail view
featuring our website's new design.

51
00:03:36,250 --> 00:03:40,500
We can also see our page title here
in the browser tab that we set

52
00:03:40,500 --> 00:03:43,600
in our view using
the View Bag Title property.

53
00:03:43,600 --> 00:03:46,880
Right click somewhere on
the page in a blank space and

54
00:03:46,880 --> 00:03:51,670
select the inspect menu item to
open Chrome's developer tools.

55
00:03:51,670 --> 00:03:57,110
Here in the top left hand corner there's
an icon to toggle the device mode to on.

56
00:03:57,110 --> 00:04:01,060
If you have the developer tools docked
to the bottom of the screen, you might

57
00:04:01,060 --> 00:04:06,110
want to dock them on the right to allow
for more vertical space for content.

58
00:04:06,110 --> 00:04:09,890
Now we can use the drop down
list here at the top of the page

59
00:04:09,890 --> 00:04:14,190
to change the viewport to match
one of the available devices.

60
00:04:14,190 --> 00:04:17,930
Here's what our website will
look like on an iPhone 6.

61
00:04:17,930 --> 00:04:20,980
Go ahead and close Chrome and
stop the website.

62
00:04:22,970 --> 00:04:25,600
If you're using GitHub,
let's commit our changes.

63
00:04:27,520 --> 00:04:37,610
Enter a commit message of Updated Comic
Book Detail view to use the layout page.

64
00:04:37,610 --> 00:04:38,740
And click the commit all button.

65
00:04:40,120 --> 00:04:44,140
We've done a number of local commits,
so let's sync with the remote server.

66
00:04:44,140 --> 00:04:47,590
Navigate to the synchronization panel and
click the push link.

67
00:04:50,460 --> 00:04:53,680
Our comic book gallery website
is starting to take shape,

68
00:04:53,680 --> 00:04:56,860
especially now that we
have our design in place.

69
00:04:56,860 --> 00:05:01,110
Let's do a quick review of what we
learned in the last two sections.

70
00:05:01,110 --> 00:05:04,060
We added to our website
our first controller and

71
00:05:04,060 --> 00:05:06,820
view for the comic book detail page.

72
00:05:06,820 --> 00:05:09,510
We learned about URL Routing so
that we could

73
00:05:09,510 --> 00:05:13,860
understand the relationship between URLs
and our controller and action names.

74
00:05:15,190 --> 00:05:18,300
And we started to learn the razor syntax

75
00:05:18,300 --> 00:05:21,790
which we used to improve
our comic book detail view.

76
00:05:21,790 --> 00:05:24,410
We've covered a lot of ground so far.

77
00:05:24,410 --> 00:05:26,280
Keep up the great work.

78
00:05:26,280 --> 00:05:30,030
There's still a lot left to do
before we're done with our website.

79
00:05:30,030 --> 00:05:33,330
Before you move on, take some time
to review what we've covered so

80
00:05:33,330 --> 00:05:34,450
far in this course.

81
00:05:35,720 --> 00:05:37,550
And don't forget to take a break.

82
00:05:37,550 --> 00:05:40,440
Maybe get up and go for a walk outside.

83
00:05:40,440 --> 00:05:41,190
See you next time.