.NET 8 MVC非Index视图CSS/JS失效问题求助

问题现象 #

• 应用内9个不同控制器的Index.cshtml视图使用共享布局_Layout.cshtml时，CSS、JS加载正常，页面显示无异常
• 为任意控制器添加第二个Action及对应视图后，布局的HTML结构正常渲染，但CSS样式和JS功能完全失效
• 新增TestController及其Index视图，布局（含CSS/JS）功能恢复正常
• 所有视图开头代码统一为：

  @{
      ViewData["Title"] = "Some Title";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  

• BundleConfig配置：

  [
    {
      "outputFileName": "wwwroot/css/site.min.css",
      "inputFiles": [
        "wwwroot/css/site.css"
      ]
    },
    {
      "outputFileName": "wwwroot/js/site.min.js",
      "inputFiles": [
        "wwwroot/js/site.js"
      ],
      "minify": {
        "enabled": true,
        "renameLocals": true
      },
      "sourceMap": false
    }
  ]
  

• 布局文件中CSS放在<head>标签内，JS放在</body>标签前，调整JS位置无效果；未使用Libman，直接导入HTML/CSS/JS模板

核心原因 #

非Index视图的URL结构为/控制器名/动作名，而Index视图的URL通常为/控制器名（或/控制器名/Index）。如果布局文件中CSS/JS使用相对路径（如css/site.min.css），浏览器会从当前URL路径下请求资源，即/控制器名/css/site.min.css，而正确的资源路径应为/css/site.min.css，导致资源加载失败。

解决方法 #

1. 修正资源引用路径 #

将布局文件中的CSS/JS引用改为根路径绝对引用，三种方式可选：

• 直接使用根路径开头的路径：

  <link rel="stylesheet" href="/css/site.min.css" />
  <script src="/js/site.min.js"></script>
  

• 使用Razor的Url.Content()方法生成正确路径：

  <link rel="stylesheet" href="@Url.Content("~/css/site.min.css")" />
  <script src="@Url.Content("~/js/site.min.js")"></script>
  

• 使用~符号配合Razor自动解析：

  <link rel="stylesheet" href="~/css/site.min.css" />
  <script src="~/js/site.min.js"></script>
  

2. 确认Bundle文件已生成 #

• 检查wwwroot/css和wwwroot/js目录下是否存在site.min.css和site.min.js
• 若文件缺失，右键点击bundleconfig.json，选择捆绑和压缩文件手动触发生成

3. 验证路由配置 #

确保Program.cs中的默认路由配置正确：

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

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