I was just showing our designer the progress that we're making

on our comic book gallery website.

They were happy to see that we integrated their design without having to ask for

any changes.

That being said,

it did feel like our comic book detail view was lacking some pizzazz.

So they decided to work up a new design for that view.

I just got their email with the new layout.

Let's implement those changes now.

Here's the markup that our designers sent me.

If you're following along,

you can get a copy of this markup in the teacher's notes.

There are a couple of different approaches we could take with updating our view.

We could work on updating our existing code with the new layout elements, or

we could bring the new markup into our view and work on making it dynamic.

I'm going to opt for the latter option.

Before we switch to Visual Studio, let's select and

copy this markup to the Clipboard.

Now, let's open the detail Comic View.

Instead of replacing the existing markup, I'm going to create some empty lines

here and paste the contents of the Clipboard into the view.

Let's start at the top and work our way through the new markup.

The first element that we need to update is this heading.

The heading text looks familiar.

Didn't we create a model property that returns the combination

of the series title and issue number?

Let's open our comic book model and review the code.

Okay, I'm not losing my mind.

We did add a display text property that returns the series title and issue number.

Let's update the heading to use that property value for its content.

Continuing on, we encounter a series of div elements with the CSS classes row,

col-md-6, and well.

All three of these CSS classes are part of the Twitter Bootstrap CSS framework.

Bootstrap provides a responsive grid for page layout, the row and

col-md-6 CSS classes are part of this grid system.

The row class creates a grid row and the col-md-6

class creates a column that spans six of the twelve available grid columns.

If we look a little further down in the markup, we'll find the second column

that is also configured to span six of the grid columns.

The well class is used to give an element a simple inset effect.

If we browse to the Bootstrap website,

we can see an example of what this effect looks like.

For more information on the Bootstrap CSS framework, see the teacher's notes for

links to additional resources.

Let's work on updating our well content next.

I'll collapse the solution explorer to give us more room.

Updating the series title, issue number, and

favorite values looks straightforward enough.

Let's replace the text The Amazing Spider-Man with @Model.SeriesTitle.

Replace 700 with @Model.IssueNumber and

replace Yes with @Model.Favorite.

I'm not completely sure about that last one.

Let's go ahead and run our website and see how the favorite property will render.

I'll zoom in to make it easier to see the well content.

It looks like our Boolean property renders as true/false instead of the yes

no text that our design is using.

We need a simple expression to convert our Boolean value to text.

Let's use the C-sharp ternary operator to convert true to yes and false to no.

Okay, save the file and refresh the page.

Wow, did you expect that?

It looks like Razor interpreted the space after the favorite property

as our intention to leave code and switch to writing content.

In these cases, we need to be more explicit with Razor

by surrounding our entire expression with parentheses.

Save the file and refresh the page.

Now it displays as expected.

Sometimes this kind of tweaking is necessary when working with Razor.

Luckily, it's quick and easy to make a change,

refresh the page in the browser, and see the results of the change.

MVC makes this possible by allowing us to make changes to views

without having to stop and restart our website.

Let's finish up the well content by updating the artists lists.

The markup for the new design doesn't look like it has changed from our old markup.

Let's go ahead and

replace the new markup with the old markup from the bottom of the view.

Select the markup that we're interested in.

Be sure to keep the if statement that surrounding the artists lists.

Cut it to the Clipboard, scroll back up to the top of the view,

select the new markup, and paste from the Clipboard.

Lastly let's fix the indenting.

Save the file and refresh the page.

Looks good to go.

Moving down from the well,

it looks like the description is also unchanged from the old markup.

Snake a copy of the description from the old markup like we did for

the artists lists and paste it over the top of the new markup.

We can also remove the rest of the old markup.

Nothing of consequence here now.

That leaves just the comic book cover image to deal with.

So far, we've primarily been using Razor to render content.

But here's an opportunity to see how well it works when working with

HTML elements and attributes.

Remember how we added a property to the comic book model for

our cover image filename?

Now's the time to use it.

Let's replace this text here the-amazing-spider-man-700.jpg

with @Model.CoverImageFileName.

We could also use our displayed text property for the image alternate text.

Save the file, switch back to the browser, and refresh the page.

Once the page is loaded, zoom back out to 100% by pressing control minus.

Great, now we have our view updated with the new design.

While we're here, let's also check out the mobile version.

Right click on any of the page's white space.

Select the Inspect menu item.

And toggle on the device mode if it's not already enabled.

Notice how our grid columns that were displayed side by side in desktop mode

are now stacked on top of each other?

That's the Bootstrap responsive grid in action.

Cool?

Go ahead and close Chrome and stop the website.

If you're using GitHub, let's commit our changes into our commit message

of Updated the Comic Book Detail View Layout and click the Commit All button.

Our website is really starting to come together.

Good job digging further into Razor and updating our comic book detail view.

In the next video,

we're going to turn our attention to an issue that's lurking in our controller