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
In the previous video, we added our Comic Book List view, but we left it in an unfinished state. Let’s work on finishing it now.
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.2 -b finishing-the-list-view
Code
Here’s the markup that the designer provided to us for the “Comic Books List” view.
<div class="row">
<div class="col-md-3">
<h4>The Amazing Spider-Man #700</h4>
<img src="/Images/the-amazing-spider-man-700.jpg"
alt="The Amazing Spider-Man #700"
class="img-responsive" />
</div>
</div>
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the previous video,
we added our comic book list view, but
0:00
we left it in an unfinished state,
let's work on finishing it now,
0:04
start by adding the model
directive to the top of the view.
0:09
Remember, we need to provide the full
name space, to our comic book model.
0:13
Don't forget the brackets to indicate
that we're expecting an array.
0:19
This will make our view strongly typed,
specifically making the view's Model
0:23
property to be an array
of ComicBook objects.
0:28
That aligns with the type of data that
the controller is passing to this view.
0:31
Next, let's set the ViewBag property
to the string literal comic books.
0:36
For the H2 heading element content
0:42
let's replace index with
the ViewBag Title property value.
0:44
By using the ViewBag Title property we've
prevented the unnecessary duplications
0:50
of the string literal comic books.
0:55
If we ever decided to
change our page title,
0:57
this will make it slightly easier to do.
1:00
Now we're ready to build up the market for
our comic books.
1:02
Our designer has provided us with the HTML
they'd like to use, just like they did for
1:06
the comic book detail view.
1:11
Here's the HTML that they sent me.
1:13
Let's select, copy and
paste this markup into our view.
1:16
The markup itself is
fairly straightforward.
1:22
We start with a bootstrap grid
row followed by a grid column
1:25
that will occupy three of
the twelve available grid columns.
1:29
Within the grid column, is a heading
containing our comic books display text
1:33
followed by the comic book cover image.
1:38
The cover image uses bootstraps
img-responsive C.S.S.
1:41
class, which ensures that the image
will scale to fit its parent element.
1:46
To make this HTML dynamic, we need to
start by surrounding the Grid column,
1:51
with the for each loop.
1:56
So the markup for
a comic book will be repeated for
1:57
each item that we have in our
array just after the grid row,
2:00
create a new line,
type an at symbol to switch to code and
2:04
type for each to select the for
each code snippet and press tab.
2:09
Lets name our item variable comicBook.
2:13
Remember our array of comic
books is available to us
2:17
via the view's model property.
2:21
So they'll be the source for our loop.
2:23
Press escape to exit the code snippet.
2:26
Lastly cut and paste the grid
column markup into the code block.
2:29
Now, let's update the comicBook
markup starting with the heading.
2:34
Replace the text,
The Amazing Spider-Man #700.
2:38
With the comicBook.DisplayText
property value.
2:42
Then, like we did for
2:46
the cover image, on the comic book detail
view we can replace the image file name
2:47
with the comicBook.CoverImageFileName
property value.
2:52
And the alternate text with
the comicBook.DisplayText property value.
2:56
Let's test our changes save the view and
start the website.
3:03
Great, here's our list of comic books,
if we open the developer tools and
3:09
enable the device mode, we can see
that the bootstrap response of grid
3:15
will vertically stack are coming books
in order to adjust to the smaller screen
3:20
Bootstrap really makes it easy to
create mobile friendly layouts.
3:25
Let's switch back to Visual Studio.
3:30
Notice that we didn't need to set
the view's layout property in order for
3:32
the view to use our layout page.
3:36
This is possible because
Visual Studio added an _ViewStart.cs
3:39
HTML file to our project's views
folder when we added our index view.
3:43
The view start file
allows us to provide code
3:49
to execute at the start
of each views rendering.
3:52
This helps consolidate initialization code
3:55
that would otherwise need to be
added to each individual view.
3:58
This is another example of the dry, don't
repeat yourself, design principle at work.
4:01
Let's go ahead and
jump into our comic book detail view and
4:07
do a little cleanup work.
4:10
We no longer need to set
the view's Layout property here.
4:12
So let's remove that line of code and
save the view.
4:15
Now that we have our comic book's list
view let's test our home page by browsing
4:19
to the root of our website.
4:23
No, we're still getting a 404 error.
4:25
in the next video will work on
resolving this issue once and for all.
4:28
Go ahead and close Chrome and
stop the website.
4:33
If you're using GitHub, let's commit our
changes before we wrap up this video.
4:37
Enter a commit message of
updated comic books list view.
4:42
and click the commit all button.
4:49
See you after a short break where
you can exercise your brain.
4:51
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up