- 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
Using Razor for View Layout
5:30Let’s see how we can use the Razor syntax to improve our view layout.
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