JavaScript Interop in Blazor
source link: https://www.tuicool.com/articles/hit/yuqMVvV
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Introduction
In this article, we will learn about JavaScript Interop in Blazor. We will understand what JavaScript Interop is and how we can implement it in Blazor with the help of a sample application.
We will be using Visual Studio code for our demo.
What is JavaScript Interop?
Blazor uses JavaScript to bootstrap the .NET runtime. It is capable to use any JS library. C# code can call a JS function/API and JS code can call any C# methods. This property of calling a JS method from C# code and vice versa is referred as JavaScript Interop. Blazor uses JavaScript Interop to handle DOM manipulation and browser API calls.
JavaScript Interop is the feature provided by WebAssembly. Since Blazor runs on Mono and mono is compiled to WebAssembly. Hence, Blazor can also implement this feature.
Prerequisite
Source Code
Get the source code from Github .
Creating the Blazor application
We will create a Blazor application using windows PowerShell.
Step 1:
First, we will install the Blazor framework templates in our machine,
Open the folder you want to create your project. Open Windows PowerShell by doing shift + right click >> Open PowerShell window Here.
Type in the following command
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Refer to the image below:
Step 2:
Type in the following command to create our Blazor application.
dotnet new blazor -o BlazorJSDemo
This will create a Blazor application with name BlazorJSDemo . Refer to the image below.
Adding Razor Page to our application
Open the BlazorJSDemo app using VS code. You can observe the folder structure in Solution Explorer, as shown in the below image.
We will add our Razor page in Pages folder.
Create a new file by right clicking on Pages folder and select New File. Name the file as JSDemo.cshtml . This file will contain HTML code to handle the UI of our application.
Similarly, add one more file JSDemo.cshtml.cs . This file will contain the C# code to handle our business logic.
Now our Page folder will have the following structure.
Calling a JavaScript function from C#
First, we will write our JavaScript functions in index.html file. Open wwwroot/index.html file and put in the following code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>BlazorJSDemo</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<app>Loading...</app>
<script type="blazor-boot"></script>
<script>
Blazor.registerFunction('JSMethod', function () {
$("#demop").text("JavaScript Method invoked");
});
</script>
</body>
</html>
Here we have included the reference to JQuery library inside <head> section so that we can handle the DOM manipulation.
Inside the <body> section, we are registering the function on JavaScript side using “Blazor.registerFunction”. The function name is JSMethod and it is not accepting any arguments. When triggered it will set the text of a <p> tag having id “demop” to “JavaScript Method invoked”.
Important Note
Do not write your JS code in .cshtml file. This is not allowed in Blazor and the compiler will throw an error.
Open JSDemo.cshtml.cs and put in the following code:
using Microsoft.AspNetCore.Blazor.Browser.Interop;
using Microsoft.AspNetCore.Blazor.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BlazorJSDemo.Pages
{
public class JSDemoModel : BlazorComponent
{
protected void CallJSMethod()
{
RegisteredFunction.Invoke<bool>("JSMethod");
}
}
}
The method CallJSMethod will call our JS function “JSMethod” by using “RegisteredFunction.Invoke”. RegisteredFunction.Invoke can take two parameters – the registered JS function name and any parameter that needed to be supplied to JS function. In this case, we are not passing any parameter to JS function.
Open JSDemo.cshtml and put in the following code:
@page "/demo" @using BlazorJSDemo.Pages @inherits JSDemoModel <h1>JavaScript Interop Demo</h1> <hr /> <button class="btn btn-primary" onclick="@CallJSMethod">Call JS Method</button> <br /> <p id="demop"></p>
Here we have defined the route of the page at the top. So, in this application, if we append “/demo” to base URL then we will be redirected to this page. We are also inheriting JSDemoModel class, which is defined in JSDemo.cshtml.cs file. This will allow us to use the methods defined in JSDemoModel class.
After this, we have defined a button. This button will invoke “CallJSMethod” method when clicked. The <p> element with id “demop” is also defined and its value will be set by the JS function “JSMethod”.
Calling a C#/.NET method from JavaScript
Now we will define our JS Method in wwwroot/index.html file, which will call our C# method in JSDemo.cshtml.cs file.
The syntax of calling a C# method from JavaScript is as follow :
Blazor.invokeDotNetMethod({
type: {
assembly: 'the assembly name of C# method',
name: 'namespace.classname of C# method'
},
method: {
name: 'C# method name'
}
})
Therefore, we will follow the same method calling syntax. Open wwwroot/index.html file and add the following script section to it.
<script>
Blazor.registerFunction('CSMethod', function () {
Blazor.invokeDotNetMethod({
type: {
assembly: 'BlazorJSDemo',
name: 'BlazorJSDemo.Pages.JSDemoModel'
},
method: {
name: 'CSCallBackMethod'
}
})
});
</script>
Here we are registering a JS function “CSMethod”. This function will have a call back to our C# method “CSCallBackMethod” which is defined in JSDemoModel class.
To invoke a C#/.NET method from JavaScript the target .NET method must meet the following four criteria:
- The method needs to be Static.
- It must be Non-generic.
- The method should have no overloads.
- It has concrete JSON serializable parameter types.
Open JSDemo.cshtml.cs file and put the following code inside JSDemoModel class.
protected static string message { get; set; }
public static void CSCallBackMethod()
{
message = "C# Method invoked";
}
protected void CallCSMethod()
{
RegisteredFunction.Invoke<bool>("CSMethod");
}
Here we have defined two methods:
- CallCSMethod :- This will call our JS function “CSMethod”
- CSCallBackMethod: – This is a static method and it will be invoked from JavaScript function “CSMethod”. This will set the value of a string variable message, which will be displayed on the UI.
Open JSDemo.cshtml file and add the following code to it.
<button class="btn btn-primary" onclick="@CallCSMethod">Call C# Method</button> <br /> <p>@message</p>
Here we have defined a button which will call “CallCSMethod” method. The value of variable message is set on the button click.
Adding Link to Navigation menu
Open \BlazorJSDemo\Shared\NavMenu.cshtml page and put the following code into it. This will include a navigation link to our JSDemo.cshtml page.
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">BlazorJSDemo</a>
<button class="navbar-toggler" onclick=@ToggleNavMenu>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match=NavLinkMatch.All>
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="demo">
<span class="oi oi-list-rich" aria-hidden="true"></span> JS Demo
</NavLink>
</li>
</ul>
</div>
@functions {
bool collapseNavMenu = true;
void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
Execution demo
Navigate to View >> Integrated Terminal to open the terminal window.
Type the command dotnet run to start the application. Refer to the image below:
You can observe that the application is listening on http://localhost:5000. Open any browser on your machine and navigate to this URL. You can see the application home page. Click on the “JS Demo” link in the navigation menu to open JSdemo view. Click on the buttons to invoke JS functions and C# method.
Refer to the GIF image below.
Conclusion
We have learned about JavaScript Interop. We have also created a sample application to demonstrate how JavaScript Interop works with Blazor framework.
Please get the source code from Github and play around to get a better understanding.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK