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
Let’s update our Comic Book Detail view with the new layout from our designer.
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/v4.4 -b improving-our-view-layout
Code
Here’s the markup that the designer provided to us for the “Comic Book Detail” view.
<h2>The Amazing Spider-Man #700</h2>
<div class="row">
<div class="col-md-6">
<div class="well">
<h5><label>Series Title:</label> The Amazing Spider-Man</h5>
<h5><label>Issue #:</label> 700</h5>
<h5><label>Favorite:</label> Yes</h5>
<h5>Artists:</h5>
<div>
<ul>
<li>Script: Dan Slott</li>
<li>Pencils: Humberto Ramos</li>
<li>Inks: Victor Olazaba</li>
<li>Colors: Edgar Delgado</li>
<li>Letters: Chris Eliopoulos</li>
</ul>
</div>
</div>
<h5>Description</h5>
<p>Final issue! Witness the final hours of Doctor Octopus' life and his one, last, great act of revenge! Even if Spider-Man survives...<strong>will Peter Parker?</strong></p>
</div>
<div class="col-md-6">
<img src="/Images/the-amazing-spider-man-700.jpg"
alt="The Amazing Spider-Man #700" class="img-responsive" />
</div>
</div>
Additional Learning
For more information on how to build websites using Bootstrap, see this Treehouse course.
The Bootstrap documentation can be found on the official Bootstrap website.
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
I was just showing our designer
the progress that we're making
0:00
on our comic book gallery website.
0:03
They were happy to see that we integrated
their design without having to ask for
0:06
any changes.
0:10
That being said,
0:12
it did feel like our comic book
detail view was lacking some pizzazz.
0:13
So they decided to work up
a new design for that view.
0:18
I just got their email
with the new layout.
0:22
Let's implement those changes now.
0:25
Here's the markup that
our designers sent me.
0:27
If you're following along,
0:30
you can get a copy of this
markup in the teacher's notes.
0:32
There are a couple of different approaches
we could take with updating our view.
0:35
We could work on updating our existing
code with the new layout elements, or
0:40
we could bring the new markup into our
view and work on making it dynamic.
0:45
I'm going to opt for the latter option.
0:49
Before we switch to Visual Studio,
let's select and
0:52
copy this markup to the Clipboard.
0:55
Now, let's open the detail Comic View.
0:58
Instead of replacing the existing markup,
I'm going to create some empty lines
1:06
here and paste the contents of
the Clipboard into the view.
1:10
Let's start at the top and
work our way through the new markup.
1:14
The first element that we need
to update is this heading.
1:17
The heading text looks familiar.
1:21
Didn't we create a model property
that returns the combination
1:23
of the series title and issue number?
1:27
Let's open our comic book model and
review the code.
1:29
Okay, I'm not losing my mind.
1:33
We did add a display text property that
returns the series title and issue number.
1:35
Let's update the heading to use that
property value for its content.
1:41
Continuing on, we encounter a series of
div elements with the CSS classes row,
1:48
col-md-6, and well.
1:54
All three of these CSS classes are part
of the Twitter Bootstrap CSS framework.
1:58
Bootstrap provides a responsive grid for
page layout, the row and
2:04
col-md-6 CSS classes are part
of this grid system.
2:09
The row class creates a grid row and
the col-md-6
2:15
class creates a column that spans six
of the twelve available grid columns.
2:20
If we look a little further down in
the markup, we'll find the second column
2:26
that is also configured to
span six of the grid columns.
2:30
The well class is used to give
an element a simple inset effect.
2:34
If we browse to the Bootstrap website,
2:38
we can see an example of
what this effect looks like.
2:41
For more information on the Bootstrap CSS
framework, see the teacher's notes for
2:44
links to additional resources.
2:49
Let's work on updating
our well content next.
2:51
I'll collapse the solution
explorer to give us more room.
2:54
Updating the series title,
issue number, and
2:58
favorite values looks
straightforward enough.
3:00
Let's replace the text The Amazing
Spider-Man with @Model.SeriesTitle.
3:03
Replace 700 with @Model.IssueNumber and
3:10
replace Yes with @Model.Favorite.
3:17
I'm not completely sure
about that last one.
3:22
Let's go ahead and run our website and
see how the favorite property will render.
3:26
I'll zoom in to make it easier
to see the well content.
3:30
It looks like our Boolean property
renders as true/false instead of the yes
3:34
no text that our design is using.
3:38
We need a simple expression to
convert our Boolean value to text.
3:41
Let's use the C-sharp ternary operator
to convert true to yes and false to no.
3:46
Okay, save the file and refresh the page.
3:54
Wow, did you expect that?
3:59
It looks like Razor interpreted
the space after the favorite property
4:03
as our intention to leave code and
switch to writing content.
4:07
In these cases,
we need to be more explicit with Razor
4:11
by surrounding our entire
expression with parentheses.
4:14
Save the file and refresh the page.
4:20
Now it displays as expected.
4:23
Sometimes this kind of tweaking is
necessary when working with Razor.
4:26
Luckily, it's quick and
easy to make a change,
4:30
refresh the page in the browser,
and see the results of the change.
4:34
MVC makes this possible by allowing
us to make changes to views
4:38
without having to stop and
restart our website.
4:42
Let's finish up the well content
by updating the artists lists.
4:45
The markup for the new design doesn't look
like it has changed from our old markup.
4:49
Let's go ahead and
4:53
replace the new markup with the old
markup from the bottom of the view.
4:54
Select the markup that
we're interested in.
4:59
Be sure to keep the if statement
that surrounding the artists lists.
5:01
Cut it to the Clipboard,
scroll back up to the top of the view,
5:05
select the new markup, and
paste from the Clipboard.
5:09
Lastly let's fix the indenting.
5:14
Save the file and refresh the page.
5:19
Looks good to go.
5:22
Moving down from the well,
5:24
it looks like the description is
also unchanged from the old markup.
5:26
Snake a copy of the description
from the old markup like we did for
5:30
the artists lists and
paste it over the top of the new markup.
5:34
We can also remove the rest
of the old markup.
5:39
Nothing of consequence here now.
5:41
That leaves just the comic
book cover image to deal with.
5:44
So far, we've primarily been
using Razor to render content.
5:48
But here's an opportunity to see
how well it works when working with
5:52
HTML elements and attributes.
5:56
Remember how we added a property
to the comic book model for
5:59
our cover image filename?
6:02
Now's the time to use it.
6:04
Let's replace this text here
the-amazing-spider-man-700.jpg
6:06
with @Model.CoverImageFileName.
6:14
We could also use our displayed text
property for the image alternate text.
6:19
Save the file, switch back to the browser,
and refresh the page.
6:27
Once the page is loaded, zoom back out
to 100% by pressing control minus.
6:32
Great, now we have our view
updated with the new design.
6:39
While we're here,
let's also check out the mobile version.
6:44
Right click on any of
the page's white space.
6:47
Select the Inspect menu item.
6:51
And toggle on the device mode
if it's not already enabled.
6:54
Notice how our grid columns that were
displayed side by side in desktop mode
6:59
are now stacked on top of each other?
7:03
That's the Bootstrap
responsive grid in action.
7:05
Cool?
7:09
Go ahead and close Chrome and
stop the website.
7:10
If you're using GitHub, let's commit
our changes into our commit message
7:15
of Updated the Comic Book Detail View
Layout and click the Commit All button.
7:21
Our website is really
starting to come together.
7:30
Good job digging further into Razor and
updating our comic book detail view.
7:34
In the next video,
7:39
we're going to turn our attention to
an issue that's lurking in our controller
7:40
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