使用Route路由时静态资源（CSS/图片）加载404的问题求助

静态资源404的核心原因 #

当前路由是多级路径（Posts/{year:int}/{month:int}/{title}），如果静态资源用相对路径引用，浏览器会从当前路由层级（比如/Posts/2024/10/）下去找资源，而实际静态资源在网站根目录的wwwroot下，导致路径不匹配。

解决静态资源加载问题的方法 #

• 改用绝对路径引用资源
  把CSS、图片的引用改为以/开头的根路径，比如：

  <link rel="stylesheet" href="/css/site.css">
  <img src="/images/banner.jpg" alt="Banner">
  

  这样浏览器会直接从网站根目录（wwwroot）查找资源，不受当前路由层级影响。

• 使用ASP.NET Core Tag Helper生成正确路径
  利用框架自带的Tag Helper自动生成根路径，还能附加版本号避免缓存问题：

  <!-- CSS引用 -->
  <link rel="stylesheet" asp-href-include="css/*.css" asp-append-version="true" />
  <!-- 图片引用 -->
  <img asp-src="images/logo.png" alt="Logo" />
  

  注意要在_ViewImports.cshtml中添加Tag Helper引用：

  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  

• 确认静态资源中间件配置顺序
  在Program.cs中，UseStaticFiles()必须放在路由相关中间件之前，确保静态资源请求先被处理：

  var builder = WebApplication.CreateBuilder(args);
  // 添加控制器服务
  builder.Services.AddControllersWithViews();
  
  var app = builder.Build();
  
  // 静态资源中间件要放在路由之前
  app.UseStaticFiles();
  
  app.UseRouting();
  
  app.UseEndpoints(endpoints =>
  {
      endpoints.MapControllerRoute(
          name: "default",
          pattern: "{controller=Home}/{action=Index}/{id?}");
      // 特性路由可正常保留，两者兼容
  });
  
  app.Run();
  

解决Map.Get返回"{}"的问题 #

如果用MapGet直接定义路由返回空对象，大概率是因为没有正确返回数据或视图：

• 如果要返回视图，确保指定视图名称并传入模型：

  app.MapGet("Posts/{year:int}/{month:int}/{title}", async (int year, int month, string title, IPostRepository repo) =>
  {
      var post = await repo.GetPostAsync(year, month, title);
      if (post == null) return Results.NotFound();
      // 返回Detail视图并传入模型
      return Results.View("Detail", post);
  });
  

• 如果要返回JSON数据，确保模型有可序列化的公共属性（不要用私有字段）：

  app.MapGet("Posts/{year:int}/{month:int}/{title}", async (int year, int month, string title, IPostRepository repo) =>
  {
      var post = await repo.GetPostAsync(year, month, title);
      return post == null ? Results.NotFound() : Results.Json(post);
  });
  

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