Introducing Blazor: Structure and debugging - ASP.NET Tutorial

- Hey friends, in our last video, in the ASP.NET 101 series that we're doing right here, we introduced Blazor and it was pretty intense. - It was, there was a lot going on- - There was a lot going (chuckles) on. - That's exactly what I was going to say, a lot going on. So let's do this, let's take this video to kind of recap what we were doing. Because there were some moving parts and see what exactly we're trying to accomplish, and then that more info button. We know that we can select a card in our crafts app, but we didn't really do anything with it. - [Leslie] We should add that pop up that we said we were going to do. - Right? - Got to keep a promise. Mm-hmm. So before, when we were doing this, we made our Razor component. We put everything in a dot Razor page. a dot Razor component rather. And before we moved everything from our index Razor page into a Razor component, it's really sort of self-contained. And what's nice about that is that we can now use product list anywhere we could refer to it anywhere. And we had put in onclick and you'll see in Visual Studio that purple boldface, that indicates that that's a Blazer event. Like buttons don't necessarily have an onclick that works that way but when we put the ad in front of it and we may turn purple, now that is a event that we'll run that we'll select that product. And then we'll go and put those in a variable here select product, and then you were saying, we should pop up a modal, we didn't really do that. I'm not even sure if these products are getting selected, cause when I clicked the button- - Yeah. Nothing happens. - [Leslie] And because we have this code that looks like just typical CS, I think we might be able to debug this. - [Scott] We should, exactly. So Visual Studio lets you debug Razor components and let's do that, let's set a break point, because like you said it's just C#, so let's hit F5. I've been hitting Control+F5, which is start without debugging, so now I'm going to hit F5, which is start debugging. And we've got our More Info button, let's click it. - Oh, success. Oh yes, okay cool, So this is really nice. We are in the code for the Razor component, and I can actually hover over these and you see- - [Leslie] You get some data tip action going on here. - [Scott] I love this, this is my favorite feature. I don't think enough people know about- - Yeah. But this is so cool. (chuckles) And then you go and pin that and then watch it change. So here we are, we've just passed that in. Let's hit F10 or in this case step over. So we have selected our product, we can actually see the product. - One of the things that's cool now that you've hit a break point and everything is, you can run the Autos window now but you can also go to the Locals window. And you can see all the different local variables that are in that vicinity, so if you wanted to see what the selected product is you can do that. - Hmm. - [Leslie] If you wanted to see all the products you can do that too because they're all in scope currently. - [Scott] They're all local to this. So here I can hover over product ID. I can see other variables that are local to what I'm doing including my jsonFileName for my component. So everything that got injected into this Razor component is visible to me during this debug process. So it looks like that in fact works. We set selected product ID, which is cool, but we don't actually pop our modal. - [Leslie] Yeah, so let's add that. - [Scott] Let's do that. So we'll go back over here, I'm going to stop my debugging session, and we have been using bootstrap. So we have a lot of divs, - Mm-hmm. - And everyone's HTML is different. I'm sure that if we had CSS skills beyond bootstrap, they would have fewer divs. - (laughing) Yeah. - But the nice thing of course is that it's a structure that we can use. We needed- - We don't have to worry about CSS all the time. - Exactly. It's just frustrating. - We need a div pop-up basically, cause I want to hit that page and I want it to pop up. And then in the future we'll put ratings in at the bottom. - Yeah. Okay. So this is our div that runs every time probably after here but before code. - So we need to add a conditional statement in this case, so when the user selects the product or select that button- - Mm-hmm. We should check to see if selected product is equal to something other than null. - That's a good point, so basically, if we've got a product selected, do some stuff. And in this case, if the product is selected, the modal would just appear on the page. The div would be there when there's a select a product and it wouldn't be there if there's not. - Yeah. Okay. So this is going to require some divs, - Yup. (chuckles) So I'm going to paste in some code here - Lucky for us. It's like a cooking show, you know? Where you're stirring something - Right yup, And you stick in the oven- - You put your divs in the oven and then you put your finished divs- - Is the final product. Outside of the oven. So there you go. (audio glitch) I just brought those divs in, I'm going to go and remove that, cause I didn't want to... I brought my div and my if statement in- - Yup. From the oven, okay? And then in just a moment, you see that these things are popping up, it is just a selected product. - [Leslie] Yeah, and that's because we called our selectproduct - Yeah, so I will go and change that to be a little bit clearer, and it's okay to change your variables like that, there's nothing wrong with that- - You can change your mind. As long as it compiles So then we'll go and make sure it looks, see the squigglies went away. - Problem solved. - [Scott] And the nice thing about Razor components is that the HTML is syntax highlighted as HTML. And it's very, very clear, see where selected- - Yeah, it's highlighted, Mm-hmm. - It's nice, easy to see. - [Scott] And anywhere you have that at is when you switch into your C# or your Blazer context there so- - [Leslie] First it just feels right, hmm? - [Scott] It's really very nice because I know exactly what I'm doing here even though I've got a lot of divs we've got the div for the modal that has the fade. Again, all of these CSS classes are coming in from bootstrap. - Mm-hmm. And that's cool. - What's great about bootstrap is they have a lot of their components pre-made for you, like a modal and tables and stuff. So if you're feeling like, "Oh, I don't want to have to do that just to put up a pop-up window", they already have that code for you- - Right, so in this case we just put in the role dialogue. We have the title, the image, the description and then we have a footer that in the future in a little bit we'll go and we'll put our ratings, I think, in the footer. - Yeah. - [Scott] All right, so let's see if this works, let's go ahead and hit Control+F5 to start with that debugging. And all we're doing here is just changing that one line. It's like, if it's selected, do it otherwise, it's not. We hit more. - Hey. - Hey, look at that! Pretty great. And because we asked for more info we've added a description as to what this item actually is. - Mm-hmm, so we can go and pick any of those and you see how it fades in and it fades out. Super nice, again, all of these are real products. You can make sure that you check out the JSON file with the links to these real products, cause our friends have let us use these pictures- - [Leslie] Yeah, I want to buy- (audio glitch) this products. Like half of this stuff. (laughing) - Yeah, it's pretty cool. This Contoso crafts is going to take over the internet. You watch. - Yes. (chuckles) - [Scott] Cool, so- Leslie watch out. - [Scott] So more info, all we're doing here, we click more info, it sets the selected product. And then if the selected product is not null, we show this and if I go and close this div up, just to kind of give you the collapsing editors. Let me just tell you- - So much nicer. - For beginners, for advanced people, anyone who's doing coding, having a collapsing editor is really nice because it lets you really focus and like back up and say, all right, I've selected product, here's the modal. I can actually hover, see what's inside there if I want to. Or I can open it back up. So just a nice reminder of we've got our product services with our card and that footer. We've got our onclick on that button. If selected product is not null, we show the modal. Here's what happens when we grab that selected product- - Which can also debug. Yep. Which you can debug, which is very nice. Being able to debug that is a huge, useful thing. And if I kind of scroll back a little bit, I can understand that. So I've used the collapsing debugger and I've stepped back and I can visualize what's happening. - That's great. You like that? - Yeah, so I'm thinking, the last thing we need to do is actually add that rating stuff. - Let's do it, so we'll take a break from this video, and click on the next one, where we are going to go and add the rating and really update our database.