- Adding a View 4:03
- Adding a View Review 5 questions
- Using Razor for View Layout 5:30
- Using the Razor Syntax 1 objective
- Displaying a List with Razor 4:16
- Displaying a List of Values 1 objective
- Setting Data in the Controller 5:51
- Using ViewBag 2 objectives
- Adding Design Files 4:41
- View Layouts 5:42
- Section Review 5 questions
Preview
Video Player
00:00
00:00
View Layouts
5:42The “_Layout.cshtml” file provides the overall look and feel for every page on our website. Let’s take a look at that file.
In the previous video,
we added the design files to our project.
0:00
One of the files that our designer
provided was the underscore layout .cs
0:04
HTML file which provides the overall look
and feel for every page on our website.
0:09
Let's take a look at that file.
0:15
Here it is in the Views Shared folder.
0:17
I'll collapse the solution explore panel
to give the code editor more room.
0:20
Everything up to the title element
looks like a regular HTML page.
0:25
The at symbol here tells us
that we're using razor to write
0:29
The viewBag.Title property to the view.
0:33
I bet that we can use the viewBag.Title
property from our content view
0:36
to set the title for our page.
0:41
Let's remember to try that when we
update the comic book detail view
0:43
to use this layout page.
0:46
Here are links to our CSS files and
a script include for Modernizr.
0:49
As I mentioned in a previous video,
Modernizr can be used to detect what HTML,
0:54
CSS and JavaScript features
the user's browser has available.
0:59
This entire section here is for
our bootstrap styled header.
1:04
Notice that we're using the HTML
action link method here.
1:08
The action link method is one of
a collection of HTML helper methods
1:12
that we can use in our views
to generate HTML markup.
1:16
The action link method, as the name
suggests, is used to generate a link.
1:20
We'll be taking a closer look at how
to use that method in a later video.
1:25
Moving down to the first div
element below our header
1:30
we can see a call to
the render body method.
1:33
The render body method is used to tell
nvc where we'd like to have the content
1:36
included, that is the content from the
view that is being requested by the user.
1:41
A layout page could only contain
a single call to the render body method.
1:46
Here in the footer element,
we can see that we're using
1:51
the DateTime.Now.Year property to
write to current year to the footer.
1:54
The last bit here at the bottom are the
script includes for JQuery and bootstrap.
1:59
Let's move on to updating
our comic book detail view.
2:05
Click on the tab here on the right
to show the solution explorer panel,
2:08
and click the pin icon in the upper
right hand corner to pin it open.
2:12
Then open
the Views ComicBooks Detail.cshtml file.
2:17
To tell nvc that we want
to use a layout page for
2:24
this view, we need to set
the layout property to the path for
2:29
our view which is
~/Views/Shared /_Layout.cshtml.
2:36
Next, let's set the ViewBag.Title property
to the title that we want to use for
2:42
our page.
2:48
How about Comic Book Detail.
2:49
Lastly, we can remove all of the markup
from our view that's not specific
2:55
to this view's content.
2:59
The HTML, head and body elements
now all live in the layout page.
3:01
So I'm going to remove everything
up to and including this div.
3:07
Don't forget to also remove
the closing tags here at the bottom.
3:12
While I'm at it, I'll also fix
the indenting of the markup that's left,
3:16
by selecting those lines, holding down
the shift key and pressing tab twice.
3:21
Let's save the view and run our website.
3:26
Awesome.
3:30
Here's our comic book detail view
featuring our website's new design.
3:31
We can also see our page title here
in the browser tab that we set
3:36
in our view using
the View Bag Title property.
3:40
Right click somewhere on
the page in a blank space and
3:43
select the inspect menu item to
open Chrome's developer tools.
3:46
Here in the top left hand corner there's
an icon to toggle the device mode to on.
3:51
If you have the developer tools docked
to the bottom of the screen, you might
3:57
want to dock them on the right to allow
for more vertical space for content.
4:01
Now we can use the drop down
list here at the top of the page
4:06
to change the viewport to match
one of the available devices.
4:09
Here's what our website will
look like on an iPhone 6.
4:14
Go ahead and close Chrome and
stop the website.
4:17
If you're using GitHub,
let's commit our changes.
4:22
Enter a commit message of Updated Comic
Book Detail view to use the layout page.
4:27
And click the commit all button.
4:37
We've done a number of local commits,
so let's sync with the remote server.
4:40
Navigate to the synchronization panel and
click the push link.
4:44
Our comic book gallery website
is starting to take shape,
4:50
especially now that we
have our design in place.
4:53
Let's do a quick review of what we
learned in the last two sections.
4:56
We added to our website
our first controller and
5:01
view for the comic book detail page.
5:04
We learned about URL Routing so
that we could
5:06
understand the relationship between URLs
and our controller and action names.
5:09
And we started to learn the razor syntax
5:15
which we used to improve
our comic book detail view.
5:18
We've covered a lot of ground so far.
5:21
Keep up the great work.
5:24
There's still a lot left to do
before we're done with our website.
5:26
Before you move on, take some time
to review what we've covered so
5:30
far in this course.
5:33
And don't forget to take a break.
5:35
Maybe get up and go for a walk outside.
5:37
See you next time.
5:40