如何将本机事件与剃刀页面中的文档绑定（Blazor 服务器端应用程序不是互操作文件）

Question

如何将本机事件与剃刀页面中的文档绑定（Blazor 服务器端应用程序不是互操作文件）

<button @onmousemove="@OnMouseMove">Login</Button>

这是按钮元素中的本机事件绑定。

需要在文档中绑定相同的本机事件

Answer 1

您可以通过 JavaScript 和 JavaScript 互操作（ JS interop ）来实现它。您需要在前端订阅事件并调用.Net代码

document.addEventListener("mousemove", function () {
 DotNet.invokeMethodAsync('SoWebApplication (Assembly Name)', 'ReturnDataAsync (Method Name)')
  .then(data => {
        //This line appears in browser dev console.
        console.log(data + " from JS.");
  });
});

并创建用于调用的静态方法。来自文档：

优选异步版本以支持 Blazor Server 场景。.NET 方法必须是公共的、静态的，并且具有 [JSInvokable] 属性。目前不支持调用开放泛型方法。

using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;

static public class Test
{
    [JSInvokable]
    public static Task<string> ReturnDataAsync()
    {
        //This line appears in server console.
        Console.WriteLine("Hello from server");
        return Task.FromResult("Hello");
    }
}