Cách triển khai JavaScript Interop trong Blazor

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 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