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

Blazor Tutorial C# - Part 4 is a Javascript Interop tutorial video in which we explains about Javascript Interoperability (JS Interop in Blazor). We'll walk you through the entire Blazor Javascript operations in this video. The sample project in this video is created using Visual Studio with .Net 6 and C# language.

Below is the Blazor Tutorial Playlist Link:

What is Javascript Interop (Blazor Javascript Interop)?
A Blazor app can invoke JavaScript (JS) functions from . NET methods and . NET methods from JS functions. These scenarios are called JavaScript interoperability (JS interop).

Topics Covered in this Blazor Tutorial:
- Calling Javascript Function from C# Method
- Calling a Public Static Method from Javascript Function
- Calling a Class Instance Method from Javascript Function

What is IJSRuntime?
IJSRuntime represents an instance of a JavaScript runtime to which calls may be dispatched. Using IJSRuntime we can call two different methods to invoke javascript functions (the library to execute javascript blazor).
1. InvokeVoidAsync - This can be used when we want to call a JavaScript function that doesn't return anything.
2. InvokeAsync - This can be used when we are expecting the JavaScript function we're calling to return something to us.

What is DotNetObjectReference?
DotNetObjectReference is a reference object that can used in javascripts. We can create DotNetObjectReference of any C# objects and pass to javascript functions as parameters.

What is IJSObjectReference?
IJSObjectReference is a new type introduced with . NET 5 which holds a reference to a JavaScript object and has the same methods as IJSRuntime to invoke JavaScript functions.

What is Javascript Isolation (Blazor Javascript Isolation)?
Javascript Isolation allows to load JavaScript code for a specific component. One of the goals of JS isolation is to make reusable components that are not impacted by the global scope. In the previous version of Blazor, JavaScript function has to be exposed in the global scope (window) and to add the script element manually. JS isolation fixes both issues!

Chapters:
0:00 - Intro
1:42 - Project Setup
4:17 - IJSRuntime
21:47 - Calling C# Public Static Method
28:24 - Calling C# Instance Method
38:44 - Javascript Isolation

You can reach us at Social Media:

#blazor #codingdroplets #jsinterop

[geekverve]

Thank you for this. You've demystified the basics of java interop for me.

[rasikasamith]

Thanks a lot for these video series. They are very helpful.

[ALICEFELIX]

This is a wonderful demostration of js interop. I was trying to use it implement dom manipulation but to no avail but after watchin your video i was able to do it with little effort thank you so much.

[vovaka]

Great tutorial man, hopefully you will continue with Blazor

[noahyannis]

Thanks mate, this series is awesome. Do you have the final source code available anywhere? :)

[曼巴-zt]

This JS alert display looks a bit ugly, Is there a better display method?

[seanwauchope]

So calling instanced C# method from Javascript is not really initiated from Javascript but from C#...

[evilroxxx]

What’s the real benefit of using Javascript interop if we’re using blazor which is to be able to use c# on the client side directly? If I have to still use Javascript then why even bother with blazor

[nyomanwiradijaya]

Firstly, thank you for the tutorial... I got 1 question though, How do we pass values/variables from javascript side to c# JSInvokable method? say, the method accept a string argument....

[andresgeary]

Great tutorial, but in latest version of Visual Studio and Net 7 I can't find _Layout.cshtml