Blazor WASM中如何从HTML弹窗通过JSInvokeable调用.NET方法？

方案1：用DotNetObjectReference实现JS到.NET实例方法的调用 #

这是最直接的解决方案，不用额外构建JS服务：

1. 在Blazor组件中定义可被JS调用的方法
   注入你的.NET服务（比如IHttpClientFactory或自定义API服务），添加带[JSInvokable]特性的方法处理HTTP请求逻辑：

   @inject IHttpClientFactory HttpClientFactory
   
   @code {
       private DotNetObjectReference<YourComponent>? _componentRef;
   
       protected override void OnInitialized()
       {
           _componentRef = DotNetObjectReference.Create(this);
           // 将组件实例传递给全局JS
           JS.InvokeVoidAsync("setBlazorComponentRef", _componentRef);
       }
   
       [JSInvokable]
       public async Task HandlePopupButtonClick(string markerId)
       {
           // 直接复用现有.NET服务层逻辑
           var client = HttpClientFactory.CreateClient();
           var response = await client.GetFromJsonAsync<YourResponseType>($"api/data/{markerId}");
           // 处理响应数据，比如更新组件UI
           StateHasChanged();
       }
   
       public void Dispose()
       {
           _componentRef?.Dispose();
       }
   }
   

2. 在index.html中添加全局JS函数
   用于接收弹窗按钮的点击事件，中转调用组件的.NET方法：

   window.setBlazorComponentRef = function(componentRef) {
       window.blazorComponentRef = componentRef;
   };
   
   window.onPopupButtonClick = function(markerId) {
       window.blazorComponentRef.invokeMethodAsync('HandlePopupButtonClick', markerId);
   };
   

3. 给弹窗按钮绑定点击事件
   创建HtmlMarkerPopup时，将按钮的onclick指向全局JS函数，传入标记ID等必要参数：

   var popup = new HtmlMarkerPopup
   {
       Content = $"<button onclick=\"window.onPopupButtonClick('{marker.Id}')\">获取详情</button>"
   };
   

方案2：全局事件总线（适合多组件交互场景） #

如果多个组件需要响应弹窗点击事件，可以使用全局事件总线：

• 编写一个全局事件总线服务，注入到需要的组件中
• 在JS点击处理函数中，通过DotNet.invokeMethodAsync触发全局事件
• 订阅该事件的组件执行对应的.NET业务逻辑

无需额外构建JS服务（如axios） #

除非你的项目原本就大量使用JS处理HTTP请求，否则完全没必要单独用axios这类工具。上述方案可以直接复用现有.NET服务层，避免重复编写请求逻辑。

内容的提问来源于stack exchange，提问作者Mike