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
In 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.
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/v4.3 -b using-strongly-typed-views
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
You need to sign up for Treehouse in order to download course files.
Sign up