Styling a Razor Page | ASP.NET Core 101 [6 of 13]

Introduction: Improving the UI

We are continuing to make our ASP.NET 101 crafts page, Contoso Crafts. We will promise crafts.

We were.

We should begin the class.

I don't see him yet.

Yeah. Well, we got this far. Okay.

It's pretty good.

So we're loading our data out of a JSON file and we're outputting onto the screen. I would say unimpressed.

Yeah. I think we can do better. I think I can help you out.

I appreciate that. So the limitations of my abilities with HTML got me this far, lines 12 through 15 or @foreach over our model. As a reminder, the products are coming out of index model. It's really, really cool because anything that I throw in there, any other products I make available, any other services that I make available immediately become available to my page. So everyone's responsible. Notice, there's nothing here about databases. No one's asking about files, they're just data. So let's see. We can put some of your design skills to work.

Okay.

Make this not suck.

Applying Bootstrap Card Layout

Cool. So why don't we wrap this foreach loop that we have here and a div, and call the class card columns.

Okay. Because we're using Bootstrap for our CSS.

Yes.

Bootstrap will make things a little bit easier.

Quick and easy CSS, aesthetically pleasing.

Okay. So card columns you say?

Yes.

There she go, look.

Awesome.

It actually auto-completed which is cool.

That's convenient.

All right. So I've wrapped it in a div.

Yeah. Card columns, that's just going to be. We're going to stick each item in like a visual box that you can see to separate.

Okay. So columns of cards and each one gets its own card.

Yeah.

Okay.

So from there, we want to create another div and just say class equals card.

Okay. So we've got one column multiple cards within them. I want to get rid of that h2 if you don't know what you're going to have me do here.

All right.

Ready?

Yeah. So from there, we're going to create another div.

Multiple divs. What's happening?

Again, what's great about doing this in an IDE is that it will automatically close it for you instead of having to.

That is a good point.

Yeah.

So we have our card, what's our next div for?

Dynamically Adding Product Images

So then we're going to say, the class is equal to card dash image because we need pictures.

I see. So these cards, and then the picture for the card, and then we'll probably get this. We'll have to figure out where this comes from because this div here, the image would come from the database?

Yes.

All right.

Yeah. I also have some CSS on standby that I like to use. So we're going to use style and set that equal to background image.

So in this case, we're doing an inline style.

Yeah.

Well, we could also put this in CSS if you want to. But for now, we'll say background. Look, Visual Studio actually gives you intelligence on that.

Convenient.

That's cool. So background image, where is this coming from?

It is coming from where we got our products from. So let's use URL.

URL, so that's going to be loading from some URL.

Then from there, we're going to do singular quotation marks.

Okay. So we're in the middle of double quotations and then URL takes singulars. Cool.

Then using that good old razors syntax again, we're going to do @ and then retrieve the image property that we set when making the product.

Right. When I say @, I've just switched from HTML into Razor or into C Sharp. So I can say product, in which variables that coming from? That's actually coming from here.

From here.

Because we're inside the foreach loop.

Awesome.

Yes. Loving it. We're getting close to showing something here.

Yeah.

So we're going to have a card class, and then we can just naturally switch back and forth between C Sharp and HTML when we're doing this which is super cool.

Pretty convenient.

Styling the Card Body and Title

All right. But my title is still floating around. It's just chill.

Yeah. So let's do something else with it. Also with that card, we're going to add another div.

Okay.

We're going to call the class card body.

Okay. So the image is one thing then the body text is another.

Yes.

All right.

So what we just did is we've made the background image of that box the image of the product. Then for the card body, we want to include the title.

Okay. So I'll put the title inside and just copy-paste it?

Yeah.

Then do we wrap that in anything?

I was doing-

Yeah.

h2, which may have been too much.

Let's wrap it in h5, a bit smaller.

All right. So h5.

We'll call that class card title.

So you're going to give a class to h5 as well. Cool. So class equals a card dash title. It's cool that Visual Studio knows about my CSS and it's making things easier for me.

Yeah.

Okay. Do you think that's going to look nice?

I hope so. I hope it look a little better. Let's find out.

Can't look much worse than a bunch of h2.

Yeah. It's the worst.

So I'm going to go ahead. Again, Control F5 or start without debugging.

Okay. Build succeeded, running my application.

Okay.

Here we go.

So a little bit better formatted.

Debugging CSS with Browser Developer Tools

That's good. I don't really see my images though.

Yeah.

I don't know what's going on there. I can actually right-click in my browser. I'm using the new Edge and I can say "Inspect." All right. So we can go and see what's going on in here. I remember card body.

