- Adding a Data Model 4:51
- Updating the Data Model 2:39
- Creating a Data Model 2 objectives
- Using Strongly Typed Views 6:46
- Using Strongly Typed Views 2 objectives
- Improving Our View Layout 7:45
- Using Razor to Render Boolean Values 1 objective
- Applying Software Design Principles 3:26
- Software Design Principles Review 5 questions
- Adding the Repository 7:55
- Adding Repository Methods 2 objectives
- Updating the Controller 7:16
- Optional URL Parameters Review 5 questions
- Using the Visual Studio Debugger 7:07
- Validating a Bug Fix with the Debugger 5:23
- Section Review 5 questions
Preview
Video Player
00:00
00:00
Using Strongly Typed Views
6:46In this video, we’ll see how “strongly typed” views offer an alternative to using the ViewBag object to pass data from our controller to our view.
Remember how I promised to show you
an alternative to using ViewBag
0:00
to pass data from our
controller to our view?
0:05
In this video,
0:08
I'll follow up on that promise by showing
you how to use strongly typed views.
0:08
In the Controllers folder,
open the ComicBooksController.cs file.
0:15
First let's start by instantiating
our ComicBook model object.
0:21
Visual Studio doesn't like
the class name ComicBook.
0:30
If we hover our mouse pointer
over the offending code,
0:34
we'll see the error information.
0:38
The type or
namespace name comic book cannot be found.
0:40
Are you missing a using directive or
an assembly reference?
0:44
We've seen this error before.
0:49
Click on the lightbulb icon and
0:52
select the first action in the list
to add the missing using directive.
0:53
Okay, now our project is compiling again.
0:58
There are two different approaches
that we can use to set our model
1:02
instance property values.
1:05
We can use our comic book
variable to set our properties,
1:07
by typing a dot after the variable name
followed by the name of the property.
1:11
Or we can set the property values
by adding a set of curly braces
1:15
after the call to
the ComicBook constructor
1:20
followed by a list of
the properties that we want to set.
1:22
This approach is called object
initializer syntax, and
1:26
it's what I'll use to set our
model instance property values.
1:30
Let's move each of the ViewBag property
values to the corresponding properties
1:34
on the model instance.
1:38
SeriesTitle goes to SeriesTitle,
1:40
IssueNumber we can set to the value 700,
1:45
Description goes to, no not description,
1:53
we changed that property
name to DescriptionHTML.
1:58
The artist property is going to take
a little more work as we change
2:07
the array element data type
from string to artist.
2:12
We can start by instantiating our array,
2:15
then we can add an artist model
instance with empty name and
2:20
role properties for
each element that we need to
2:25
add to the array for
a total of five elements.
2:30
To finish, we can copy and
paste the name and
2:34
role values from the ViewBag Artists
array, up to our model array objects.
2:37
I'll collapse the solution explorer
panel to give us more room.
2:43
Script.
2:46
Pencils.
2:54
Inks.
2:59
Colors.
3:05
And lastly Letters.
3:10
Now we need a way to pass our coming
book model instance to our view.
3:17
We could use the ViewBag
object again like this.
3:22
But now we know that's
not the optimal approach.
3:30
Instead, let's pass the comicbook model
instance into our view method call.
3:34
By doing this, we can now update
our view to be strongly typed.
3:39
A strongly typed view is an M.V.C view
that is associated with a specific type.
3:44
A strongly typed view exposes the model
instance through it's model property.
3:50
Let's see how to do this.
3:55
Using the solution explorer,
open the comic book detail view.
3:57
To make our views strongly typed,
4:03
we just need to add a model view
directive to the top of the view.
4:05
Type an @ symbol followed by the word
model with a lowercase m, followed
4:08
by a space and the fully qualified
namespace for our comic book model class.
4:15
Now we can replace all of
the ViewBag property references
4:21
with the corresponding model properties.
4:25
Both SeriesTitle and IssueNumber are easy
to update, just change ViewBag to Model.
4:28
Notice that when we replace
view bag with model for
4:37
the description property reference,
4:40
Visual Studio is able to tell us that it
can't find that property on our model.
4:42
That's right, we renamed the description
property to DescriptionHTML.
4:47
Lastly, update the artist
property references.
4:57
Go ahead and save the view and
run the website.
5:06
Let's zoom in by pressing control plus.
5:10
Something went wrong
with our list of artists.
5:14
That's right.
5:18
I forgot that we changed our artists
array from a list a string values
5:19
to a list of artist objects.
5:24
Let's update our loop to take advantage
of the new artist model properties.
5:26
We can do that by rendering the artist's
row property, followed by a colon and
5:31
a space, then another at symbol
followed by the artist.Name property.
5:36
See how easily Razor transitions
from the row property
5:43
to the colon separating the row and
the name?
5:46
Razor is so cool.
5:49
Let's make one last change to our view.
5:51
Instead of setting the ViewBag Title
property to the string literal comic
5:53
book detail, let's use the comic
book display text property value.
5:59
Save the view and refresh the page.
6:04
Now our Artists list is
displaying correctly, and
6:09
we're seeing the comic book
display text in the browser tab.
6:12
Nice.
6:16
Go ahead and close Chrome and
stop the website.
6:18
If you're using GitHub,
let's commit our changes.
6:22
Enter a commit message of
Updated Comic Book Detail
6:26
view to be strongly typed and
click the Commit All button.
6:32
In the next video, we'll work on improving
the layout of our Comic Book Detail View.
6:39
See you then.
6:44