From the course: Introducing ASP.NET Core

Styling a Razor page - ASP.NET Tutorial

From the course: Introducing ASP.NET Core

Styling a Razor page

- We are continuing to make our ASP.NET 101 crafts page, Contoso crafts. We were promised crafts. - We were. - You said there will be crafts. - I don't see (inaudible) - Yeah. Well, we got this far. Okay. - Pretty good. - So we're loading our data out of adjacent file and we're outputting it onto the screen. You were, I would say unimpressed. - Yeah, I think we can do better. I think I can help you out. - I appreciate that. So my, the limitations of my abilities with HTML got me this far lines 12 through 15, or I foreached over our model. And as a reminder, the products are coming out of index model and 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. Then notice this there's nothing here about databases. No, one's asking about files. It just, there's just data. So, let's see if we can put some of your design skills to work. - Okay. - Make this not suck. - Cool. So while we wrap this foreach loop that we have here in a div and call the class card columns. - Okay. Cause we're using bootstrap for our CSS and bootstrap will make things a little bit easier. - Quick and easy CSS aesthetic, really pleasing . - Okay. So card columns, you said? - Yes. - Oh, there's you go look. - Awesome. - It actually auto completed, which is kind of cool. - That's convenient. - All right. So I've wrapped it in a div. - Yep. And card columns that's just going to be, we're going to stick each item in like a visual box that you can see. - Okay. So, columns of cards and each one gets its own card. - And so from there we want to create another div and just say class equals cards. - Okay. So we've got multiple cards, multiple... So one column, multiple cards within them. All right. I'm going to get rid of that H2 'cause I don't know what you're going to have me do here. - All right? - Alrighty. - Yeah. So from there, we're going to create another div. - Mmh-mm, multiple divs, what's happening? - And again, what's great about doing this is an idea is that it will automatically close it for you instead of having div. - Oh, that is a good point. - So we have our card. What's our next div for. - So then we're going to say the class is equal to car dash image because we need pictures. - I see. So there's 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 righty. - Yeah. And I also have some CSS on standby that I'd like to use. So we're going to use style and set that equal to background image. - Okay. So in this case, we're doing a background we're doing an inline style. - Yeah. - But we could also put this in CSS if you wanted to but for now we'll say background, Oh look, visual studio actually gives you IntelliSense on that. - Convenient. - That's cool. So background image, where's this coming from? - It is coming from where we got our products from. So let's use URL. - URL, so that's will be loading from some URL. - And then from there we're going to do in quotation marks, singular quotation marks. - Okay. So we're in the middle of double quotations and then URL takes singulars. - Great. - Cool - And then using that good old Razor syntax again, we're going to do @, and then retrieve the image property that we said and, 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 and which variable is that coming from? That's actually coming from, here cause we're inside the, foreach loop. - Awesome. - Yes. Loving it. We're getting close to showing something here. - Yep. - 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. - All right. But my title is still floating around. It's kind of just, - Yeah. So let's do something else with it. So also in that card, we're going to add another div. And we're going to call the class card body. - Okay. So the image is one thing then the body text is another thing. - Yes. So what we just did is we've made the background image of that box, the image of the product and then for the card body, we want to include the title. - So I'll put the title inside. I just copy pasted. And then we wrap that in anything I was doing a H2 which may have been too much. - Let's wrap it in an H5 bit smaller. - All right so H5. - And we'll call that class card title. - Oh. 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. Okay. You think that's going to look nice? - I hope so. I hope it'll look a little better. Let's find out. - Cant must, can't look much worse than a a bunch of H2's. So I'm going to go ahead and again Control F5 or start without debugging. Okay. Build succeeded. Running my application. There we go. - It's a little bit better formatted. - That's good. I don't really see my images though. 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. 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. - Yeah, exactly. That's a good point. - Like it used to. - And here you go look. They've got background image. So the image came out of there. That looks good. Maybe I could make the height of that image like a hundred pixel... Images are there, it's just that we can't see them - Too small 'cause they're too small or they're invisible. They're zero or something like that. So it seems like we probably need some CSS. Now, if you're following along in the Contoso Crafts, get hub, you can follow along in the read me and we've got gists 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 'cause we've done that CSS ahead of time. So here's some CSS, that will make my CSS not be bad. - A lot 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. We can customize the colors, the height. - And here we see, - All that. - Card image, which we just talked about. And we noticed that when I did that inspect and made it taller, it worked. Here we actually have a height called out. So I want to go and just select that I'm going to hit Control A, Control C and this is CSS. And if I remember it's over here. Remember that we put the data in there, the CSS is in here. So we're just going to replace it entirely. - Cool. Yeah. - That seems fair. Like that, you know noone's going to be sad about that. All right, let's go, and then do a refresh again. - Ooh, oh yeah. - See, I told you to wait. People, be the patient. - It's here. - It's here. It's not perfect? - Nope. - But its looking pretty sweet. - I promise. Although I can't get over the eyesore that his comic stands up in the corner, but yeah. - Why don't you feel like we should just stop right there 'cause that's gorgeous. - If we must have a look away. - Okay. Well, let's see if we can fix that a little bit 'cause I think that there are some fonts as well that we could bring in that would make that prettier. I agree. And that will introduce actually a new concept. If we go over here to our pages we've been doing all this work in one page - This is just the index page. But what if we wanted to apply all this to just the whole website in general? - To every page, right? If I look at index that CSS HTML there's only two divs here and some other stuff but over here we are all 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 that you will see on every single page that you create regardless. So you can find all of this and including the corresponding CSS on the index page, the error page the any other page that you create in the page - Any page that is using that shared one. 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. So for example, like take the nap bar for instance which has like the home, the title of the site and then any other thing that you choose to add. It's good to put the nav bar and the layout file because you want that to appear on every page. - 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. Home is gone. So you had said that the fonts offended you. - It did. - Well, our page gets rendered here in the middle of render body, but our fonts and stuff and our CSS appear up here in the header. So why don't we return back to that those justs and find out the, the font that we want to use instead. I think there were a couple of fonts we want to use the ones that you were most interested in are these from Google fonts. - Yeah. So if you don't feel like using all the default like San Sarah 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 style google API where you can retrieve font, different fonts. - So I'm going to put that up there and then where's our navbar that you were commenting on? So that Nav bar is going to be located. - There we go. - Yep. Right there. - And. - And, there's some classes there navbar it expands its toggleleable we're going to make some modifications there as well. - Yes we are. - So let's see what those are in the just navbar. I'm just going to grab all of those and we'll just compare the two real quick before we make the change, looks like we're going to add make it white instead of using navbar or we're going to use navbar instead of white. There we go. And then another thing I can do is say format document. If things ever get weird, you can go in format. I mean, you commented about this before how you get that nice indentation. Can we hit, refresh and see if this looks better? - Let's do it. Ah. - Mmh There you go. It's not comic Sans. - Nope, just being happy. - Tell you that. Alright. 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. And 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 us. I hope you stick around for the rest of our ASP.NET 101 tutorials, 'cause we're going to try to take this website even farther. - Let's do it.

Contents