What's cool about this is as you hover over, you can see what that line is corresponding to and their use.

Yeah, exactly. That's a good point. Here, you look, they've got background image. So the image came out of there. That looks good.

Yeah.

Maybe I could make the height of that image like a hundred pixel. Look, that doesn't-.

All right. Images are there.

Yeah.

It's just that we-

Too small.

-can't see them because they're too small, or they're invisible, they're zero, or something like that. So it seems like we probably need some CSS.

Yeah.

Now, if you're following along in the Contoso Crafts GitHub, you can follow along in the README and we've got gist where you can go and grab in this bit of code or that bit of code of that CSS and we're going to do that right now. We're going to cheat a little bit because we've done that CSS ahead of time.

Applying Custom CSS Styles

So here's some CSS that will make my CSS not be bad.

What going on, and the reason why we had so many classes defined for all that stuff that I gave you a minute ago is so we can format it however we want.

You can customize-

Indeed.

-the colors, the height, all of that.

Here, we see card image which we just talked about. We noticed that when I did that inspect and made it taller, it worked. Here, we actually have a height called out. So I'm going to go and just select that, and I hit Control A Control C. This is CSS. If I remember, it's over here.

Yeah.

Remember that we put the data in there?

The CSS is in here. So we're just going to replace it entirely.

Yeah.

Let's use her.

Yeah.

No one's going to be sad about that. All right. Let's go and then do a "Refresh" again.

Yeah.

See? I told you to wait.

All right.

People, be patient.

It's here.

It's here.

Understanding the Shared Layout Page

It's not perfect.

Nope.

But it's looking pretty sweet.

I promise. All right. Although I can't get over the eyesore that it's Comic Sans up in the corner.

Really?

Yeah. It's like pretty cool.

You feel like we should just stop right there because that's gorgeous?

If we must, I will look away.

Okay. Well, let's see if we can fix that a little bit because I think that there's some fonts as well that we could bring in and that would make that prettier.

I agree.

That will introduce actually a new concept.

Yeah.

If we go over here to our pages. We've been doing all this work in one page.

Because this is just the index page. But what if we wanted to apply all of this to just the whole website in general?

To every page. If I look at index.cshtml, there's only two divs here and some other stuff. But over here, we have a whole website. Where's all that stuff located?

Wow. I believe there is a file that exists called layout and you click on that. So this is all the HTML but you will see on every single page that you create regardless.

All right.

So you can find all of this including the corresponding CSS on the index page, the error page, any other page that you create and write there.

Right. So any page that is using that shared ones. So by default unless you override it, you're going to be a part of that layout page. So I've zoomed out, just so you can see what's going on there.

Yeah. So for example, like, take the navbar for instance, which has like the title of the site and then any other thing that you choose to add. It's good to put the navbar in the layout file because you want that to appear on every page that you use.

Right. So for example, if I delete home in there and then come back and then hit "Refresh", here's home and privacy.

Bye home.

Boom, almost gone.

Yeah.

Importing Fonts and Styling the Navbar

Okay. So you had said that the fonts offended you.

It did.

Well, our page gets rendered here in the middle of render body.

Yeah.

But our fonts, and stuff, and our CSS appear up here in the header. So why don't we return back to those gist and find out the font that we want to use instead.

Yeah, I think there are a couple of fonts we wanted to use. The ones that you are most interested in are these from Google Fonts.

Yeah. So if you don't feel like using all the default like sans-serif type of fonts and you want to get a little crazy and colorful with the fonts that you use, there's lots of places out there like fonts.google api where you can retrieve different fonts.

All right. So I'm going to put that up there, and then where's our navbar that you were commenting on?

So that navbar is going to be located right there. There we go. There's some classes there: navbar, it expands, toggleable. We're going to make some modifications there as well.

Yes, we are.

All right. So let's see what those are in the gist. Navbar, I'm just going to grab all of those and we'll just compare the two real quick before we make the change. It looks like we're going make it white instead of using navbar or we're going to use navbar instead of white. There we go. Then another thing I can do is say "Format Document." If things ever get weird, you can go and format them. You commented about this before, how do you get that nice indentation? All right. Can we hit "Refresh" and see if this looks better?

Let's do it.

Conclusion and Next Steps

There you go. It's not Comic Sans.

Nope.

All right. So things are starting to look better and I'm feeling better about our website. We've got real data, we've got some CSS that looks nice. We've learned that with Razor pages, we can really comfortably move back and forth between HTML and C Sharp very easily. So now, I feel like we're getting our feet underneath this. I hope you stick around for the rest of our ASP.NET 101 tutorials because we're going to take this website even further.

Let's do it.