- Adding a Data Model 4:51
- Updating the Data Model 2:39
- Creating a Data Model 2 objectives
- Using Strongly Typed Views 6:46
- Using Strongly Typed Views 2 objectives
- Improving Our View Layout 7:45
- Using Razor to Render Boolean Values 1 objective
- Applying Software Design Principles 3:26
- Software Design Principles Review 5 questions
- Adding the Repository 7:55
- Adding Repository Methods 2 objectives
- Updating the Controller 7:16
- Optional URL Parameters Review 5 questions
- Using the Visual Studio Debugger 7:07
- Validating a Bug Fix with the Debugger 5:23
- Section Review 5 questions
Preview
Video Player
00:00
00:00
Improving Our View Layout
7:45Let’s update our Comic Book Detail view with the new layout from our designer.
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