Tích hợp JavaScript để giải quyết lỗi "Không có bộ điều phối cuộc gọi nào được đặt" trong máy chủ ASP.NET Core Blazor

Xử lý tích hợp JavaScript và .NET trong ứng dụng máy chủ Blazor

Việc tích hợp JavaScript với các chức năng .NET đôi khi có thể dẫn đến sự cố không mong muốn khi sử dụng Blazor Server. Lỗi "Không có bộ điều phối cuộc gọi nào được đặt" xuất hiện khi gọi các hàm.NET từ JavaScript là sự cố thường xuyên xảy ra đối với các nhà phát triển. Khi cố gắng gọi các hàm static.NET từ bên ngoài các thành phần Blazor, vấn đề này có thể khá khó chịu.

Chúng tôi sẽ xem xét một tình huống điển hình khi sự cố này phát sinh trong ứng dụng Blazor Server trong bài viết này. Sự cố thường xuất hiện khi bạn cố gắng gọi phương thức a.NET trong JavaScript bằng cách sử dụng đối tượng `window.DotNet`, đặc biệt nếu phương thức đó được chứa trong một dịch vụ chứ không phải một thành phần. Đối với các tác vụ liên tục như ghi nhật ký, phương pháp này có thể hữu ích.

Chúng ta sẽ xem xét một ví dụ thực tế chỉ cho bạn cách định cấu hình ứng dụng Blazor Server của bạn để chạy dịch vụ phụ trợ tĩnh. Mục đích là để đảm bảo rằng dịch vụ này có thể giao tiếp với JavaScript một cách chính xác, tránh các lỗi điển hình dẫn đến lỗi điều phối. Bạn sẽ thấy những vấn đề này có thể xảy ra như thế nào khi sử dụng không gian tên sai hoặc khởi tạo dịch vụ không chính xác.

Cuối cùng, chúng ta sẽ xem xét các hành động cần thiết để khắc phục sự cố và đảm bảo rằng JavaScript có thể gọi các phương thức .NET của bạn một cách nhất quán. Bạn có thể củng cố ứng dụng Blazor Server của mình và làm cho ứng dụng này có khả năng hỗ trợ tương tác JavaScript tốt hơn bằng cách khắc phục các sự cố này.

Hiểu JavaScript với khả năng tương tác .NET trong Máy chủ Blazor

Vấn đề gọi phương thức a.NET từ JavaScript trong ứng dụng Blazor Server được giải quyết bằng các tập lệnh đã cho. Vấn đề chính phát sinh khi các lập trình viên cố gắng sử dụng JavaScript để gọi các hàm.NET nhưng gặp lỗi "Không có bộ điều phối cuộc gọi nào được đặt". Điều này xảy ra do JavaScript không thể giao tiếp với chương trình phụ trợ .NET cho đến khi khung Máy chủ Blazor xác minh rằng bộ điều phối cuộc gọi được định cấu hình đúng. Trong ví dụ này, các phương thức .NET được lưu trữ trong một lớp dịch vụ tĩnh có tên là Dịch vụ JsHelper, giúp chúng có sẵn trên toàn thế giới và không bị giới hạn ở một thành phần cụ thể nào có thể phân hủy.

các [JSInvokable] lệnh cốt lõi là cần thiết để thực hiện .MẠNG LƯỚI method callable from JavaScript. This attribute in the script designates the method phương thức có thể gọi được từ JavaScript. Thuộc tính này trong tập lệnh chỉ định phương thức i>WriteInfo, làm cho nó có thể truy cập được bằng JavaScript. Với sự trợ giúp của dịch vụ ghi nhật ký tin nhắn này, bạn có thể xem cách tận dụng.NET để ghi nhật ký tập trung trong khi vẫn mở JavaScript. các Ban đầu nên sử dụng phương thức này để gọi dịch vụ từ Chương trình.cs để nó được khởi tạo khi ứng dụng khởi động và không phụ thuộc vào các thành phần riêng biệt có thể bị loại bỏ.

Phần JavaScript của ví dụ gọi hàm .NET một cách không đồng bộ bằng cách sử dụng window.DotNet.invokeMethodAsync. Điều này đảm bảo rằng mỗi phương thức được gọi đều được xử lý theo cách không chặn, cho phép mã khác chạy tạm thời trong khi chờ câu trả lời a.NET. Kịch bản lệnh tạo ra một phương thức có thể tái sử dụng có tên viếtThông tin có thể được gọi từ bất kỳ khu vực nào của chương trình để ghi thông tin bằng cách gán thông tin này cho window.dotnetLogger sự vật. Để gỡ lỗi, tập lệnh cũng sử dụng một trình gỡ lỗi dòng này cho phép nhà phát triển tạm dừng thời gian chạy và kiểm tra trạng thái của các biến.

