JavaScript Interop
JavaScript (JS) interop is the ability to call a JS method from C# code and vice versa. JS interop allows you to integrate JavaScript libraries into your Blazor application to handle Document Object Model (DOM) manipulation, perform browser API calls, and more.
Interaction with DOM
When an object does not interact with Blazor, only mutate the DOM with JS. Blazor keeps track of DOM representations and interacts with DOM objects directly. If JS is used either directly or through JS interop to modify an element that Blazor has rendered, the DOM may not match Blazor’s internal version of it.
Asynchronous JavaScript Calls
JS interop calls are always asynchronous, regardless of whether the code being called is synchronous or asynchronous. This is to ensure compatibility between the Blazor Server and Blazor WebAssembly hosting models.
Call JS from .NET
The IJSRuntime interface in Blazor is used to call a JavaScript function from .NET. We can call the JavaScript code using the IJSRuntime abstraction's InvokeAsync<T> method. As an argument, this method takes the function name and function parameters.
Call .NET from JS
.NET application code must be executed from JavaScript. Blazor allows us to call methods on instances of objects or static methods on classes asynchronously. Blazor blocks JavaScript from calling any static or instance method in our .NET code.