Blazor Server项目中Blazored Modal JS资源路径错误问题咨询

这个问题的核心是JS资源引用路径使用了相对路径，导致在子路由（如/setup）下，浏览器错误地将路由前缀拼接进了资源路径中。

解决步骤 #

• 检查所有引用BlazoredModal.razor.js的地方，确保路径是绝对路径（以/开头）：

  1. 如果是在_Layout.cshtml中引用，修改为：

     <script src="/_content/Blazored.Modal/BlazoredModal.razor.js"></script>
     

     避免使用不带开头斜杠的_content/Blazored.Modal/BlazoredModal.razor.js——这种相对路径会被浏览器解析为/setup/_content/...，自然找不到资源。

  2. 如果是在Razor组件中通过IJSRuntime动态导入，修改为：

     await JS.InvokeVoidAsync("import", "/_content/Blazored.Modal/BlazoredModal.razor.js");
     

  3. 也可以在Razor页面/布局中使用@Url.Content生成根路径相对的绝对路径：

     <script src="@Url.Content("~/_content/Blazored.Modal/BlazoredModal.razor.js")"></script>
     

     这里的~/会自动解析为网站根目录，确保无论当前路由是什么，资源路径都指向正确的位置。

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