Remember how I promised to show you an alternative to using ViewBag

to pass data from our controller to our view?

In this video,

I'll follow up on that promise by showing you how to use strongly typed views.

In the Controllers folder, open the ComicBooksController.cs file.

First let's start by instantiating our ComicBook model object.

Visual Studio doesn't like the class name ComicBook.

If we hover our mouse pointer over the offending code,

we'll see the error information.

The type or namespace name comic book cannot be found.

Are you missing a using directive or an assembly reference?

We've seen this error before.

Click on the lightbulb icon and

select the first action in the list to add the missing using directive.

Okay, now our project is compiling again.

There are two different approaches that we can use to set our model

instance property values.

We can use our comic book variable to set our properties,

by typing a dot after the variable name followed by the name of the property.

Or we can set the property values by adding a set of curly braces

after the call to the ComicBook constructor

followed by a list of the properties that we want to set.

This approach is called object initializer syntax, and

it's what I'll use to set our model instance property values.

Let's move each of the ViewBag property values to the corresponding properties

on the model instance.

SeriesTitle goes to SeriesTitle,

IssueNumber we can set to the value 700,

Description goes to, no not description,

we changed that property name to DescriptionHTML.

The artist property is going to take a little more work as we change

the array element data type from string to artist.

We can start by instantiating our array,

then we can add an artist model instance with empty name and

role properties for each element that we need to

add to the array for a total of five elements.

To finish, we can copy and paste the name and

role values from the ViewBag Artists array, up to our model array objects.

I'll collapse the solution explorer panel to give us more room.

Script.

Pencils.

Inks.

Colors.

And lastly Letters.

Now we need a way to pass our coming book model instance to our view.

We could use the ViewBag object again like this.

But now we know that's not the optimal approach.

Instead, let's pass the comicbook model instance into our view method call.

By doing this, we can now update our view to be strongly typed.

A strongly typed view is an M.V.C view that is associated with a specific type.

A strongly typed view exposes the model instance through it's model property.

Let's see how to do this.

Using the solution explorer, open the comic book detail view.

To make our views strongly typed,

we just need to add a model view directive to the top of the view.

Type an @ symbol followed by the word model with a lowercase m, followed

by a space and the fully qualified namespace for our comic book model class.

Now we can replace all of the ViewBag property references

with the corresponding model properties.

Both SeriesTitle and IssueNumber are easy to update, just change ViewBag to Model.

Notice that when we replace view bag with model for

the description property reference,

Visual Studio is able to tell us that it can't find that property on our model.

That's right, we renamed the description property to DescriptionHTML.

Lastly, update the artist property references.

Go ahead and save the view and run the website.

Let's zoom in by pressing control plus.

Something went wrong with our list of artists.

That's right.

I forgot that we changed our artists array from a list a string values

to a list of artist objects.

Let's update our loop to take advantage of the new artist model properties.

We can do that by rendering the artist's row property, followed by a colon and

a space, then another at symbol followed by the artist.Name property.

See how easily Razor transitions from the row property

to the colon separating the row and the name?

Razor is so cool.

Let's make one last change to our view.

Instead of setting the ViewBag Title property to the string literal comic

book detail, let's use the comic book display text property value.

Save the view and refresh the page.

Now our Artists list is displaying correctly, and

we're seeing the comic book display text in the browser tab.

Nice.

Go ahead and close Chrome and stop the website.

If you're using GitHub, let's commit our changes.

Enter a commit message of Updated Comic Book Detail

view to be strongly typed and click the Commit All button.

In the next video, we'll work on improving the layout of our Comic Book Detail View.

See you then.