Introducing Blazor: Razor components - ASP.NET Tutorial

- Hey friends, we are getting towards the end of our ASP.NET Core 101 tutorial. There's been a lot of concepts. We've talked about Razor and Razor Pages, we've brought in HTML and CSS. We've done Model View Controller, we've done a lot of different things. We can see that ASP.NET is really flexible. Lets you do whatever you want, whatever way you want to do it. But we're going to introduce a new concept here called Blazor. And Blazor is interesting, cause it's a new app model, a new way of thinking about your applications. - Okay. - We're going to put that Blazor app model inside of our application. Though ASP.NET, doesn't prescribe how you can do things. So we thought it would be cool to basically introduce a new component. We've been making Razor Pages, but if you recall, when we put that list of products, we just stuck it on the index page. Right? - True. - Just kind of like does its thing. Let's go and look at that. So we were over here on our Razor page, and we have a list of products, and we wrote this at the very beginning. We said for each, for each over our list of products and we put in these divs. But the responsibility for what this did, is kind of spread in a number of different places. And the Blazor application model, would let us make that a reusable component. - [Leslie] That sounds like a good idea. - [Scott] Hmm.Yeah. - Compartmentalize that and just... Exactly where we want. - Exactly. So it's job and everything is all going to be kind of self-contained. And it also allows us to write some C# code, in our page, that will run on the server. And then in the future, run on the server or the client. So let's see what that would look like. So we're basically going to modify our application a little bit. It already has a web API. It already has a number of pages. It has a great model. It has great services. Let's see if we can get ratings working with Blazor integrated into our ASP.NET application. We're going to go a little bit slow. - Yeah. - So you might have to bear with us for a ... - Taking it slow. - a few episodes. - All right? - All right. So while we create a components folder. - [Scott] Hmm. - [Leslie] First and foremost? - [Scott] So, over here on the side we've got services. Because we've got that one service for managing our JSON file. We've got the existing pages that we already have. And these use the Razor syntax, that we're familiar with now. Then we've got our model product. And we've got controllers, and that was using the Model View Controller pattern. But we're going to do what you said, and we're going to make a new folder. We're going to call it components. Because we're going to make a Razor component, and we're going to basically kind of upgrade that to a Razor component. - [Leslie] Right. - [Scott] All right? - [Leslie] And so in this case, the responsibility of the component we're about to create has to deal with just getting the list of products and then... - Right. - Doing things for themselves. - And managing some state as well, because right now we don't have a concept of it being selected. Because I want to to be able to select the product in the card, and then manage the ratings. And then the card would go away. So there's no concept of it being selected or having a state. So let's go and say add, new item. We have a big list of stuff. - [Leslie] Yeah.There is a lot to choose from. - [Scott] Hmm. - [Leslie] But I'm seeing Razor Component there. - [Scott] Yeah. So here's the Razor Component. And you'll notice it's a .Razor extension. And that keeps it separate from those .CS/HTMLs that we've been using. Which we call it, I think we were saying ProductList? - [Leslie] Yeah. - [Scott] Okay. ProductList.razor. - [Leslie] Yep. - [Scott] Okay. Now you come right in here and it looks like. Well, it looks like HTML, cause it is. It looks like it's got a block here called @code, which is interesting. And that @code turns yellow, like we've seen before. And I can write some C# down there. Our original list was kind of like a div with a for-loop. - Yap. So I'm thinking we need to take out that chunk and then copy and paste it here. - Right. So let's try this. Let's grab all of that, cause the goal here is going to be to get it back where it was. Except we're using this new model. So we'll come over to here and I'll do that. It'll be totally self-contained. Okay? - Hmm. - And we had our div class card columns, but it doesn't know about model, and it doesn't know about some of the things we want to use. So we're going to do are, some using statements. And these using statements are just like the ones that we would use in our C# code. Except these are being done at the top of our Razor component. And we're using the @ sign just in front of it. - [Leslie] Yeah. - [Scott] And you see ContosoCrafts is our site and our models are in here. So we're just telling our page, there you go models just lit up there. - [Leslie] Then we need to add our services. - [Scott] Okay, services. And then, remember how we were doing injection. We were injecting in our services and telling people about stuff. Let's inject. This is a new keyword. What do we call it JSON? - [Leslie] JsonFileProduct. - [Scott] Okay. And then we'll name it ProductService and then instead of model, which is what we were doing over there in our... - [Leslie] Car product service. - [Scott] Product service. And then we'll just go and say GetProducts. Cool.All right. So for each product, it's still doing its thing. Everything else is the same. So, so far, other than a little bit of a preliminary things at the top, it's not too different. You had given me a card before, but we don't have any place to put our ratings. - Yeah. So maybe we should add another button, and when the user clicks on that, we can get like a pot little pop-ups screen. - Yeah, get some more info. - Hmm. - So let's make a div for that. And then you were doing whole like card this and card that. - So we can do card footer. - Okay. - That is a good one to use for this. - Excellent. - So, and then within that we can create a small tag. With the class named text-muted. - [Scott] So its a muted text, kind of relaxed text. - [Leslie] It's very chill. - [Scott] All right. - [Leslie] And then inside let's insert a button. - [Scott] Okay. So this will be the button they'll click on? - [Leslie] Yeah. - [Scott] All right. - [Leslie] And so when the user clicks it, which you can use the enclave keyword for that. - [Scott] So let's say more info for that button. - [Leslie] Yeah. - [Scott] And then you're saying on click. Now, this is interesting. Look at these pop ups here in the IntelliSense, they're little ads. Right? These are Blazor events. Seattle's dot, dot, dot. This is an interesting thing. - [Leslie] Yeah. - [Scott] If I get on. Look at that. - [Leslie] You get a lot of stuff. - [Scott] Yeah. So what they're doing here is there there's so many things you can do that they do the IntelliSense in two steps. So you go like that, and you go on, and then you sit on click. So, when you look it turn purple. - [Leslie] Awesome. - [Scott] That indicates that it's going to be managed on the server side. So within that, we'll put some... What to keep track of selecting our product, right? - [Leslie] Yeah. So let's do variable, like EE. - [Scott] E or event or whatever. - [Leslie] Yeah. - [Scott] And then we have to write some code later, but when when someone selects a product, we need to keep track of it. - [Leslie] Right. And yet we need to keep the product idea in mind. - [Scott] And this doesn't exist yet, because we have to write that down here at some point. Right? - [Leslie] Hmm. - [Leslie] And then let's go and just put some classes and stuff that I think we need on this. Because when the button gets clicked on, we also want to pop up a dialogue box. - [Leslie] Yeah. So let's do a data toggle just so we can, you know when we press this button again... - [Scott] It'll close. - [Leslie] It'll close. - [Scott] Yeah. So data hyphen is a place to add additional kind of like along for the ride information that we can go and get ahold of later at. Later. So we've got modal. This was me. We'll have a modal data dialogue. And then in the future... - [Leslie] What are we targeting? - [Scott] We're targeting... - [Leslie] What piece of UI's? - [Scott] Some modal thing that we haven't made yet. - [Leslie] Hmm. - [Scott] All right. And then this is our main button. So there's some bootstrappy stuff that we can. - [Leslie] Yeah. So bootstrap has a lot of different buttons. You can go to their site and see all the different kinds but we're using BTN. Which is their primary keyword, and then BTN dash primary, which will create our generic. I think it's like a black button customer chat. - [Scott] Yeah. And then we can CSS that however we want to. So we've got a button here, it says more info. And it's going to go on click, and do some stuff. - [Leslie] Yeah - [Scott] Okay. So then let's look at the code that we should do for that. Cause we need to start keeping track of these things. And we're going to do it, not in some other page. We're going to do it here and keep track of it. So there's that product, right? - [Leslie] Right. - [Scott] And we had said, we would call a something next selected product. - [Leslie] So the product that these are just clicked on. - [Scott] And then we've been keeping the IDs. Let's hand handle that as well, selected product ID. Okay? - [Leslie] Yep. - [Scott] Now this method doesn't exist. - [Leslie] No. - [Scott] So it does not exist. - [Leslie] So we're probably going to need to create that. - [Scott] Make it.Selected. SelectProduct. And we'll say string productID. And then this is really easy. We'll just go and say, "Hey, selected product?" "There's your ID." And then, just like we did before when we were starting to do our first queries. And we'll talk about linking other videos. A little bit, we go and get those products. - [Leslie] We're going to to use that same query that we were using in the last video, when we're making the readings. - [Scott] Yep. That's exactly right. So GetProducts. get the first one and... - [Leslie] And the ID is equal to the user specified ID. - [Scott] So when you select the product, we know the product ID. Cause we're passing it in here. So when they click on the button, there's lots of different cards. We'll go on and we're going to squirrel it away in these two locations. Okay, cool. So that should be our product list as before. And remember that, we had removed it from here. - Yeah. So we're going to need to still let this page know that that even exists. - Right. And we haven't even told our application about Blazer. Remember when we added controllers, we went and we mapped them. Remember when we added our our end points for our web API, we added that as well. So back to start up .CS, your favorite place that you never go. (Leslie chuckles) - [Leslie] No one that we ignore. - [Scott] Yeah. Well that's where we edit our Razor Pages and we added our controllers. It's just another service. - [Leslie] Don't underestimate the underdog. That is service.CS - [Scott] Yeah. So we're going to add server-side Blazer. And Blazer's an application model, you can pick or not pick. And the reason that we have to add it is that they don't know if we want to use it or not. - [Leslie] Yeah. - [Scott] So I had a dare, what do I do next? - [Leslie] Now we'll need to add another end point. So if we go back under configure services. - [Scott] Okay. - [Leslie] Back where we said, where we mapped the controllers and the Razor Pages. Now we need to map all the Blazer. - [Scott] Right? So Blazer hub will manage all of that communication. So the Razor Pages are here, the controllers are managed there, and then our Blazer hub are for our new things that we're doing. - [Leslie] Yeah. - [Scott] So now we've told ASP.NET about those things. But we still haven't mentioned... - [Leslie] Great. - [Scott] What's going on here. Now this can be a little bit scary, because Blazer has a little bit of JavaScript. But we don't have to actually write any JavaScript. We'll just go and tell the system that we want to use Blazer JavaScript. And then clear this stuff. - [Leslie] Blazer exists. - [Scott] Yeah.Blazer exists. It's a thing. You don't have to do anything. It'll just work. And we just put the script in and then you can... We're going to put it in index. But we could put it in layout or anywhere really. Okay. And then this little bit of code might seem a little bit scary, but you don't have to worry about it once it's written. - [Leslie] Yep. - [Scott] We're going to wait for something to happen, because it's an asynchronous thing. And we're going to go and we're going to render. And they're like, it actually auto completes for me. - [Leslie] Awesome. - The ProductList. ProductList right here. And then we want... - [Leslie] ProductList was the name of the component that we... - [Scott] Yeah, that's a good point. So then we going to to render ProductList, and then we're going to say render mode. Because the way that we want to go and render this, is on the server. Pre-rendered. We want the server to do all that work for us. Okay? And the ProductList, it can't see. And the reason that it can't see, it cause we have to tell it about it. Just like we did before, so we're going to go and use that new ContosoCrafts.Website. And it's not a model. It's a component. - [Leslie] component. - [Scott] All right. - [Leslie] Extra, extra. Read all about it. - [Scott] Yep. And then that looked, that just went away and now it's not squiggly. So theoretically, we should have it back the way it was. Except now we're using the Blazer app model for just this piece. And what's nice again, is I can mix and match. - Yeah. So it's pretty sweet. If you don't feel like leaving the stuff on the homepage, and you want to stick it on the error page for some reason. You can do that. - You can do this, whatever we want. And you can write an entire application with Blazer as well. It's worth pointing out that you could go file new project. Say Blazer, and do the entire application in the Blazer application model. You could do the whole application using Model View Controller, or you could use it with just pages. So it's really up to you with ASP.NET. Which application model you like. Leslie And I like to mix it up, so we are mixing it up. - Yeah. - Let's see if it works. - [Leslie] If it works, ideally nothing really should change. - [Scott] It should look... - [Leslie] We just should be moved at same sort of... - [Scott] Exactly. See, it should look the same. Ah, but we added more info products. - [Leslie] Right. - [Scott] And there's your button primary. And when we click on them, nothing happens. - [Leslie] No. - [Scott] we will find out how to fix that, in the next video.