Blazor Tutorial Invoke JavaScript Functions
Blazor is a frontend framework, but it has no direct access to the browser’s DOM API.
- As web developers, we want to access browser APIs and existing JavaScript functions.
- There are times when Blazor .NET code is required to call a JavaScript function.
- For example, a JavaScript call can expose browser capabilities or functionality from a JavaScript library to the Blazor app.
JavaScript Interop
A Blazor app can invoke JavaScript functions from .NET and .NET methods from JavaScript code. This property of calling a JS method from C# code and vice versa is referred to as JavaScript Interop.
- Blazor uses JavaScript Interop to handle DOM manipulation and browser API calls.
- To call a JavaScript from .NET, use the
IJSRuntime
abstraction, which is accessible fromJSRuntime.Current
.
Let's add two JavaScript functions to index.html
file.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width"> <title>BlazorApplication</title> <base href="/" /> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/site.css" rel="stylesheet" /> </head> <body> <app>Loading...</app> <script src="_framework/blazor.webassembly.js"></script> <script type="blazor-boot"> </script> <script> function JSMethod() { $("#demop").text("JavaScript function called from C#"); } </script> <script> function CSMethod() { DotNet.invokeMethodAsync('BlazorApplication', 'CSCallBackMethod'); } </script> </body> </html>
- The
JSMethod
function will set the text of a<p>
tag having id "demop" to "JavaScript function called from C#". - This
CSMethod
function will have a call back to our C# methodCSCallBackMethod
which we will define later.
Now create a new Blazor component JSInterop.cshtml
and add the following functions.
@functions { protected static string message { get; set; } protected void CallJSMethod() { JSRuntime.Current.InvokeAsync<bool>("JSMethod"); } protected void CallCSMethod() { JSRuntime.Current.InvokeAsync<bool>("CSMethod"); } [JSInvokable] public static void CSCallBackMethod() { message = "C# function called from JavaScript"; } }
- The
CallJSMethod
andCallCSMethod
will call our JS functionsJSMethod
andCSMethod
by usingJSRuntime.Current.InvokeAsync
method. - The
JSRuntime.Current.InvokeAsync
method can take two parameters; the JS function name and any parameter that needed to be supplied to the JS function. But, we are not passing any parameter to JS function. - The
CSCallBackMethod
is a static method, and it will be called from the JavaScript functionCSMethod
. - It is decorated with
[JSInvokable]
attribute. - This method will set the value of a string variable message, which will be displayed on the UI.
Add two buttons to the JSInterop.cshtml
file will call the CallJSMethod
and CallCSMethod
method on the onclick
event.
@page "/jsinterop" @using BlazorApplication.Pages @using Microsoft.JSInterop <h1>JavaScript Interop Demo</h1> <hr /> <button class="btn btn-primary" onclick="@CallJSMethod">Call JS Method</button> <button class="btn btn-primary" onclick="@CallCSMethod">Call C# Method</button> <br /> <p id="demop"></p> <br /> <p>@message</p> @functions { protected static string message { get; set; } protected void CallCSMethod() { JSRuntime.Current.InvokeAsync<bool>("CSMethod"); } protected void CallJSMethod() { JSRuntime.Current.InvokeAsync<bool>("JSMethod"); } [JSInvokable] public static void CSCallBackMethod() { message = "C# function called from JavaScript"; } }
Click on the buttons to call the JavaScript functions and C# method.
