This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The “_Layout.cshtml” file provides the overall look and feel for every page on our website. Let’s take a look at that file.
Follow Along
To follow along commiting your changes to this course, you'll need to fork the aspnet-comic-book-gallery repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork>
cd aspnet-comic-book-gallery
git checkout tags/v3.6 -b view-layouts
Additional Learning
For more information about creating responsive layouts, see this Treehouse course.
For more information about Bootstrap, jQuery, or Modernizr, see the following websites.
Microsoft’s ASP.NET website has a great walkthrough on how to use layout pages to create a consistent look and feel for your websites.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up