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
Let’s see how we can use the Razor syntax to improve our view layout.
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.2 -b using-razor-for-view-layout
Code
Here’s the comic book description and artist information.
<p>Final issue! Witness the final hours of Doctor Octopus' life and his one, last, great act of revenge! Even if Spider-Man survives... <strong>will Peter Parker?</strong></p>
"Script: Dan Slott",
"Pencils: Humberto Ramos",
"Inks: Victor Olazaba",
"Colors: Edgar Delgado",
"Letters: Chris Eliopoulos"
Here’s the C# code for the comic book variables.
var seriesTitle = "The Amazing Spider-Man";
var issueNumber = 700;
var description = "<p>Final issue! Witness the final hours of Doctor Octopus' life and his one, last, great act of revenge! Even if Spider-Man survives... <strong>will Peter Parker?</strong></p>";
var artists = new string[]
{
"Script: Dan Slott",
"Pencils: Humberto Ramos",
"Inks: Victor Olazaba",
"Colors: Edgar Delgado",
"Letters: Chris Eliopoulos"
};
Additional Learning
Here’s an introduction to the Razor syntax on the official ASP.NET website.
Here’s a great blog post from Phil Haack containing a Razor syntax quick reference. Very handy!
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
Here's the Comic Book Detail View
that we added to our project
0:00
in the previous video.
0:04
As you can see, our view primarily
contains static HTML and content.
0:05
The one exception is this bit
here at the top of the view.
0:10
The at symbol is part of
a special syntax called Razor
0:14
that allows us to mix C#
with our HTML markup.
0:18
Typing in that symbol tells the editor
that we want to switch to using C#.
0:22
The curly braces create a code block
which allows us to write one or
0:26
more lines of C# code.
0:31
We currently only have one line of code,
0:34
which is set in the Views Layout
property to null.
0:37
The layout property is used to
set the path to our layout page.
0:39
Using the layout page gives us a way to
specify the overall look and feel for
0:44
our website pages without having to
include that markup in each view.
0:48
Setting the layout property to null,
0:53
tells NVC that this view
isn't using a layout page.
0:56
We'll take a closer look at
layout pages in a later video.
1:00
Let's add some variables
to our code block.
1:03
Keeping in mind that this is our Comic
Book Detail view, let's add variables for
1:06
the series title, issue number,
description, and list of artists.
1:11
Series title will be a string set
to the value The Amazing Spiderman.
1:16
IssueNumber will be an integer
set to the value 700.
1:23
Description will be a string
containing HTML formatted content.
1:32
To save some time, I'll copy and
paste the description HTML from Notepad.
1:37
If you're following along,
you can copy and
1:43
paste this HTML from the teacher's notes.
1:46
And lastly,
artists will be an array of strings.
1:49
Again to save time, I'll copy and paste
the artist string values from Notepad.
1:54
If you're following along these values
are also available in the teacher's notes.
2:00
Let's go ahead and fix the indenting
by selecting these lines and
2:05
pressing the Tab key twice.
2:10
Now let's update our view
to display this content.
2:12
Let's start with updating our
heading to display the series title.
2:16
We can write a variable value to
the view by typing an at symbol
2:20
followed by the variable name.
2:24
Notice that Visual Studio gives us and
intellisense on the available variable
2:27
names which saves us from
having to type the full name.
2:31
When the correct item in
the pop up is highlighted,
2:34
a series title is here then
press Enter to select it.
2:37
Also, notice that Razor automatically
detects when we have transitioned
2:40
back to mark up.
2:45
Next, let's write our issued
number variable value to the view.
2:47
I'll use an h2 element and prefix
the value with the text issueNumber.
2:51
For our description, let's put
a heading in an h5 element followed by
3:00
the description variable
value in a div element.
3:04
And let's do the same for
the artist variable value.
3:12
First our heading, then our div
element containing the variable value.
3:16
Let's run our website and see how
things are shaping up in the browser.
3:23
Once the page is loaded,
3:28
I'll zoom in by pressing control
plus to make it easier to view.
3:29
The series title and
issue number both look good, but
3:33
it looks like there's a problem
with our description.
3:37
The browser is displaying our markup
instead of parsing and interpreting it.
3:40
Also, we're not seeing
our list of artists.
3:45
If we right click
somewhere on the page and
3:48
select View page source,
we can see the source code.
3:50
Looks like NVC is escaping our HTML.
3:55
Notice that the paragraph tag at
the beginning of our description has been
3:59
escaped using the less than and
greater than HTML entities.
4:03
Go ahead and close the source code tab and
switch back to Visual Studio.
4:10
But keep the website running.
4:15
We can make changes to our view
without having to recompile,
4:17
which enables us to make a change, switch
back to the browser, and refresh the page.
4:21
For security reasons,
4:26
MVC will escape by default any HTML
content that is written to the view.
4:28
Escaping HTML content prevents
the browser from rendering it.
4:34
To prevent MVC from doing that,
4:38
we can use the html.raw method
to write the value to the view.
4:40
Save the view and
refresh the page in the browser.
4:51
Excellent, that fixed our description.
4:56
Let's close the browser and
stop our website.
4:59
If you're using git hub,
let's commit our changes.
5:04
Enter a commit message of
Updated Comic Book Detail
5:09
view to display comic book information,
5:15
and click the commit all button.
5:20
In the next video, let's see what we
can do to fix the list of artists.
5:25
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