HomeLập trìnhJavaScriptCách triển khai...

Cách triển khai JavaScript Interop trong Blazor


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.

Đọc thêm  Dưới mui xe của động cơ V8

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:

xyduFrvvobk8FKc3R4BRiAuZXmiJf6kNSv-0

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.

oInrxVk6aoBMy6u9enSL3XjGiKUrSZy9augG

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.

yD2TqOZ31I3GFMavWBRJ5FeVs13NOe2xU0Di

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:

7uGmB3024FB7kaSQo-ZLMEnikX4CbA-tjEWa

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.

Đọc thêm  Cách sử dụng các phương thức mảng JavaScript slice() và splice()

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

  1. 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.
  2. 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:

  1. Phương thức cần phải là Tĩnh.
  2. Nó phải là Không chung chung.
  3. Phương pháp này không nên có quá tải.
  4. Nó có các loại tham số có thể tuần tự hóa JSON cụ thể.
  5. 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:

  1. GọiCSMethod: Điều này sẽ gọi hàm JS của chúng ta là “CSMethod”
  2. 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 [email protected](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:

qPRwkQvalkfUx3ITH-tg6aG3TBMNscnWerVB

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.

J1P95jKUa8BulGL6f1qvan-kmMqn6XorEnaH

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



Zik.vn - Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status