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