Mastering .NET 8 Blazor: SignalR Render Mode

hey Bobby here with coder founder we've recently been exploring the render modes with blazer movie today we're going to talk about signal R if you haven't seen the previous videos in this series detailing the other render modes links to those will be in the description below but in this video we're primarily going to focus on what makes the signalr render mode special when you compare it to SSR and the other available modes so let's take a look if I refresh the page here you can see that it loads the partial of the page and then it has hey look at this some play sort of content and then finally it loads it in okay so there is something going on here it's a little bit different than SSR in that everything is connected to a signal R connection back to our server all right so let's look at the code and how this works so if I go over here and look at my signalr component here you'll notice here this code if you saw the previous video is exactly like the server side render code with the exception here it has a different endpoint for this one and it has an attribute called render mode server now I call it signalr because I think that render mode server and server-side rendering can be a little bit confusing okay so just know that render mode server is going to create a signalr connection between our client the web browser and our server okay so notice here in here the code is kind of the same here we haven't initialized here where we're going to our endpoint and we're pulling back a movie response okay and this move response is basically the the information we get from the movie database API all right and so and that will render a bunch of cards here notice here too it checks to see if it's null if it's not null or if it is null it's just going to render eight blank movie cards and I showed this in the previous video but I'll go over there real quickly and show it to you here if it's null here if it's not no it shows the card with information if it is no it's going to show the the HTML with the placeholder concept or the placeholder bootstrap card in here okay and so these placeholder classes are bootstrap styles that give a little flash so the user knows something's happening all right so let's look how that works and we'll refresh it refresh the page here and when it refreshes you'll see that it loads the bootstrap Styles and then it loads in the cards okay so notice I didn't have to do anything to get these real cards to show up to make sure that the UI changes or anything like that and this is the kind of the magic of laser so let's look at how that works so once I call I'll go over here back to my signalr component here once I call my endpoint here this is going to return an object called movie response a movie response is going to have the eight movies that we're looking for okay the popular movies from there and if this is no it's already loaded in eight blank cards but once this object changes the underline object changes this code will automatically re-execute and then it'll start loading in the movies that it has because the endpoint has finished okay so when we have a long running process this will work now this works a lot like the streaming mode we showed in the previous video in other words that we can show something while something else is loading but the major difference here is the lack or the ability for us not to use JavaScript or interactivity because we have a direct connection to the Dom through the server so the server knowledge Returns the page to us it also keeps up with the current state of the Dom on the server and we have an interactive event we send that event over to the server and it can tell us what changes I need to make and it only sends the Deltas or the changes and then kind of inserts that or overlays it into the Dom itself all right so let's see how that works when we look at our modal okay so you can notice here I've got a movie card here and when I get an on button click event I'm going to call this method called get movie details and this is executed over here on C sharp now notice that this c-sharp function here is going to run on the server and then it's going to call movie details and bring back a movie details object all right and that's all it's going to do and it's going to say hey the status has or the state has changed now this is necessary because some awaited functions won't allow a component to detect and if you have that problem because state has changed and that'll make our components detect that they've changed and in this case it'll change our modal out okay so we have a modal here that has movie details in it okay this changes every time a button is clicked on here so let's look at the movie card and we can go to the top here and it can say hey is it used for JS no okay down here is what we're interested in and so we can have a button here which is showing us the modal that we need to hit and then we have this c-sharp function here that allows us to create an on click event that runs asynchronously and then we can tell it what button to it or what function to evoke in its parent so on button click invoke async and then we pass it in the ID of the current movie all right and this right here is where we call this an event callback as a parameter that calls back into its parent to invoke a function okay so this is where we're calling an event callback and this is where it's called so it passes values out of the component into its parent and that is a very powerful thing not only can we pass values into a component we can pass them back out okay with these events right so if we go back into our movie signalr here we've got this on button click event that's being passed back out of our component and we say oh just run this server side function here and it does and then it calls an endpoint and then it changes movie details what else is happening is the button click itself is happening at the same time that this is happening so we've got a parameter coming back out we're running a server-side function but we're also running a button click all right so let's go back into our movie card and notice here we have this button that has a a BS Target and this is called for bootstrap and it tells it to pop a modal okay where's the modal it's also on the parent okay and we give it an ID of that modal okay and that means it'll find it on the page so if we go back to our signal R here you can see here we're just loading in the modal and then we're also passing in the modal whatever the current value is of movie details okay so if we look at movie modal we can see here that uh movie modal is expecting a parameter here coming in and it's got movie details now initially this may be no because almost clicked a button yet and that's okay this will render with no values and nothing happens because no one tried to pop the modal but as soon as it's clicked the button click renders it finds the um the button click finds this ID here bootstrap finds this ID displays the modal at the same time movie details has also been changed and we can now load in our movie details from the object it has and so we just bind it up here and these are all bound by what's been passed into it now notice here that I haven't written any JavaScript to do it if you looked at the SSR I had to write a lot of JavaScript to bind values to the individual elements on the modal here I don't have to do that all I have to do is reference the object that's being passed in and the property on that object that I want to display okay so I've got an object coming in movie details all right if we look at movie details here we have a lot of thing backdrop budget genres home page popularity the overview the title the poster path we're using these the production companies we're using the release date the revenue the runtime so there's a lot of properties in here that we can utilize to display information about the selected movie okay now this is where it gets magic so when you look at this and I click on the first one here you can notice here it's going to load as soon as it's done it binds to the UI now I don't have a modal per movie here there's no magic going on it's just saying oh that movie details object changed therefore I can now display those values okay so if I do it again I'll pick heart and stone you can see here it's loading calls out the API and it changes the picture changes the synopsis the title all of these things are now specific to this movie one more time it loads and now a new movie is coming in now notice here that is you can pay attention here is that the modal's already popped here bootstrap did its work and then that movie details changed and that caused our component to rebind to display the information we have and that is why people are really excited about blazer because normally I have to do a lot of JavaScript to do this now I don't I can write some very clean components from a separate concern as long as you pass in the the property that I'm looking for the object I'm looking for I can write my UI and it'll always be flawless I don't have to worry about misnaming an element or misnaming an ID or changing as long as I have my component wired up correctly it'll just work and we think that is a very powerful feature inside of Blazer and it's something that people are going to adopt so we're really excited about blazer.net eight I hope this helps good luck and keep coding

Channel: Coder Foundry

Views: 3,146

Keywords: coding bootcamp, learn to code, dotnet, .net, c#, programming, software developer, coder foundry, coding bootcamp in north carolina, wasm, blazor, blazor render modes, .net 8 blazor, signalr, signalr render mode, .net 8

Id: T6KqwUX3oEc

Length: 11min 14sec (674 seconds)

Published: Mon Sep 18 2023