Blazor JavaScript Interop (Easy How To)

hey Bobby here from coder Foundry and one of the things that I get a lot of comments on YouTube and as well as seeing Reddit posts and Twitter and the like of people talking about Blazer and one of the drawbacks a lot of times we talking about Blazer is writing JavaScript interupt in fact a lot of people say I don't adopt blazer because of JavaScript interrupt because they make the case that it's kind of difficult it's hard to do or um they don't understand it I want to show you today how that's done and it's not um very hard at all actually to write JavaScript and then call that from your Blazer app it's actually pretty simple once you know the pattern let me show you what I'm talking about I've got this movie app here and if I hit play here you can see there's a movie that I can get play and then I've got these cards here if I click on the button it'll switch the movie for me now normally this or the only way really to do this is with JavaScript because HTML 5 is built into the the browser and so the video element is inside the browser the only way to get to these browser apis is through JavaScript so if you're writing a Blazer web assembly app you've got to call this somehow with JavaScript if you want to do this now let me show you how you do this in Blazer we can wire this up all right so let's get started um first thing I think we can do is look at the couple of files that we're going to be working in first we have a page here called a movie player page and this just basically our page that you just saw and it has a couple of components on it the first one is that video element and you can see here that this video element here is just a standard HTML 5 video control there's no Blazer component here at all and so the only way really to interrupt with this is or interact with this is through JavaScript and we got use JavaScript interrupt when running web assembly now the thing that you may be aware of is also have a component called a movie card and those are the cards that you at the bottom and have a button on it and you click on it and it plays the movie we need to make sure that this can also interact with this page so we'll write a callback function that calls JavaScript okay and then that JavaScript will in turn load the correct video in this video player all right so let's get started and show you this isn't as bad as you think so if you want JavaScript on a page um the first thing you have to do is you have to inject the JavaScript the runtime and that's called J s runtime and I typically call MJS now the other thing that you're going to want to do if you're loading in modules like we will today is you want to dispose of those so we're going to implement IAS sync disposable and this allows us to dispose of any modules or JavaScript modules we load in because that's kind of how you do it you've got to load in or import a module into web assembly all right so the first thing that we've that we've done that now is let's go to solution here and I want to add a JS file right to this page so I'm going to right click here and add new item I'm got a Javascript file and I'm going to make this isolated which means that this JavaScript will only apply to this page and you do that through a name convention you name it exactly as the component's name so I'm say movie player razor. JS add it and if you look here now this is nested underneath the movie player here so now I have a Javascript file inside my page component here movie player okay so let's write our first JavaScript here for this it's pretty simple it's exactly like any JavaScript you've been writing so I'm going to say function and I'm going to say Play movie and my movie is going to take a couple of parameters I'm going to say movie name and then I'm going to also pass it in the video element um I don't want this function to be responsible to figure out what element on the page that's after it just will work because I'm going to pass it the video element reference to that and the file name of the movie that I want to display all right so now once I have that I can just type in let's see video elements and we'll say SRC Source equals and my movies are located in a folder called videos and then I'll use a temperate literal here and I'll pass it in the file name should work make sure this is an actual temperate literal little tick tag there all right and then the other simpler thing I can do is say video element I'm going to set the volume on it because I don't want it to be very loud or too loud when it starts off say equals and we'll set it to 0.1 very low make sure you spell these right it is Javascript so there is no type checking in here like you're used to in C and then um we'll hit play so that's our super simple JavaScript file to interact with our video element let's write one more function a load function um because there is a case where we just want to load the video in not play it so we'll say load movie and um it'll do the same thing file name video element let's check our folder here I think we called it videos so let me chck it to videos here okay file name volume is set to one and its change will be we'll just load it all right so we got a couple of functions there now what I want to do is export these functions and import them as in modules into my JavaScript or into my web assembly code so I'm going to say export in front of this keyword and JavaScript and that's it so we've now wrote Our JavaScript and so any amount of JavaScript that you want to write any functions that you want to import you just put export in front of them and write them it's pretty much that simple all right so let's see how we call this or get this loaded into web assembly so I'm coming over here to My Method here and what I want to do is I want to load this after the entire page has been rendered so I need to make sure that if I access elements on the page that they're there for me to access and so I have a couple of several events inside of Blazer and one of those is on after render async and um what this runs is if you Mouse over this if you're in Visual Studio it says after the US finished updating okay and all the elements on the dime have been loaded okay now we also can check to see if want to do this at the first time and so at the first render this is when we want to load in our module we don't load it in every time the page refreshes just once it'll be fine so I'm going to create a private variable here that's going to hold the module that I want okay so Jigs and it's going to be an object reference and we'll just say we'll call this module okay you call it whatever you want we're going to call it module we're also setting this up saying hey this could be null but we're going to load it in right here and I'm going to say module equals a weight and I'm say JS Dot and from here I want to invoke async and then I'm going to load in my Js my object reference import and then I got to tell it where my Js is okay it gave me some hints there but that's not right ours is located in and you can look at your solution to find this components pages and then the razor JS that's located in so you just have to type it in here so we can say components slash Pages slash movie player. razor. JS just that easy okay so this will tell it where to load it or where to locate the Javascript file and then it'll import all of the functions that are labeled for export okay and so now we have a complete module here that we can call all right so let's see how we would call it any function so the first thing I want to do is load in a default movie so if you go down through here and look I've got a get movies function here and I'm loading in all of these movies the first movie in my list is this movie called scape Bros and so what I want to do is load in scape Bros when the page first loads so there's a movie already there you can hit play Okay so let's see if we can do that first so on the first render the first time the p page comes up I want to load in a movie okay so I can say await module and I'll say do invoke and this is a void async so it doesn't um our JavaScript function doesn't run anything if it did um run something you'd have a type coming back out of it okay so let's call our load movie function so what you do is you put the name of the function in quotes here okay so if we go back and look at our JS this is this load movie function and then you pass in the parameters in order okay so this is in quotes Here and Now what I want to do is pass in the file name of the of the default movie that I want well what is our default movie well if I go over here and um I've got my un initialized here and this is getting a list of movies it's going to get the movies I can grab the first one out of a list so let's do that so let's we've got this private variable called now playing movie and what I want to do is hold in the first movie in the list initially so when I do initialize here I'm just going to say now play movie equals and I'm going to say movies at position zero okay so this is an array or a list of movies here right here I have a list of movies and now I'm getting the first movie out of that list position zero and I'm storing it in the now playing movie okay because I always want to know which movie does the player hold all right so now that I know the the movie that I want to load in I can right here put in my first variable here and I'm going to say now playing movie but I need the file name and because I know that this is a class that I have let go and look at this real quick my movies are modeled here have title poster and video this holds the name of the file that I want to play so I'm going to use the video property here for my movie class and so I can say dot video okay so that's my first parameter okay now the next thing that we need to do is grab a hold of the video element right here we need to get a a reference to this and pass it to our JavaScript now normally inside a JavaScript you could use the ID and you could say document. get element by ID or something like that here inside of Blazer we have another thing called a ref and we can get a handle to this by calling it to a ref so let's make another variable here and we'll call it element reference so this is an element reference and we'll call this element reference video player so now I can just put video player up here because it's a variable boom so now I have a reference to it it operates a lot like this ID does in JavaScript world but this gives us a reference to this complete element all its attributes properties um like you normally would um you expect from a get element by ID all right and so now what I can do is I can pass in video player here so now I'm passing these two strongly typed properties to a JavaScript function okay now notice here um it is important to note that I am running this on after render async and this is when the dime has finished updating so that my element reference will be available if I do this and I'll initialize this may not be there and that's why I'm Runner it in here and the other thing is I only want to load this once I don't want to load this every time there's a change to the page just on the first render okay so that should load in a movie for us let's see if it does I forgot to implement my ey disposable here let's do that so this is right here saying implements and that means we must implement this interface so let's do that real quick because now that we have a module now we have something actually to dispose of so I'm going to say async value task and if module is not null then dispose async and this will run and clean it up for us when we run it okay so this is real important when you're loading in JavaScript modules that you do dispose of them put a semicolon here here we got any let's build this before we try to run it see we got any other issues okay now let's run it our page runs and check it out we do have a video running up here kind of cool load it in um another thing here notice here I've got an overlay here with the title in here and so I don't really have I'd like to put the title in there when it loads up so let's see if we could add that so what I can do is because I know what this now playing video is if you look in here there's also a title element as we looked at before so I can add this right here to my code here inside of Blazer makes it pretty simple so I'm going to put a colon here and say at and we'll say now play movie. tile boom okay now it's saying that this could be null we'll say We'll allow a null reference here we'll say hey this can be null and that's just fine and we also get in a null a null warning here as well that's what that green underlines for and so we could say hey if this is null don't try to load it so let's just do that let's just do a check here and say if now plan it should always be here but you know you never know and so now we can um get rid of that green l so this means this this load will not happen if this is null but we're loading it here on initialize but if someone came in changed your code or this didn't run for whatever reason um this wouldn't blow up because it would just skip over it okay so let's see if we've got our title in there now and we do so we've got our skate Bros title loaded in there we hit play and you can see now our movie is playing but notice here when I click on these nothing happens so now we need to make to beware of this button to load the change the video out here and then we'll be done okay so let's do that all right so let's look at our component here just see how this works if you're new to Blazer this is a UI component right here and you can see here it's just some HTML that I've written and it has a button in here that says play okay and then it says on click play movie now if you come down here um this is my function here called Play movie but then I have a parameter that allows me to um call a movie back in the parent so it's a call back so this value or this event is being pushed back up to the parent and that's pretty powerful for components um pretty easy for us to wire this up so now our component um doesn't need to know anything about the parent or the page that it's placed on it just triggers an event and says hey I've clicked my play button okay and it's up to us um at the page level to figure out what to do with it all right so now that we know sort of how that works let's go back over to our movie page that's over here and let's see if we can wire this button here okay so I'm going to come to my card here and you can see here I've got a couple of parameters here and one of them that on playback if I click that I need to give it a name of a function or a method that I want to call on this page so let's write one so I'm going to write a brand new method here and we'll say private async void doesn't do any doesn't return anything and then we'll call it play movie and it needs a type of movie here now the next thing that it can do is it can set when we hit play it says hey you know what it's playing now the Now movie is playing so now we set that equal to the movie that's being passed in from the component now let's go back look at our component so you understand a little bit more what's going on so the input parameter gives this a movie a specific instance of one of the movies in our list the Callback passes that instance back out so we have a type going on here in our callback we're passing back out a movie okay the inst of the movie the one that was that was piped in right so if we go here and look at our movie player and we come in here we can see We're looping over each of the items in our movie list and we're passing in a movie for each card and now on our call back we can say you know what I want you to call this function when they click it and so I'm going to say on Play Play movie and that's it that's all we have to do and because it's passing a value back this parameter will get loaded because it's been defaulted over there on our callback now the other thing that we could check here we could check to see if we have javascripts or modules saying hey this could be null so why don't we just check that to see if our module is null we can say if module is not null and this is our JavaScript and let's just wrap this we don't want to call anything that we don't want okay change that to Avid async all right now the thing that I want here is I don't want to call load movie I want to call Play movie on this one so remember Play movie this is when they click the button I want it to play and then I want to pass in the movie video and then our reference to a video player now notice here that our reference is defined up here so that's Global to all of these methods in here so I can just put it in there and then I'm getting the instance that being passed out of the current card into here so I only will get the movie that's in the current card I also can make this just a bit more consistent here we'll say now playing video yeah we'll do it like that so we're calling it the same way as we did up here right so that's Play movie it's passing the video file and then boom that's it all right let's run it now see what happens so it loaded in scate rows what if we click before the storm will it change it sure enough there it does just changing it got all of our movies here all loaded in kind of cool maybe I could change the style here based on the current movies and maybe show some like style that says hey this is the selected movie that's playing okay now that we know that this will only load in the movie that's in the card all right let's see how we could do that all right so one of the things that I have here is I have a now play movie okay so now I know the instance that has been clicked on all right and so that's being reset every time someone clicks on the button this function gets called and I reset this variable what I could do is I can now pass something back into my movie card that says hey if this if this is the now playing video do some stuff all right set a class or whatever you want to do and I'll show you what we want to do okay so let's add a parameter to this movie card I'm come back over to my movie card here I may already have it if I don't I'll just add it let me add a oh I've got it right here I've got a parameter that has the title of the now playing movie so I want to say the now playing movie want check the title string okay and so I want to set this and what I can do is I'm going to come up to this HC card where this class is and I want to add this class to it and what's selected is if you go look at our CS here that's inside this card selected just puts a a solid yellow border that's what this color is three pixels and it put it around the card there so that's all this class is doing but I need to conditionally add this if it's been clicked on okay all right so that's what I want to add here and this is pretty slick the way that um Blazer works here and allows us to do things like this pretty easily so I'm going to write code right here in my front end here I'm going to say at and this will be our code block here that we want to put in here and I'm going to say now plain okay so the title that's passed in here does it equal the instance that's passed in if it is that means it's selected if it's not it's not selected okay so I'm going to say equals movie. tile and then I'm going to use a turn are here so I'm going to say if this is true add selected else make it empty boom and now what all I need to do now is make sure that this is set in my movie page so I'm going to go back to my movie page here and I'm going to add it right here so I've got a new I've got a parameter now playe and it it'll be dark green here because it knows that this movie card has this parameter and now what I can do is add some now playing. tile we'll pass the title to it all right so now what's going on here is if this changes the value of now play which it will every time this is clicked this Forge Loop will get re-executed and it'll check to see if the title equals the title of this movie and only colorize the one that it needs to now you can see here it's already selected this but if I click on here watch it sets this to Yellow around it and these others are not selected so as I go through here um they aren't selected here okay well that's JavaScript interrupt um what's next um well if you want to and you want to learn Blazer you can check out our Blazer course um go to coder found.com we'd love to be your teacher your coacher a mentor and help you learn this exciting technology Blazer we think it's going to be really hot um really in demand and you can see here it's the first time Microsoft has really brought the front end tool set with the backend um server side framework they have with a front end framework component first framework it's very exciting what you can do with Blazer and you also as You' seen today it's not that hard to write JavaScript interupt anyway I hope this helps good luck and keep coding

Channel: Coder Foundry

Views: 4,221

Keywords: coding bootcamp, learn to code, dotnet, .net, c#, programming, software developer, coder foundry, coding bootcamp in north carolina, blazor, blazor javascript, blazor javascript interop, blazor javascript call c#

Id: HcVfL9o4LUw

Length: 27min 52sec (1672 seconds)

Published: Tue Jan 30 2024