Introducing Blazor: Interactivity - ASP.NET Tutorial

- Hey folks, we're going to add some interactivity to our Blazor application. We had made a star rating system, ad ratings that we added to our product's service. We've got a modal pop-up dialog right now, which is looking pretty sweet. - Yep, looking slick. - Yeah. So there's our pop-ups and then at the bottom, we've decided that we want some stars, a row of n number of stars by five, that we're going to go and rate and when you click on them, you can rate the product and we're going to do that all in our Razor components. So it's self-contained. - Yeah, so when we were off screen we cheated a little bit and added in a Font Awesome class which contains some star, images that we're going to use. - Yeah, so we added this one line, we didn't really cheat too much. - Yeah. - But Font Awesome is great, just like we're using Bootstrap, Font Awesome gives you glyphs and things. And in order to do the stars we could have done it with images or Unicode things but we decided to use Font Awesome instead. - Of course the stars mean nothing if you can't interact with them. So- - [Scott] True. - [Leslie] We need to create another function that actually lets us rate things. - [Scott] So right now we have select product. And what we need to do is, we need to figure out what the current rating is 'cause our products service has the concept of rating. We have a selected product, but ratings is probably null. - [Leslie] Yeah. - [Scott] Yeah, so there's going to be your current rating. - [Leslie] Yeah, so in that case that will just be the average of all the- - [Scott] Oh yeah, I guess it would be the average. That's a good point. So current rating, for now it'll be zero but we'll calculate it, right. - [Leslie] And we need a vote counts. We can see the number of people who actually voted on the. - [Scott] Yes 'cause ratings mean nothing if we don't know how many people voted on that. And then we should tell them you have X votes. - Yes. Or it could be a singular vote depending on if there's just one vote. - Okay, so we're going to have to generate a label that says you have n votes, zero votes, plural or singular. Okay, cool. - [Leslie] Then let's create a method and call it get current rating. - [Scott] Okay, so get current rating because we have the current product but we'll need to go and figure out what the rating is, all right. - [Leslie] In this case, we called it get, but we have avoid return. And that's because we're just going to use console.log for now. - [Scott] What we've been doing is we've been managing our state here because Blazor manages our state on the server. So the selected product is a thing that's available. And we just want to make sure that it's populated with ratings. And then that we pull that out and put it into the UI. So get current rating is actually going to grab it from the product and then put it into our footer. That doesn't exist yet. But yes, console.writeline for now at some point we'll spit it out to the screen. - [Leslie] Awesome. So from there, I think the first thing we need to do is check if the ratings are equal to no. - Yes, 'cause we were talking about this before and this is actually the second time we've done this. So in the future, we really need to think about like not having any ratings, is that no ratings or having an empty array is that no ratings still figuring that out. But what we'll do is we'll initialize current rating and then we're going to be a little verbose on purpose because we want it to be really clear what's happening. - [Leslie] This is our first iteration. The beauty about code is that you can go back and redo it. Especially once you learn some new things - [Scott] Re factoring his life. - [Leslie] Yes. - [Scott] Okay. So if you do have ratings we need to count them and do some math things - [Leslie] Yeah talking math. - [Scott] I know how to do this part. I'm just going to get the ratings and I can count them. So that's really easy because it's an array radar count. That's cool. And then you said we should make a label. - [Leslie] Yeah, so I get really... One of my pet peeves is when I see votes when it's just like one votes, I'm like, that's not correct. - [Scott] You don't want it to say one votes. Isn't that the easy thing is just to go vote, count. I can do that. - [Leslie] No but why do that when we can go above and beyond the call of duty - [Scott] Why can't I just go vote count plus votes. (Leslie sighing) Okay we'll do it your way. - [Leslie] It hurts my heart. - [Scott] So if a vote count is greater than one. - [Leslie] Then I want it to be equal to votes. - [Scott] And we could do like if vote count is greater than one then do this, but we'll do something we haven't seen before with, with our Shishir. Yeah like this- - [Leslie] Good old question Mark. - [Scott] The turn area operator vote. - [Leslie] So think of it as if you were reading out a conditional statements like is the vote count greater than one question mark. If it is then use votes- - [Scott] That's great. You actually say question mark in my mind, I go is vote count greater than one? Votes, vote, but your way is better. All right. So then the current rating and then you do the math 'cause I did the math - [Leslie] So we're going to take the sum of all those ratings. - [Scott] Okay, so selectedproduct.ratings. We did dot count. And again, we'll talk a little bit about link in a C# 200 level video, but see how nice this is, .count.sum - [Leslie] And then divide it by the number of votes. - [Scott] All right. So that'll be the average of the current rating. - [Leslie] Thank your second grade teacher. - [Scott] Yeah, and of course I probably shouldn't be using an int I should use a decimal but we'll just let them round up three ish stars .3, .5, .2, .6 stars And then we can go and do a little kind of a cheesy debugging but it's just nice to know what's going on. I can say console.writeline. If I wanted to debug this I could also put this out into a div or- - [Leslie] Or if you're also just going to straight up debug this you can add what's called a trace point, which is the equivalent of this write line. Except you don't have to add anything to your actual code to do it. - [Scott] Oh, okay. So a trace point would let me go and do something like this, express it as an expression that You would show me at the debugging time. - [Leslie] Yeah. So, you know, if you have a break point set there then you can see that same stuff in the output window or on any other window. - [Scott] That's a good reminder that the debugger inside of Visual Studio is super powerful. And most of us myself included do the least. (Leslie and Scott laughing) I need to do more. There's a lot of power in there. - [Leslie] Yeah lots of principles - [Scott] They have not done yet. So here it's telling me you don't really do anything with that. And then I'll submit rating if someone actually decides to click on this, the act of clicking a star. - [Leslie] Yeah, so once that rating gets submitted, we can add another writeline in this case just to- - [All] let us know - [Scott] What's going on. And I'm actually going to copy paste. You shouldn't copy paste here. So this will be like what like rating received a four same thing except here, I'm not going to say current rating. I want to use the one that just got passed in. Now this is cool because we made that product service. - [Leslie] We did. So instead of having to do all that serialization and all that jazz, again we can just ask our product service to add the rating for us and it'll handle that. - [Scott] I think that's why it's cool to have a nicely refactored code where I can reuse that. I'm finding myself using that now. And just the third or fourth time we've used that. Now that we've done that we're going to select the product to kind of reassert how that looks on the UI and then select product with a new ID. We will probably want to then update the vote. So we should call get current rating again. So when we select product, let's go back up to select product and let's say at the end, get current rating and then that should update it. - [Leslie] That seems like a good plan. - [Scott] Okay. So again, a little bit verbose, but if we just back up for a second and look at that if we have no ratings set them up else do your vote label with votes or vote nicely done. And then when we do the submit we actually just call productservice.addrating. So that looks cool. - [Leslie] Yep. Now Scott, so we created this method but somebody actually needs to call it. - [Scott] Yes, so right now we've got this card that is presenting our thing and then get all of it's self-contained within our razor component, the header, the body and this footer that we've been talking about but we never actually did anything with, my bad. Let's put some stars in there. Shall we? - [Leslie] Yeah, let's do it. So what we want to do first is under the footer We're going to do another if statement. So first we want to check if the vote count is equal to zero. - [Scott] Right, because if we vote count is a zero, then we'll show something different than if it's not. - [Leslie] Yeah, so let's peer pressure them to vote because there's no votes currently. And you can get in on the ground floor of this new voting trend. - [Scott] All right. Be the first to vote. Cool, get that deal? Okay, so if it's not zero, then we'll do something else. - [Leslie] Yeah, so let's display how many votes there already are. - [Scott] Okay, I just said spam so span instead. And in this case again we're having it'll all be self-contained we're going to say @ and look, vote counts right there and then your vote label. I just say vote label. I don't have to have that work be here. And we could even go so far if we wanted to, again, you're in control vote label could have done all of that. We could have made a method that would do that. And you can refactor this to make your razor component as clean as you want. All right. Now we decided we'd have I think five - [Leslie] Yeah. So let's- - [Scott] Five stars. [Leslie] Yep, so let's create a four loop for that. Just to go through however many (muffled voice speaking) Awesome getting the job done. - [Scott] We don't have to say length. We'll just say up to six or I could say greater than equal to five, depending on how you roll. [Leslie] I like my zero indexing. So- - [Scott] Nicely done, cool. - [Leslie] So from there we want to have a current star variable and we can step that too. - [Scott] Right, because this current star the one that we're currently working on and then we can also light that up. So I will go and say if the one that we're currently iterating on is smaller than the current rating because we're going to have the stars change, color whether the star has been checked or not. So that'd be current rating. So current rating show some stuff else show some other stuff. All right, so we used Font Awesome. And Font Awesome gives us some CSS. And if I recall Font Awesome does it with classes just like Bootstrap. - [Leslie] So this keyword is FA - [Scott] Font Awesome. - [Leslie] FA - [Scott] FA, cool. And then checked stars, checked things, go like that. - [Leslie] So this is like if you've ever been on a star rating system, you might have over rated it and it might change color, or it might be grade out or something, depending on what you're doing. - [Scott] And before, when we clicked on our modal dialogue whenever we had an on click event so we're going to have an on click as well for our stars. Right? - [Leslie] Right. So @onclick that turns purple 'cause Blazor and razor components, do that. And then we'll say ease event. Rocket ship submit rating. Current star. Cool, no, I'm just going to copy that whole thing if that's okay. - [Leslie] Yeah. 'Cause in this case we can just use that same on click - [Scott] And then we'll just have these ones aren't checked. And again, different ways you could do this. You could also programmatically have the if statement live inside the class and turn that on or off if you felt that that was too verbose. But again, we're doing it a little bit verbose on purpose. - [Leslie] Yeah. - [Scott] Cool. - [Leslie] All right. So last but not least, we need to call that, Get current rating. Otherwise this is most likely not going to work. - [Scott] So let's confirm here, we've got our footer and if the vote count else our four-loop, I had added current rating when we were talking before. - [Leslie] Well you know, you beat me to it. - No, I want to make sure I (indistinct) here because we want to call get current rating. Because if you just voted we need to basically update that footer. So get current rating, remember updates to the label. So you click, we draw the stars and you update it. And what's happening is what's called data binding, right? The currently selected product gets changed or the currently, or a label changes or anything changes in Blazor and razor components updates. We didn't actually explicitly tell it to update. We just changed the variable. - It's pretty great. - Which is pretty cool. And again, you can debug all of this stuff so I can hit break points anywhere I want. I want to try and make it work. Let's do it. Pressure's on. (Leslie laughing) Okay, so there's that (muffled voice speaking) Ooh you're the first to vote. Okay, that's good. Actually, hang on. Before I click, you know what I'm going to do? Let's look at our database. - [Leslie] Oh, look at that. - [Scott] Okay, so let's go and click on one. (muffled voice speaking) And which one was this light up corsage. Hey- - [Leslie] All right. - [Scott] We did it. We updated the database very nicely done. That is one of our light up corsages from sailor mercury. - [Leslie] That's great. I love how you can spam the voting system as well. - [Scott] Oh yeah, we have absolutely... I don't see the need of being six stars instead of five stars. Oh, let's take a look. We did from zero to six, zero through five. Okay, we'll have a six star system. - [Leslie] We're different, we're cool. - We're special that's why our Contoso crafts is way better than all the other craft things. Very cool. So in our next video we're just going to do a conclusion about exactly what we did. Walk through the whole thing from beginning to end. Make sure that if this is the first video that you've seen that you back up, you've missed out on a bunch of great stuff. As we're building Contoso crafts.