Blazor Server中JS互调用SweetAlert2失效问题求解

在.NET 8的Blazor Server项目中，希望不依赖SweetAlert2的NuGet包，直接通过JS互操作调用其方法。已在App.razor中按顺序引入sweetalert2.all.min.js等脚本，但C#代码调用Swal.fire方法无效果；自定义JS函数sayHello却能正常通过互操作调用，求正确调用SweetAlert2类库方法的方式。

相关代码 #

App.razor #

<body>
<Routes @rendermode=RenderMode.InteractiveServer />
<script src="bootstrap/jquery.min.js"></script>
<script src="bootstrap/bootstrap.bundle.min.js"></script>
<script src="sweetalert2/sweetalert2.all.min.js"></script>
<script src="js/app.js"></script>
<script src="_framework/blazor.web.js"></script>
</body>

失效的C#调用代码 #

private void CallJs()
{
    Js.InvokeVoidAsync("Swal.fire", args: "Some message to display");
}

预期执行的JS代码 #

Swal.fire("SweetAlert2 is working!");

可正常运行的自定义示例 #

JS函数（app.js中）

function sayHello(name) {
    alert(`Hello ${name}`);
}

C#调用代码

private void CallJs()
{
    Js.InvokeVoidAsync("sayHello", args: "Bob");
}

解决办法 #

• 确认SweetAlert2全局变量可访问
  部分类库会用闭包封装逻辑，导致Swal未挂载到全局window对象上。可以打开浏览器控制台输入Swal，若无法找到该对象，需在js/app.js中手动将其挂载到全局：

  window.Swal = Swal;
  

• 检查脚本加载状态
  确认sweetalert2.all.min.js的文件路径正确（需放在wwwroot/sweetalert2/目录下），通过浏览器F12的「网络」面板查看该脚本是否成功加载（返回状态码200）。

• 封装自定义JS函数调用（推荐）
  Blazor JS互操作对嵌套对象方法的支持有限，建议在js/app.js中封装调用SweetAlert2的函数，再通过C#调用这个自定义函数：

  function showSwalAlert(message) {
      Swal.fire(message);
  }
  

  对应的C#调用代码：

  private void CallJs()
  {
      Js.InvokeVoidAsync("showSwalAlert", "SweetAlert2 is working!");
  }
  

• 确保在正确生命周期调用
  若在组件初始化阶段调用JS互操作，需等待Blazor与JS完成连接。可将调用逻辑放在OnAfterRenderAsync方法中（仅首次渲染时执行）：

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if (firstRender)
      {
          await Js.InvokeVoidAsync("showSwalAlert", "SweetAlert2 is working!");
      }
  }
  

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