1 00:00:00,356 --> 00:00:04,840 So far we've been defining our data directly in the view. 2 00:00:04,840 --> 00:00:09,080 To be honest, doing it this way is unusual. 3 00:00:09,080 --> 00:00:13,070 Typically it's the controller's job to supply the data to the view. 4 00:00:13,070 --> 00:00:17,040 That way our view can be written in more of a generic fashion, so 5 00:00:17,040 --> 00:00:19,430 it can work with any comic book. 6 00:00:19,430 --> 00:00:23,140 Moving the data to our controller also follows the separation of 7 00:00:23,140 --> 00:00:25,460 concerns design principle. 8 00:00:25,460 --> 00:00:28,340 We'll talk more about design principles in a later video. 9 00:00:30,180 --> 00:00:33,720 Let's move our data from our view to the controller. 10 00:00:33,720 --> 00:00:37,500 Starting in the detail view, select the lines of code that we're interested in 11 00:00:37,500 --> 00:00:41,980 moving and press Ctrl+X to cut them to the clipboard. 12 00:00:41,980 --> 00:00:47,660 IN the controllers folder, open the ComicBooksController.cs file, 13 00:00:47,660 --> 00:00:52,113 then create a couple of blank lines above the view method call and 14 00:00:52,113 --> 00:00:55,700 press Ctrl+ V to paste from the clipboard. 15 00:00:56,790 --> 00:01:00,360 Go ahead and fix the indentation of the artists array values 16 00:01:00,360 --> 00:01:03,390 by selecting those lines and pressing Tab twice. 17 00:01:04,870 --> 00:01:10,890 Next we need to replace our variables with defining properties on the ViewBag object. 18 00:01:10,890 --> 00:01:13,719 ViewBag is an object provided by MVC 19 00:01:13,719 --> 00:01:18,071 that allows us to pass data from a controller to a view. 20 00:01:18,071 --> 00:01:23,267 Starting with seriesTitle, let's remove the var keyword and 21 00:01:23,267 --> 00:01:25,921 type ViewBag followed by a dot. 22 00:01:25,921 --> 00:01:30,110 Then, capitalize the letter S in SeriesTitle. 23 00:01:30,110 --> 00:01:33,300 Since we're switching from using variables to properties, 24 00:01:33,300 --> 00:01:36,620 we need to capitalize the first letter of each property name, 25 00:01:36,620 --> 00:01:40,740 which is the commonly accepted convention for naming properties. 26 00:01:40,740 --> 00:01:42,896 Then, do the same for issueNumber. 27 00:01:47,252 --> 00:01:48,244 Description. 28 00:01:51,751 --> 00:01:52,911 And artists. 29 00:02:00,325 --> 00:02:03,120 We can see that it's of type dynamic. 30 00:02:03,120 --> 00:02:07,288 This allows us to define properties on the ViewBag object without 31 00:02:07,288 --> 00:02:10,858 having to modify a class as we would normally have to do. 32 00:02:10,858 --> 00:02:16,388 ViewBag is one of the few real world use cases for dynamic types in C#. 33 00:02:16,388 --> 00:02:19,390 Let's save the file and switch back to our view. 34 00:02:20,440 --> 00:02:25,690 Visual Studio is underlining each of our variable references in a red squiggle, 35 00:02:25,690 --> 00:02:30,580 indicating that the variables no longer exist in the current context. 36 00:02:30,580 --> 00:02:34,227 We need to update each reference with the appropriate ViewBag property. 37 00:02:35,280 --> 00:02:38,590 Notice that if I type ViewBag followed by a dot, 38 00:02:38,590 --> 00:02:43,770 Visual Studio's IntelliSense is not able to tell us what properties are available. 39 00:02:43,770 --> 00:02:48,510 This is one of the key disadvantages of using a dynamic type. 40 00:02:48,510 --> 00:02:50,030 Let's look at that again. 41 00:02:50,030 --> 00:02:55,250 I'll remove the IssueNmber variable, then type ViewBag followed by a dot. 42 00:02:56,300 --> 00:03:01,620 Nope, no help whatsoever with what properties are available for us to use. 43 00:03:01,620 --> 00:03:04,990 So I'll go ahead and type the property name. 44 00:03:04,990 --> 00:03:14,630 Let's finish up by updating description, And both artist references. 45 00:03:17,770 --> 00:03:18,983 There's the first. 46 00:03:21,500 --> 00:03:22,897 And here's the second. 47 00:03:25,542 --> 00:03:28,830 Okay, let's save the view and run our website. 48 00:03:30,940 --> 00:03:34,340 Everything looks good with the exception of the issue number, 49 00:03:34,340 --> 00:03:37,430 whose value is no longer displaying. 50 00:03:37,430 --> 00:03:40,350 Looking at that line of code in Visual Studio, 51 00:03:40,350 --> 00:03:43,300 we can see that I misspelled the property name. 52 00:03:43,300 --> 00:03:44,940 When using ViewBag, 53 00:03:44,940 --> 00:03:48,900 it's very important to make sure that you type the property names correctly. 54 00:03:48,900 --> 00:03:53,310 You won't get an error, instead, your content just won't display. 55 00:03:53,310 --> 00:03:55,100 I'll go ahead and add the missing E. 56 00:03:56,640 --> 00:03:59,950 Notice that our series title displayed correctly, 57 00:03:59,950 --> 00:04:04,690 even though we didn't capitalize the first letter as we had in the controller. 58 00:04:04,690 --> 00:04:09,010 This tells us that ViewBag properties are not case sensitive. 59 00:04:09,010 --> 00:04:12,820 That being said, it would be a good idea to be consistent anyway. 60 00:04:12,820 --> 00:04:19,760 So let's capitalize the letter S, save the view and refresh the page. 61 00:04:19,760 --> 00:04:22,740 And now we have our issue number back. 62 00:04:22,740 --> 00:04:26,040 Go ahead and close Chrome and stop the website. 63 00:04:27,230 --> 00:04:31,238 If you're using GitHub, let's commit our changes before we wrap up this video. 64 00:04:31,238 --> 00:04:36,876 Enter a commit message of updated 65 00:04:36,876 --> 00:04:41,109 comic book detail view. 66 00:04:41,109 --> 00:04:42,525 And click the commit all button. 67 00:04:45,291 --> 00:04:48,910 Great job on updating our controller and view. 68 00:04:48,910 --> 00:04:51,960 Moving the data to the controller is a nice improvement 69 00:04:51,960 --> 00:04:54,870 to the overall design of our website. 70 00:04:54,870 --> 00:04:59,120 Before we finish this video, let's talk a bit about the dynamic type. 71 00:04:59,120 --> 00:05:01,020 While we use the dynamic type in this video, 72 00:05:01,020 --> 00:05:06,100 it was provided to us by MVC via the controller view back property. 73 00:05:06,100 --> 00:05:09,000 In most cases it's not necessary or 74 00:05:09,000 --> 00:05:12,300 even desirable to use dynamic types in our code. 75 00:05:12,300 --> 00:05:16,350 Because we loose all the advantages of having a compiler 76 00:05:16,350 --> 00:05:18,160 check that we didn't miss type something. 77 00:05:19,160 --> 00:05:24,020 We saw this drawback in our view when Visual Studio was unable to help us 78 00:05:24,020 --> 00:05:26,951 from making a simple typo in our ViewBag property names. 79 00:05:28,070 --> 00:05:32,510 We want to do whatever we can to avoid these simple kind of mistakes. 80 00:05:32,510 --> 00:05:34,970 In fact, later in this course 81 00:05:34,970 --> 00:05:38,440 I'll show you an alternative to using ViewBag that I think you'll like. 82 00:05:39,670 --> 00:05:43,530 If you want to learn more about the dynamic type see the teacher's notes for 83 00:05:43,530 --> 00:05:46,090 links to additional resources. 84 00:05:46,090 --> 00:05:49,790 In the next video we'll be updating our website's design. 85 00:05:49,790 --> 00:05:50,290 See ya then.