Adding a List Controller and View

[MUSIC] 0:00 The time has arrived to fix our home page 404 error, that is. 0:04 Currently where we browse to the root of our website, our default or 0:10 home page produces a 404 error. 0:15 That's because MVC is looking for a controller named home. 0:18 And an action method on that controller named index and 0:23 our project doesn't contain either of those. 0:26 Our website is also lacking a key feature. 0:29 While we can view the detail for 0:33 a comic book, we don't have a way to view the list of available comic books. 0:34 In this section, we'll resolve both of these issues by 0:40 adding a comic books list page to our website. 0:43 Let's get started. 0:46 Before we work on our controller or view we need to set up the data source for 0:48 our list page. 0:52 To do this we can add another method to our existing comic book repository class. 0:53 I'll open the navigate to dialogue by pressing control comma and 0:59 type the search criteria, comic. 1:04 Then I'll use the down arrow key to select the third item in the list, 1:06 the comic book repository class, and press Enter to open the file. 1:10 Let's scroll down past our comic book data and add our new, get comic books method. 1:15 It'll be public and return an array of comic book objects. 1:20 The implementation is simple. 1:29 Just return_comicBooks private field. 1:31 Now we can turn our attention to the controller. 1:35 I'll use the Navigate to dialogue again to open the ComicBooksController class. 1:38 In between our constructor and the detail method. 1:44 Let's add an index action method. 1:47 Remember our action method needs to be public and return an ActionResult object. 1:50 For its implementation let's create a comic books variable and 1:57 assign to it the result of the repositories get comic books method. 2:01 Then return a call to the base controller's view method 2:07 passing in the comic books variable. 2:11 Remember, passing a comicBooks array into the View method 2:14 will make our array available via the view's model property. 2:18 Before we go any further, let's build our project. 2:22 Press Ctrl+Shift+B to build the solution. 2:25 Visual Studio opens the output window so 2:28 that we can monitor the progress of the build. 2:31 One project succeeded and zero failed, so far, so good. 2:33 Now that we verified that our project is successfully building, let's add our view. 2:39 We're going to use a different process from what we used to add 2:44 our comic book detail view. 2:47 From within our new index action method, right-click on the View method call and 2:49 select the Add view menu item. 2:54 This opens up the Add View dialog. 2:56 Visual Studio will default the name of the view to the action method name, 2:59 which in our case is index. 3:03 If we open the template list, 3:06 we can see that there are a variety of templates that we can choose from. 3:07 For now, we're going to keep things simple and select the Empty without model option. 3:12 In future courses, we'll take a look at how you can use the other templates 3:18 to quickly scaffold a functional website. 3:22 We'll keep the use a layout page checkbox checked. 3:25 Click the add button to finish adding the view. 3:29 Visual Studio will add an index.cshtml file inside of the views. 3:33 Comic books folder. 3:39 Here's our view. 3:41 Not much to look at right now, but that will change shortly. 3:42 If you're using github, let's commit our changes. 3:46 Enter a commit message of added comic books, 3:49 list view and click the commit all button. 3:54 In the next video we'll work on finishing our view. 3:59 See you then. 4:02