Blazor 监听 javascript 事件

Question

我有一个名为 Hello 的 javascript 事件：

addEventListener('hello', function () {
  alert("event listener");
})

然后，在另一个 javascript 函数中，我引发了事件：

let event = new Event("hello", { bubbles: true });
document.dispatchEvent(event);

我现在要做的是让事件在javascript函数中触发。 Blazor 应该监听事件，而不是 javascript 调用 Blazor 方法。

希望有人能帮助我。

问候我，

Answer 1

对于自定义事件，您需要手动使用 JavaScript/.NET interoperability。

使用Instance Method Call方法：

Pass the .NET instance by reference to JavaScript:

Make a static call to DotNetObjectReference.Create.

Wrap the instance in a DotNetObjectReference instance and call Create on the DotNetObjectReference instance. Dispose of DotNetObjectReference objects (an example appears later in this section).

Invoke .NET instance methods on the instance using the invokeMethod or invokeMethodAsync functions. The .NET instance can also be passed as an argument when invoking other .NET methods from JavaScript.

例子

请注意，这是一个非常简化的示例。您可能想添加一些东西；从 IDisposable 开始 classes to avoid memory leaks.

在 C# 中，创建一个助手 class 来管理互操作：

public class CustomEventHelper
{
    private readonly Func<EventArgs, Task> _callback;

    public CustomEventHelper(Func<EventArgs, Task> callback)
    {
        _callback = callback;
    }

    [JSInvokable]
    public Task OnCustomEvent(EventArgs args) => _callback(args);
}

public class CustomEventInterop : IDisposable
{
    private readonly IJSRuntime _jsRuntime;
    private DotNetObjectReference<CustomEventHelper> Reference;

    public CustomEventInterop(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public ValueTask<string> SetupCustomEventCallback(Func<EventArgs, Task> callback)
    {
        Reference = DotNetObjectReference.Create(new ScrollEventHelper(callback));
        // addCustomEventListener will be a js function we create later
        return _jsRuntime.InvokeAsync<string>("addCustomEventListener", Reference);
    }

    public void Dispose()
    {
        Reference?.Dispose();
    }
}

在 Blazor 组件中，添加互操作实例 class (Interop) 并添加本地方法作为回调 (HandleCustomEvent):

private CustomEventInterop Interop { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender) {
    if (!firstRender)
    {
        return;
    }
    Interop = new(JS);
    await Interop.SetupCustomEventCallback(args => HandleCustomEvent(args));
    HasRendered = true;
}

private void HandleCustomEvent(EventArgs args) {
    // ... handle custom event here
}

在JavaScript中，添加一个引用DotNetObjectReference的方法，可以在C#中调用互操作：

function addCustomEventListener(dotNetObjectRef) {
  document.addEventListener('hello', (event) => {
    // Calls a method by name with the [JSInokable] attribute (above)
    dotNetObjectRef.invokeMethodAsync('OnCustomEvent')
  });
}

如果使用 TypeScript，您可以查看此 GitHub Issue。

Blazor 监听 javascript 事件

Blazor listen to javascript event

.net

javascript

interop

webassembly

blazor

例子