JS Interop: Calling C# methods from JavaScript | Blazor Tutorial 6

hello everybody i'm nick and in the previous video we saw how we can call javascript functions from c-sharp in Blazer in this video we're going to do the opposite we're gonna see how we can call c sub methods from javascript functions in Blazer we can do this in Blazer and there might be a use case might not be the thing you would do normally on a per component basis but once the blue moon you might need to do it and this video will show you how you can do that there are actually two types of methods you can call with this technique it's static methods and methods that are part of an instantiated class I'm gonna show how you can do it with both but I'm gonna start with static methods because they are the simplest to show this video is part of my blazer tutorial series so if you don't want to miss any episode in the series please subscribe wearing this sub notification well to get a defile of new episodes so let's just dive into the code here's where we left off from the previous video and I'm gonna continue in the same fashion where I just add pairs of sections and then I add some functionality to illustrate my point the first thing I want to copy is an h3 so header 3 and I'm gonna name this give me random int so just a random number and then I'm gonna copy this deep that we have for the answer segment I'm gonna say the random number is and then are we gonna get a random number and the whole idea of this section will be to use a c-sharp a method from Jas to get back a random number so let's name this random number span and then I need a button to actually trigger this but as I said this won't be triggered by C shop so let's remove the unclick for now we're gonna add it back in what I'm gonna show you and let's give this the class info to just make it look different and last but not least let's name this button to run them or run the mines I don't know this looks good so we have this new segment and now we need to when we click this pattern this span will be populated with a random in coming from a c-sharp method so let's go ahead and make this method I'm gonna create it here and this needs to be a public static task you can await it if you want so you can make it a sink but in this scenario I don't need to show up and do it so task end and then I'm gonna name this generate random int and this also needs to have the Jason vocal because that's what it will give it the properties to be exposed to jes interrupt for blazer not every method is exposed only the marked ones are so you need to mark it with this and in here now I can actually generate a random string so what do return task dot from result and then in here is where I return the actual value so random dot next will give me the next random int so all I need to do is call this method from a JavaScript function and as I'm here I'm gonna just say on click on this button keep in mind this is not the same on click with the @ symbol at the beginning this is just HTML zone click so do something on a click and what I will do here is I'm gonna call a JavaScript function that doesn't exist yet let's just call it give me run dumb int so I'm just gonna call this and then I'm gonna go ahead and make it in the interrupter j/s fine so I'm going here I'm saying function give me random int and this is where I need to call the C shop method so let's see how we can do that the first thing you need to do is say dot net dot invoke method async and then you need two parameters here the first thing you need is the assembly name in our scenario it's the server blazer so server blazer goes here the next thing you need is the matter name and with this just go and copy it it's called generate random int and this goes here now the next thing you need to do is you need to call then and then then method is what once the task is computed this will be invoked and we have the result and we're gonna use just an expression here and I'm gonna say what did we name that span that span was named random given span Oh in fact we have a method that we have a function that can actually do that so let's just call this function which will just get the element by ID and set it in our text and say set element by ID and the ID of the span is random numbers span so the first thing we provide is this and then the text we want to set so in this scenario it's result sorry for the squiggly lines and all that is just by intelligent is not thinking this up properly but let's see if this actually works so what I expect to do is click this randomize button and then I'm gonna call this JavaScript function which is going to call this which is going to call the c-sharp method here this might look impractical but this is just to illustrate the point you wouldn't normally do this in a realistic scenario you'd have something more complicated that JavaScript possibly cannot do easily so let's run this and see what we did so I'm hearing the inter up and down here you can see that we have the the random number is and when I click the randomize method as you can see we're getting a random int and if I make this smaller successfully you can actually see that if I put a breakpoint here and I click randomize you can see that the method is involved properly and if I go in the debugger you'll see exactly what's calling it which is what will make this whole thing work so let's just close this and as you can see we can just debug here normally and just return it in the front end now this is cool and all but what happens if you want to have a parameter here how do you pass a parameter down so in this scenario if I want to have a max for my integer so in this scenario if I say give me a number from zero to a hundred I would put the hand in here how do I do this with in this situation so what I would do is I would normally give this a parameter I'm gonna say max value here and then I would pass it down here and then this would make sure that the value doesn't exceed the max value provide and then back to my interrupted is as I'm calling this method I'll say here a hundred and then I'm gonna give this function a parameter so max int size and because this method accepts an array of different parameters I have a one-to-one mapping relationship so if I say max inside here because this is the index 0 parameter in my generate random int method blazars knows to provide it here and any serializable class would work in this scenario so let's just run this again and see if we get just a hundred as the max number so application is running again if I click randomize I wanna see a number from zero to a hundred and sure enough it is working our parameter is being passed down and as you can see I'm getting several zeroes which is very lucky so cool we can do that but what happens when you wanna call something from an instantiated class and I'm gonna start by showing you how you can do this while keeping this method in the same razor component but I'm not saying that this is the best way to do this I just want to show you the transition and then I'm gonna show you the best practice so let's start by removing the static keyword and now if I just left this code the same this method wouldn't be able to be found because I'm not specifying which exact instance of this class I want to give back this is a bit more complicated because in this scenario now we can't just simply use Jes to call this give me random a hundred method we will have to move this into a c-sharp class because we're gonna have to pass down a reference to the object that contains the method we want to invoke this is just too many random words so let me just show you what it means if I go down here and I create an async task generate random and this is just a private method to the component and I and I passed this year ultimately what I want to do is use this shot this C shop method to call this Jas function using the J's runtime so I'm gonna copy this and I'm gonna paste it here and I'm gonna say give me random int and then coma a hundred and if I did that now I can simply call this Jas function with c-sharp using interrupt but I need to do an extra thing I need to add another parameter and let me give it a new line and this should be a.net object reference but then I need to do not create don't create and now I need to specify the instance of the component that contains the method so I'm gonna say this again if you have experience with Blaser and you see me doing this don't panic I will explain why I'm doing this and I'm gonna change it to helper but please hang on so now this means that the reference to our object is passed to the Jas function and this is done by just saying coma dot net instance here and now I can just simply delete this because I don't need it anymore or actually can just save this which is the manipulation of the span and now what I need to do is say dotnet instance dot invoke method async and then I need the method name and the method name generate random int and again I can specify the parameter so this is max in size and same thing I'm doing a then and then I'm saying result and then I'm gonna use that to set the value of the span and once I do that let's just run this and see if it's working of course you need to change your own click method to actually call the thing you want to check this is run it so application is running let's click randomize again it is working fine but now if I minimize it let me open the debugger tools and if I go to sources Jes interrupt here's where my method is being called and I wanna stick a breakpoint here and click randomize to show you what this dotnet instance actually has so let me expand this a little bit yes and randomize and as you can see we're hitting this breakpoint and the dotnet instance it is just an ID that the system will use internally to know in which method to go and it just works now ideally you don't want to do this you don't just want to pass any instance just because the method happens to be here and more appropriate approach would be to create a new folder potentially called helpers but I will leave that up to you to design it can be service it can be anything and in here I will create this method and I'm gonna name it random helper and I'm gonna take this cut it and I'm gonna paste it in here and let's just import everything the exact same code we just imported everything here and now in my J's Interop method instead of creating and reference to this specific component I will just say new random helper and I'm gonna pass down this instance of the object that contains they invoke a blue you might have other services you want to pass down but ideally you wanna give it a slim object that it needs to keep track of with the methods you want to call and you don't want to have this method mixed with other methods that are no js' in volkl ultimately let's see that this actually still works and let's just click run device as you can see everything is still working properly and we're passing down just a helper reference of the object we want to call again this might not be a solution for everything but ideally you want to limit the scope of your instantiated Jason vocalist and on a final note ultimately if you don't need to use Jes interrupt don't and only use it if something is not possible with Jes because it can actually introduce a lot of complexity in your code a lot of magic Springs that are not tracked if the name of these function changes this will break and give me to test everything ultimately try to avoid it but if you have to use it just know that it is there that's all I had for you for today thank you very much for watching special thanks to my github sponsors for helping me produce these videos if you want to help me as well you'll find a link in the description down below leave a like if you like we do subscribe for more content like this and i'll see you in the next video keep coding you

Channel: Nick Chapsas

Views: 17,263

Keywords: Elfocrash, coding, asp.net, .netcore, dot net, C#, how to code, tutorial, asp.net core, javascript, js, 2.2, csharp, development, lesson, software engineering, dev, microsoft, microsoft mvp, .net core, nick chapsas, chapsas, asp.net core 3, blazor, webassembly, wasm, razor components, for beginners, blazor tutorial, blazor fundamentals, js interop, js from c#, c# from js, js interoperability, interoperability, dotnet, .net

Id: Pdj4YOfWH00

Length: 15min 10sec (910 seconds)

Published: Fri Oct 18 2019