Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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
[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