Using Strongly Typed Views6:46 with James Churchill
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.
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