This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

ASP.NET MVC Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding a List Controller and View

4:03 with James Churchill

While we can view the detail for a comic book, we don’t have a way to view the list of available comic books. Let’s resolve both this issue by adding a Comic Books List page to our website.

Follow Along

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/v5.1 -b adding-a-list-controller-and-view

Keyboard Shortcuts

  • CTRL+COMMA - Navigate To
  • CTRL+SHIFT+B - Build solution

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up