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
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="/" />
<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
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.
