ASP.NET Core MVC默认路由访问视图时CSS样式丢失问题求解

该问题由静态资源引用路径错误导致：
你当前在布局页中使用了相对路径引用CSS、JS等静态资源（例如引用路径写为css/site.css），不同路由层级下浏览器会基于当前页面路径解析相对路径：

• 当路由为单层/newitem时，相对路径会被解析为/css/site.css，资源路径正确可以正常加载
• 当路由为默认的/{controller}/{action}两层结构时，相对路径会被解析为/{控制器名}/css/site.css，该路径不存在，因此样式加载失败

按优先级从高到低选择以下方案即可：

• 方案1：所有静态资源引用改为~开头的根相对路径
  将布局页中所有CSS、JS、图片的引用路径统一加~/前缀，示例：

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

  ASP.NET Core运行时会自动将~解析为应用的根路径，不受当前页面路由层级影响。
• 方案2：在布局页<head>标签最顶部添加base基准路径
  无需修改所有资源引用，直接添加如下标签即可强制所有相对路径以应用根路径为基准解析：

  <base href="~/" />
  

• 方案3：检查中间件配置顺序
  确保Program.cs中静态资源中间件的注册顺序在路由中间件之前，示例：

  // 先注册静态资源中间件
  app.UseStaticFiles();
  
  // 后注册路由、认证、端点映射等中间件
  app.UseRouting();
  app.UseAuthorization();
  app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
  

  顺序错误会导致静态资源请求被MVC路由拦截，无法返回正确资源。

内容的提问来源于stack exchange，提问作者Luca C.