Blazor Tutorial C# - Part 4 - Blazor Javascript Interop | Blazor Javascript Isolation

Hi. Welcome to Coding Droplets and  thank you for watching this video so this is part 4 of .Net Blazor beginner  to advanced tutorial series. In this video we are going to see about javascript interop. So  first let's see what is javascript interop. so a Blazor application can invoke javascript  functions from dotnet methods or c# code and also we can invoke dotnet methods or c#  code from javascript functions. So we can do it in both ways. So these scenarios are called javascript  interoperability or we can call it as JS Interop. so please subscribe to our channel named Coding  Droplets, if you have not subscribed it yet and also don't forget to press the bell icon so that  you will get notified once we upload new videos so i have opened our Blazor application. The demo  application in visual studio. So if you are new to this video tutorial series, you can find  the playlist link in the video description and you can open the link and find the previous  videos so if you are new to Blazor, I request you to watch the previous videos. We have already  explained so many things in Blazor development okay. Now let's see how we can use  javascript interop in our application so for explaining about javascript interop  let me create a new Razor Component clicking on add and Razor Component. So  here i'm naming this as sample javascript yeah that is enough sample javascript. okay and let  me name.. sorry. let me mention the page url. sample javascript fine. also let me create a menu option to access this  page. So in Razor or sorry in Blazor we have an option inside shared folder. We have a nav menu option. So in  our main layout. If you open the main layout you can see here in this demo project here  there is a nav menu component is used. okay so now my new component is here  so inside nav menu we can see uh so many nav links so we will be covering  about navigation in our upcoming session so i'm not going in detail about navigation so  here what i'm doing is, i'm creating one more option here and naming this  as sample javascript fine now the link to this page is the url which we  have created here sample hyphen javascript file let me run the application and  check whether it is opening the page application is getting compiled here it is started fine now the index page has been loaded and we  can see the menu option here sample javascript so let me click on it yes file so the page  is getting opened now inside this particular is the component the new is a component we are  implementing the methods of javascript interop so first let's see how we can  call a javascript function from our dotnet method or a C# (csharp) code. so let me close this application and i'm moving to the sample  javascript Razor file and here i am creating a button okay and this is just showing an alert so  i've named it i have given alert here now creating a private void method named show alert fine now giving the click event for the  button on click is equals show alert fine now inside this particular ShowAlert  method we are going to call our javascript function a javascript function to show alert for that we need to inject IJSRuntime. so we have already explained  about dependency injection in our previous video so in blazer, IJSRuntime is a default or  yeah. It is a default injected dependency so we can use it in any razor components. so if  you open the program.cs class we there is no dependency injection mentioned here. But still  we can use IJSRuntime as it is a default injected dependency. So I'm closing this. now for IJSRuntime  I'm providing a name like js runtime okay now in the show alert method  what i'm doing is, js runtime dot InvokeAsync.. InvokeVoidAsync  so there are two methods InvokeAsync and InvokeVoidAsync so  we will be discussing about InvokeAsync in the upcoming session or after this  after completing InvokeVoidAsync. okay so first let me discuss about InvokeVoidAsync  this method is used if we are not returning any value from the javascript function  so here we are just showing the alert and we don't need to return any value from that function. so  here i'm. i have opened the bracket now first we can provide alert so this is a javascript function  you know. you might be knowing it so normally i will just show you, how the javascript function  works so if we provide alert of some message here so this is the javascript function. okay  so here what we are going to do is, to implement the same kind of javascript  function in this OnClick event so first let me show you how this works, this  javascript function i'm running in my application it is getting opened and here what we can do  is, we can open the developer console window okay we can press F12 for that. okay um sorry.. uh. here i am doing one thing okay i'm moving this developer console to the bottom of  my page or my browser window now here i am giving this javascript function and you can see that it  is showing an alert. some message here okay we can provide whatever message we need so now uh instead  of some message i'm just giving hello world now you can see it are showing hello world here. so  this is alert method a normal javascript function so now i am going to implement the same using JSRuntime  so from our c sharp method we are calling this javascript function. so alert now you can see  here in alert we have provided the message as a parameter. so it is a string parameter. a string  variable or a string parameter so in the.. for passing the parameters what we can do is, we can  put a comma then we can provide as many parameters we need.. so if i have some three parameters what i  can give is, parameter 1 the value of parameter 1 then the value of parameter 2 then the value of  parameter 3 sorry 3 in this way we can. i can give as many parameters what i need but here  anyway for alert we only need to provide one parameter so what i'm doing is i'm giving this i'm  removing all and now i'm just showing hello world okay and hello world from c# (csharp) method or from method from c# (csharp) method let it be there  fine now i'm clicking on hot reload and opening my browser fine now i'm closing  this developer console window. we don't need it now going to this page and you  can see that alert button here i'm clicking on that and you can see the  alert here hello world from c# (csharp) method so here what we have done is we have called a  javascript function from our c# (csharp) code now let me show you how we can return a value  from a javascript function. so i'm just clicking ok and here for showing that i'm opening the console  window first and i'll show you one more javascript method which we can use confirm and as  a parameter we can show some message of hi okay and just or hello world okay message it  can be anything okay fine so now it is showing hello world and there are two buttons okay and  cancel so if i am pressing ok you can see that it is returning a true now again i am calling  the same confirm method javascript method and i'm clicking cancel and now it is returning  a false value so now let's see how we can return this value this true or false boolean  value to our c sharp code okay so for showing that i'm just minimizing my browser now uh here i'm  changing or i'm creating one more method private void show confirm okay and here i'm  creating one more button button on click show confirm and here display confirm okay fine now in the same way what i'm doing is okay for  showing that value i'm doing one thing creating a span here okay and let me find variable private string confirm result okay and we are showing  this confirmed result inside this span so and confirm result okay fine sorry not that confirmed result oh yes that confirm sorry fine now what i'm  doing is war result equals JSRuntime dot InvokeAsync and here we can mention the type  of data or the type of the type of the written value what we are going to receive from the  javascript function so we know that as it is a true or false value we can mention it as google  now the same way i'm passing the parameters so here sorry not parameters first i'm passing  the identifier so the identifier is confirmed so that is the javascript function and now the  parameters to confirm javascript function so do you need to proceed okay so now we will receive okay invoke as it is a sync method what we can do  is we can make this function and async function placing task okay now we can await for the result now we will get a boolean value in this  result variable okay now what i am doing is confirm result is equal to result to string okay i'm changing the value of confirm result  here now let me hot reload it and moving back to the browser window fine i'm closing this  console developer options okay so now i'm clicking on display confirm and you can see do we  need to proceed i'm clicking on ok and here it is showing true so as it is in a single line uh one  moment i'm doing one thing i'm moving this to here okay hot reload reloaded okay so now it is true now  again i'm clicking on display confirm now clicking on the cancel button and you  can see now the value is false so we are clearly we are receiving or we are successfully  receiving the value from a javascript function so in our previous session in our index page we  are showing some contacts we have implemented some functionality to show some contacts  so here you know that we have delete button to delete the contacts okay  so let's implement a confirm let's implement a confirm before deleting  those contacts so let's see how we can do that so i'm opening my visual studio and going to index racer file and not razer file for index  we have created a partial class so we have also explained about partial classes  in our previous session so here we have where we have implemented okay  i think that is in our component so contact list is a component yes here  it is so in this contact list component we have implemented the delete  functionality so this delete contact is here so we are passing this delete contact  method as a parameter fine so what we can do is we need to contact delete a contact after  confirmation okay so in the same way we can inject js sorry ijs one time so i'm naming  it as js one time or simply js you can provide whatever name you need okay now  here were confirm equals js dot invoke async sorry we are receiving boolean value and here  the identifier is confirm and the parameter is okay here we are receiving the contact as a  parameter here for in this delete method so we can show some meaningful message do  you sorry do you need to delete and here i'm showing the contact name  here contact dot first name then space contact dot last name from contacts list okay five that is enough and we will receive a boolean value here in  this confirm oh sorry we need to yeah we need to make this an async method as here we are using  invoke async now uh mentioning here task casing task and awaiting this fine now we will  receive a boolean value here so if confirm equals true then what we have we have to remove  this sorry we have to yeah delete this contact from the contacts list otherwise  we don't need to do anything so hot reload okay it won't work in that  way so let me return the application fine it is getting compiled and  opened here it is opening now so it will open the index page so we can  directly try removing the contacts from the list i think some three contacts will be there  yeah uh here the contacts are loading the other three contacts are there fine  so now let me try to delete peterborough and here you can see now in the message do  you need to delete beta bob from contacts list i'm pressing ok here and it got deleted now  i'm trying to delete george david so it is asking me do you need to delete george david  from contacts list but i'm clicking cancel and it has not deleted so hope you liked  it give me a thumbs up for this video and leave a comment so this is how we can use  igs runtime we can inject ids runtime and use it to execute javascript functions from our c sharp  code now let's go more in detail and let's see how we can implement or how we can execute  a c sharp code from a javascript function so for invoking a c sharp method from  javascript there are two different ways the first one is using a public static method  so let's see that let's see that option first how we can invoke a public static c# (csharp) method  from a javascript function so for that here in our SampleJavascript.razor file i'm creating a  new public static task of string so let's assume this particular public static method is returning  a string value so here now i'm naming this as get value or yeah get value from method okay now here i am returning a hardcoded  value task dot from result of string and here i'm returning hello world okay fine hello world from c-sharp oh we already have  the same kind of message here so just hello world fine that is sufficient  now uh in order to call this particular method we have to use one attribute uh in order to use  the call this method from a javascript function we have to use this attribute j is invokable so  then only sorry then only this particular method can be invokable from javascript function okay  now next i'm going to create a new javascript file so let me create a new js folder here inside  wwwroot now inside that folder i'm creating a javascript file so yeah here it  is and let me name it as sample.js fine now inside this what i'm going to do  is i'm creating a new function so get value or call method okay now here inside this  method what we have to give is DotNet dot invoke method async okay so please keep in mind  that DotNet this is case sensitive so you have to use in the same way DotNet D and N should  be in upper case then invokeMethodAsync this is the method to invoke a c# (csharp) method from  javascript okay now the next we have to pass two parameters so the first parameter is the project  name so here i'm copying the project name here file now the next parameter is the method name  so that is get value from method this is the c# csharp method okay now this in once this invoke  method is called we will get a result or we will get a response from this c# (csharp) code it is  a string value so what we can do is dot then result such that we can provide something here  so here this result will be holding the value what it received from this particular method  so it will be receiving hello world okay so here after receiving it what i'm doing is i'm just  showing it in alert alert message from method yes result okay fine hope you're clear now we need  to import this javascript file in our application so i'm opening the layout.cshtml  so as this is a layout file layout uh as this is a layout. a file it will be used in all the  pages so we can directly import it here script source equals dot js slash sample js okay  now we can provide the type as well if needed java script text okay text slash javascript file so this is enough now let me run the application  and see okay one more thing we have to do just let it be here but here now what i'm doing  is in our yeah this sample javascript file we need to place a button here  to call that javascript function so i'm placing a button here button so i'm naming it as call method and just providing the on click event so  this is the normal on click even not the blazer on click event so in blazer on click  event is add on click here this is the normal on click so it will call the javascript  function which we have provided here so here i am providing this call method  javascript function okay fine now hot reload hope it is loaded yeah it is loaded now i  am clicking on the column of the yeah now you can see the message from the method is  hello world so it is successfully getting the string from our public static c-sharp method  so this is how we can call a public static method a c-sharp method from javascript next we are  going to see how we can call a c# (csharp) method from our class from our class instance so instead of  a public static method a normal method inside our class instance so how we can make a call to that  particular c# (csharp) method and receive the return value in our javascript function so i'm clicking  ok here and just minimizing this we can make use of this hot reload after making the changes  so now let me create one more function here function call instance method okay fine now here we are  passing one parameter so this parameter holds the object of our class instance okay so if  we are passing or if you are invoking this particular method from our sample javascript  eraser so it will uh if we have to pass the instance of this particular the object we have  to pass the object of the particular instance okay so i'm naming this as instance object okay  fine now here what i'm doing is i'm creating one now what we need to do is once we call this  javascript function we have to call a normal asynchronous method here so let's  say i'm creating a new one public sync um okay public casing task of here  this one also written string let's say the same kind of method  which we have created before but that is a static public static  method but this is a normal method get value from instance okay fine now we need to provide the attribute js invokable as we need to invoke  this from our javascript function now here this will return in the same way  um hello world from instance fine okay now let me call this from our javascript function so instance object dot get value from instance oh sorry uh instance object dot invoke method  is in the same thing now here we have to pass the first we need to pass okay we need to pass this method name yeah this  is the only thing we need to pass no need of the uh project name why because we are calling  it from this instance object so we just need to pass the method name for this now uh  yeah if we just need to call a void method this is enough but as we are returning a  result so we can use the same method here fine then once we once this function received  the result we are showing in the same way in an alert uh yeah in an alert message okay okay so now  what we need is in a button click we need to call this particular method so once this particular  javascript function is called it will invoke this particular c sharp method in our class so in order  to call this javascript function we have to pass the object which is the instance of our  class or the object of the class instance so for doing that also passing that particular  object what i'm doing is i am calling um i'll do one thing i will create a new button  for it and i'll show you how we are making that javascript call and here call instance method  okay now here i'm using normal on click event the blazer on click okay and  i'm creating a method for this so just before uh yeah here i'm creating  a method private essing task call javascript call invoke method javascript okay  i'm calling that javascript from this method and here i'm binding it with this fine okay now  here what i'm doing is as we have did before i'm using JSRuntime dot InvokeVoidAsync  okay now here the identifier is call instance method and the parameter so here we  have to pass the parameter that is that should be the object of our class  instance so for that what we can do is dot net object reference okay dot create  of this so this means our class so here it is showing that we can await it so let  me await it fine okay so uh this means our class from which we are calling this method so it will  create the object uh or it will pass the object of that particular class and inside the same class we  have the function get value from instance so here from the same object in javascript we are  invoking the method named getvalue from instance hope you are clear with this if you have any doubt  please come into the video i will try to reply as soon as possible you should be clear about this  point okay so now let me run this application and i'll show you how this is working okay it is getting loaded pages getting loaded it's opening okay so now i'm going to our sample javascript  page and clicking on call instance method and you can see message from method is hello world from  instance so uh we are showing this particular message we are returning this particular value  from this particular hello world from instance okay this is how we can call a c-sharp method  which is in our class a normal c-sharp method which is in our class instance not a public static  method okay now here what i need to show you one more thing is this dotnet object reference dot  create can be used to create any kind of objects so if we need to for example we are having a new  contact here or compact is equal to new compact okay and yeah with uh some  first name equals uh john okay something like that fine i'm just giving the  first name i just need to show you one thing so now this is a contact object so i can  create a dotnet object reference of contact us so it will work but here in our javascript  this function won't work by why because that particular object is not having invoke uh  method as in function so here it will not work but what i'm what i need to say is if you need  to pass an object a contact object to your not a contact or whatever object to your javascript you  can do it with it in this way but here we need to pass the object of our class so i have given this  here okay fine hope you are clear with this point so these two are the ways to call a  c-sharp method from a javascript function the first one is calling a public static  method and the second one is calling a c-sharp class instance method hope you are clear with  these two so give me a thumbs up for this video if you have not given yet and also please leave a  comment so now let's move to the next topic next we are going to see about javascript isolation  so isolation means now you can okay now you know that we have already created one javascript  file sample.js but we are using it only in our sample javascript razer file okay we don't need it  to be used any other razor components so uh but we have used this script tag here in our layout so  what will happen is when the application loads the application will download this particular  javascript file to the client device so we don't need that to happen we just need this uh we  just need to download this particular js file once the user access sample javascript.razer  file or once the user is clicking this call invoke method javascript  now let's assume that we only need uh this particular javascript while  clicking this particular button okay the button is called instance method so we only  need to download it while clicking that button so this particular method will improve the  performance of our application why because the javascript won't get downloaded while the  application starts it will only get download when the user needs it so let's implement that so  first what i'm doing is i'm creating a variable private ijs object reference okay or else  i'll do one thing anyway if we need only it in this particular method i'll do one thing  for sample js reference sorry reference equals now here what i'm doing is i'm importing  that particular javascript file so next what i'm doing is i'm using  this igs run time so just run time dot invoke void async sorry invoke not invoke void we need to return  the object reference here so invoke async and this will return a ijs ijs object reference so this  is the type of javascript references in blazer okay now here i am giving the identifier as import  and the next parameter is the path to the file so slash js slash sample dot js okay so now what  will happen is once this particular code is getting executed that time only this javascript  file will get downloaded to the client device okay so i think we have already removed it from  here no okay fine we can remove it from here good and now okay we only need  this call instance method now fine now here as we have imported it and if  we need to call this method we can we have to export this so export function call instance  method okay fine now what i have to do is now previously we have used js runtime to invoke  this method now we cannot use js runtime for that so what i am using here is let me comment this out await sample js reference this is the js object reference which we have received while  calling this particular method okay dot invoke sorry oh this is oh sorry i have not awaited it okay now i have given await here now that is  igs object reference so fine okay so invoke sync okay here we have used invoke void s okay we  are not returning anything so invoke void async now we can use the same thing call instance method and  all other things here file okay now let me run the  application and i will show you how this works and we can also see uh whether  this sample.js file is getting downloaded initially or not so it won't get downloaded  as we have removed it from our layout file so we can see that i will show you  how we can see that so now i am opening our developer options and in network here it is showing the files here let me try to  open it like this fine now you're able to see it so you can see that now we don't have sample.js  file here okay it is not downloaded to this uh to the client device yet or to the browser  so now i'm going to sample javascript raise the component fine and still it is  not downloaded now i am clicking on call instance method and immediately you can see  now sample.js file is here so once i click that uh it will execute this this particular method  and it will download the js file to my browser and once it got downloaded next it will run  this particular in uh it will invoke the call instance method which is which we have written  in our javascript function so now you can see uh it has written hello world from  instance the same alert message so this is how we can isolate the javascript files  and this is a good practice to do why because it will only download the needed javascript  files when user really needs it or from when a user access that particular razer component okay  so these are the points what i need to discuss in this video that's it for this video hope  you liked it so please like the video share the video and subscribe to the channel and  see you all in the next video thank you all

Channel: Coding Droplets

Views: 212

Keywords: Blazor Javascript, Blazor Javascript Interop, Blazor Javascript Isolation, blazor webassembly javascript interop, blazor javascript alert, blazor javascript call c# method, learn blazor, execute javascript blazor, blazor javascript, blazor javascript call c#, call javascript function from blazor components, blazor call javascript with parameter, blazor call async javascript function, blazor call c# from javascript with parameters, blazor call javascript function with parameters

Id: 47pfHwGCnXw

Length: 46min 24sec (2784 seconds)

Published: Thu Nov 25 2021