Blazor 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
IJSRuntimeabstraction, 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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%2F%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%26lt%3Blink%2520href%3D%26quot%3Bcss%2Fbootstrap%2Fbootstrap.min.css%26quot%3B%2520rel%3D%26quot%3Bstylesheet%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%26lt%3Blink%2520href%3D%26quot%3Bcss%2Fsite.css%26quot%3B%2520rel%3D%26quot%3Bstylesheet%26quot%3B%2520%2F%26gt%3B%26lt%3B%2Fhead%26gt%3B%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%26lt%3Bapp%26gt%3BLoading...%26lt%3B%2Fapp%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3B_framework%2Fblazor.webassembly.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520type%3D%26quot%3Bblazor-boot%26quot%3B%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520function%2520JSMethod()%2520%257B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%24(%26quot%3B%23demop%26quot%3B).text(%26quot%3BJavaScript%2520function%2520called%2520from%2520C%23%26quot%3B)%3B%2520%2520%2520%2520%2520%2520%2520%2520%7D%2520%2520%2520%2520%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520function%2520CSMethod()%2520%7B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520DotNet.invokeMethodAsync("BlazorApplication', 'CSCallBackMethod');
}
</script>
</body>
</html>
- The
JSMethodfunction will set the text of a<p>tag having id "demop" to "JavaScript function called from C#". - This
CSMethodfunction will have a call back to our C# methodCSCallBackMethodwhich 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
CallJSMethodandCallCSMethodwill call our JS functionsJSMethodandCSMethodby usingJSRuntime.Current.InvokeAsyncmethod. - The
JSRuntime.Current.InvokeAsyncmethod 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
CSCallBackMethodis 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.
