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