Làm cho việc đảm bảo DotNet đối tượng có thể truy cập được trong phạm vi cửa sổ chung là điều cần thiết trong khi khắc phục sự cố. JavaScript không thể gọi các phương thức .NET nếu đối tượng này vắng mặt hoặc được định cấu hình không chính xác. Không gian tên phương thức cần phải được xử lý chính xác trong gọiPhương thứcAsync gọi điện để ngăn chặn sự cố. Không gian tên không khớp hoặc đăng ký dịch vụ không chính xác trong Chương trình.cs là những lỗi thường gặp. Vấn đề loại bỏ dịch vụ được giải quyết bằng cách đăng ký dịch vụ dưới dạng đơn lẻ bằng cách sử dụng builder.Services.AddSingleton, điều này đảm bảo rằng dịch vụ có sẵn trong suốt thời gian áp dụng.

namespace MyNamespace.Utility
{
    public static class JsHelperService
    {
        static JsHelperService()
        {
            var i = 0; // Constructor breakpoint test
        }
        public static void Init() { /* Ensure initialization in Program.cs */ }
        [JSInvokable("WriteInfo")]
        public static void WriteInfo(string message)
        {
            Logger.Instance.WriteInfo(message);
        }
    }
}

namespace MyNamespace.Utility
{
    public class JsHelperService
    {
        private readonly ILogger _logger;
        public JsHelperService(ILogger<JsHelperService> logger)
        {
            _logger = logger;
        }
        [JSInvokable("WriteInfo")]
        public void WriteInfo(string message)
        {
            _logger.LogInformation(message);
        }
    }
}

// In Program.cs, register the service
builder.Services.AddSingleton<JsHelperService>();

function setupLogging() {
    debugger; // For debugging
    window.dotnetLogger = window.dotnetLogger || {};
    window.dotnetLogger.writeInfo = function (message) {
        window.DotNet.invokeMethodAsync('MyNamespace', 'WriteInfo', message)
        .then(response => console.log('Info logged successfully'))
        .catch(error => console.error('Error logging info:', error));
    };
}

using Xunit;
public class JsHelperServiceTests
{
    private readonly Mock<ILogger<JsHelperService>> _mockLogger;
    private readonly JsHelperService _jsHelperService;
    public JsHelperServiceTests()
    {
        _mockLogger = new Mock<ILogger<JsHelperService>>();
        _jsHelperService = new JsHelperService(_mockLogger.Object);
    }
    [Fact]
    public void WriteInfo_LogsMessage()
    {
        var message = "Test log message";
        _jsHelperService.WriteInfo(message);
        _mockLogger.Verify(logger => logger.LogInformation(message), Times.Once);
    }
}

Khả năng tương tác JavaScript của Blazor: Vượt xa những điều cơ bản

Để Blazor Server xây dựng các ứng dụng trực tuyến mạnh mẽ, việc tích hợp JavaScript và .NET là điều cần thiết. Nhưng việc sử dụng Blazor để làm việc với các dịch vụ tĩnh có thể là một thách thức, đặc biệt là khi tương tác với JavaScript. Khi gọi các hàm .NET từ JavaScript, lỗi "Không đặt bộ điều phối cuộc gọi" thường xuyên xảy ra. JavaScript Interop của Blazor, phụ thuộc vào bộ điều phối cuộc gọi để xử lý các cuộc gọi giữa các môi trường, thường gặp sự cố này do thiết lập không đúng hoặc thiếu cấu hình. Để ngăn chặn những sai lầm như vậy, người ta phải hiểu cách Blazor khởi tạo và duy trì bộ điều phối của nó.

Đảm bảo dịch vụ hiển thị các chức năng.NET được khởi tạo chính xác khi khởi chạy ứng dụng là một cách để giải quyết vấn đề này. Dịch vụ này được thêm vào dưới dạng singleton TRONG Program.cs, vì vậy bạn biết nó sẽ ở đó trong suốt thời gian áp dụng. Cho rằng các lớp tĩnh như JsHelperService không phụ thuộc vào bất kỳ thành phần cụ thể nào, điều này đặc biệt quan trọng khi sử dụng chúng. Việc duy trì dịch vụ đảm bảo rằng JavaScript có thể gọi các phương thức .NET liên tục mà không gặp phải các vấn đề liên quan đến vòng đời.

Xác minh sự tồn tại của DotNet đối tượng trong môi trường JavaScript là một thành phần quan trọng khác. Nó là cần thiết cho window.DotNet đối tượng cần tải và có sẵn trước khi gọi bất kỳ phương thức .NET nào từ JavaScript. Hãy chắc chắn rằng Blazor.webassembly.js file khởi tạo đối tượng này một cách thích hợp, nếu không có thể xảy ra các lỗi như lỗi bên dưới. Bạn có thể theo dõi tính khả dụng của đối tượng này bằng cách sử dụng trình gỡ lỗi JavaScript để giám sát quá trình khởi tạo.