Giới thiệu
Trong bài viết này, chúng ta sẽ tìm hiểu về JavaScript Interop trong Blazor. Chúng ta sẽ hiểu JavaScript Interop là gì và cách chúng ta có thể triển khai nó trong Blazor với sự trợ giúp của một ứng dụng mẫu.
Chúng tôi sẽ sử dụng mã Visual Studio cho bản demo của mình.
Tương tác JavaScript là gì?
Blazor sử dụng JavaScript để khởi động thời gian chạy .NET. Nó có thể sử dụng bất kỳ thư viện JS nào. Mã C# có thể gọi hàm JS/API và mã JS có thể gọi bất kỳ phương thức C# nào. Thuộc tính gọi một phương thức JS từ mã C# và ngược lại được gọi là JavaScript Interop. Blazor sử dụng JavaScript Interop để xử lý thao tác DOM và lệnh gọi API trình duyệt.
JavaScript Interop là tính năng do WebAssembly cung cấp, vì Blazor chạy trên Mono và mono được biên dịch thành WebAssembly. Do đó, Blazor cũng có thể triển khai tính năng này.
điều kiện tiên quyết
- Cài đặt SDK .NET Core 2.1 trở lên từ đây.
- Cài đặt Visual Studio Code từ đây.
Mã nguồn
Lấy mã nguồn từ Github.
Tạo ứng dụng Blazor
Chúng tôi sẽ tạo một ứng dụng Blazor bằng Windows PowerShell.
Bước 1
Đầu tiên, chúng tôi sẽ cài đặt các mẫu khung Blazor trong máy của mình.
Mở thư mục mà bạn muốn tạo dự án của mình. Mở Windows PowerShell bằng shift + nhấp chuột phải >> Mở cửa sổ PowerShell Tại đây.
Nhập lệnh sau:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Tham khảo hình ảnh bên dưới:

Bước 2
Nhập lệnh sau để tạo ứng dụng Blazor của chúng tôi:
dotnet new blazor -o BlazorJSDemo
Điều này sẽ tạo ra một ứng dụng Blazor với tên BlazorJSDemo. Tham khảo hình ảnh bên dưới.

Thêm Razor Page vào ứng dụng của chúng ta
Mở BlazorJSDemo ứng dụng sử dụng mã VS. Bạn có thể quan sát cấu trúc thư mục trong Solution Explorer, như trong hình bên dưới.

Chúng tôi sẽ thêm trang Razor của chúng tôi trong trang thư mục.
Tạo một tệp mới bằng cách nhấp chuột phải vào thư mục Trang và chọn Tệp mới. Đặt tên cho tệp JSDemo.cshtml. Tệp này sẽ chứa mã HTML để xử lý giao diện người dùng của ứng dụng của chúng tôi.
Tương tự, thêm một tệp nữa JSDemo.cshtml.cs. Tệp này sẽ chứa mã C# để xử lý logic nghiệp vụ của chúng tôi.
bây giờ của chúng tôi trang thư mục sẽ có cấu trúc như sau:

Gọi một hàm JavaScript từ C#
Đầu tiên, chúng ta sẽ viết các hàm JavaScript của mình trong tệp index.html. Mở wwwroot/index.html tập tin và đặt đoạn mã sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>BlazorJSDemo</title>
<base href="https://www.freecodecamp.org/" />
<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 src="_framework/blazor.webassembly.js"></script>
<script>
function JSMethod() {
$("#demop").text("JavaScript Method invoked");
}
</script>
</body>
</html>
Ở đây chúng tôi đã bao gồm tham chiếu CDN đến thư viện JQuery bên trong phần
để chúng tôi có thể xử lý thao tác DOM.Bên trong phần
, chúng ta đã định nghĩa hàm JS của mình. chức năng natôi là JSMethod và nó không chấp nhận bất kỳ đối số nào. Khi được kích hoạt, nó sẽ đặt văn bản của thẻcó id “demo” thành “Phương thức JavaScript được gọi”.
Lưu ý quan trọng
- Không viết mã JS của bạn trong .cshtml tập tin. Điều này không được phép trong Blazor và trình biên dịch sẽ báo lỗi. Luôn đặt mã JS của bạn vào wwwroot/index.html tập tin.
- Luôn thêm thẻ ” trong t; phần của tệp index.html. Điều này là để đảm bảo rằng tập lệnh tùy chỉnh của bạn sẽ thực thi sau khi tải tập lệnh “ blazor.webassembly.js”.
Mở JSDemo.cshtml.cs và đặt vào đoạn mã sau:
using Microsoft.AspNetCore.Blazor.Components;
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BlazorJSDemo.Pages
{
public class JSDemoModel : BlazorComponent
{
protected static string message { get; set; }
protected void CallJSMethod()
{
JSRuntime.Current.InvokeAsync<bool>("JSMethod");
}
}
}
phương pháp GọiJSMethod sẽ gọi hàm JS của chúng ta là “JSMethod” bằng cách sử dụng phương thức “JSRuntime.Current.InvokeAsync”. Phương thức này có thể nhận hai tham số — tên hàm JS và bất kỳ tham số nào cần được cung cấp cho hàm JS. Trong trường hợp này, chúng tôi không chuyển bất kỳ tham số nào cho hàm JS.
Mở JSDemo.cshtml và đặt vào đoạn mã sau:
@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>
Ở đây chúng tôi đã xác định lộ trình của trang ở trên cùng. Vì vậy, trong ứng dụng này, nếu chúng tôi thêm “/demo” vào URL cơ sở, thì chúng tôi sẽ được chuyển hướng đến trang này. Chúng tôi cũng đang kế thừa JSDemoMô hình lớp, được định nghĩa trong JSDemo.cshtml.cs tập tin. Điều này sẽ cho phép chúng ta sử dụng các phương thức được định nghĩa trong JSDemoMô hình lớp.
Sau này, chúng tôi đã xác định một nút. Nút này sẽ gọi phương thức “CallJSMethod” khi được nhấp vào. Phần tử
có id là “demop” cũng được xác định và giá trị của nó sẽ được đặt bởi hàm JS “JSMethod”.
Gọi phương thức C#/.NET từ JavaScript
Bây giờ chúng ta sẽ định nghĩa Phương thức JS của mình trong wwwroot/index.html tệp, tệp này sẽ gọi phương thức C# của chúng tôi trong JSDemo.cshtml.cs tập tin.
Cú pháp gọi một phương thức C# từ JavaScript như sau:
DotNet.invokeMethodAsync('C# method assembly name', 'C# Method Name');
Do đó, chúng ta sẽ thực hiện theo cú pháp gọi phương thức tương tự. Mở wwwroot/index.html tệp và thêm phần tập lệnh sau vào tệp:
<script>
function CSMethod() {
DotNet.invokeMethodAsync('BlazorJSDemo', 'CSCallBackMethod');
}
</script>
Ở đây chúng ta đang định nghĩa một hàm JS “CSMethod”. Hàm này sẽ gọi lại phương thức C# của chúng ta “CSCallBackMethod” được định nghĩa trong JSDemoMô hình lớp.
Để gọi phương thức C#/.NET từ JavaScript, phương thức .NET đích phải đáp ứng các tiêu chí sau:
- Phương thức cần phải là Tĩnh.
- Nó phải là Không chung chung.
- Phương pháp này không nên có quá tải.
- Nó có các loại tham số có thể tuần tự hóa JSON cụ thể.
- Nó phải được trang trí với [JSInvokable] thuộc tính.
Mở JSDemo.cshtml.cs tệp và thêm đoạn mã sau vào bên trong JSDemoMô hình lớp.
protected static string message { get; set; }
[JSInvokable]
public static void CSCallBackMethod()
{
message = "C# Method invoked";
}
protected void CallCSMethod()
{
JSRuntime.Current.InvokeAsync<bool>("CSMethod");
}
Ở đây chúng tôi đã xác định hai phương pháp:
- GọiCSMethod: Điều này sẽ gọi hàm JS của chúng ta là “CSMethod”
- Phương thức CSCallBack: Đây là một phương thức tĩnh và nó sẽ được gọi từ hàm JavaScript “CSMethod”. Do đó nó được trang trí với[JSInvokable] thuộc tính. Phương thức này sẽ đặt giá trị của một biến chuỗi thông điệpsẽ được hiển thị trên giao diện người dùng.
Mở JSDemo.cshtml tập tin và thêm đoạn mã sau vào nó:
<button class="btn btn-primary" onclick="@CallCSMethod">Call C# Method</button>
<br />
<p>@message</p>
Ở đây, chúng tôi đã xác định một nút sẽ gọi phương thức “CallCSMethod” trong sự kiện “onclick”. Giá trị của thông báo biến được đặt khi nhấp vào nút.
Mở \BlazorJSDemo\Shared\NavMenu.cshtml trang và đặt đoạn mã sau vào đó. Điều này sẽ bao gồm một liên kết đến của chúng tôi JSDemo.cshtml trang trong menu điều hướng.
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">BlazorJSDemo</a>
<button class="navbar-toggler" [email protected]>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class=@(collapseNavMenu ? "collapse" : null) [email protected]>
<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;
}
}
bản demo thực hiện
Điều hướng đến Xem >> Thiết bị đầu cuối tích hợp để mở cửa sổ thiết bị đầu cuối.
gõ lệnh chạy dotnet để bắt đầu ứng dụng. Tham khảo hình ảnh bên dưới:

Bạn có thể quan sát thấy rằng ứng dụng đang lắng nghe http://localhost:5000. Mở bất kỳ trình duyệt nào trên máy của bạn và điều hướng đến URL này. Bạn có thể xem trang chủ của ứng dụng. Nhấp vào liên kết “JS Demo” trong menu điều hướng để mở JSdemo lượt xem. Lưu ý rằng URL có “/demo” được thêm vào.
Nhấp vào các nút để gọi các hàm JS và phương thức C#.
Tham khảo GIF bên dưới.

Phần kết luận
Trong bài viết này, chúng ta đã tìm hiểu về JavaScript Interop. Chúng tôi cũng đã tạo một ứng dụng mẫu để chứng minh cách JavaScript Interop hoạt động với khung Blazor.
Vui lòng lấy mã nguồn từ Github và chơi xung quanh để hiểu rõ hơn.
Nhận cuốn sách Hướng dẫn bắt đầu nhanh Blazor của tôi để tìm hiểu thêm về Blazor.
Bạn có thể xem các bài viết khác của tôi về ASP .NET Core tại đây.
Xem thêm
Ban đầu được xuất bản tại ankitsharmablogs.com