ASP.NET Razor中如何让URL匹配文件夹结构进行映射

问题场景 #

你的文件夹结构如下：

Pages
|
|- index.cshtml
|- products.cshtml
|- products
           |
           |- product1.cshtml
           |- product2.cshtml
|- settings.cshtml

根目录下的页面路由映射正常（如products.cshtml对应https://example.com/products），但你希望products子文件夹内的页面也遵循相同路由规则（如product1.cshtml对应https://example.com/products/product1）。目前手动在文件中添加@page "/products/product1"的方式仅部分生效，且当URL末尾带/时会出现CSS加载异常。

解决方案 #

1. 利用Razor Pages默认路由约定，避免手动硬编码路径 #

Razor Pages本身支持基于文件路径的路由约定，无需在每个子页面中手动指定@page路径：

• Pages/products/product1.cshtml 默认就会映射到 https://example.com/products/product1
• 如果你之前手动添加了@page "/products/product1"，可以直接删除这一行，让框架自动处理路由映射。

如果删除后路由不生效，检查项目的Program.cs（.NET 6+）或Startup.cs（旧版本）中的路由配置，确保启用了Razor Pages的默认路由：

// Program.cs 示例
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages(); // 添加Razor Pages服务

var app = builder.Build();
app.UseStaticFiles(); // 必须启用静态文件中间件
app.UseRouting();
app.MapRazorPages(); // 映射Razor Pages路由

app.Run();

2. 修复URL末尾带/时的静态资源加载问题 #

CSS加载失败是因为使用了相对路径引用资源，比如：

<link href="css/site.css" rel="stylesheet">

当URL为https://example.com/products/product1/时，浏览器会尝试请求https://example.com/products/product1/css/site.css，而实际静态资源在根目录的css文件夹下。

解决方法是使用根相对路径，通过~符号表示网站根目录：

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

Razor会自动将~解析为网站根路径，无论当前URL是否带末尾斜杠，都能正确定位到静态资源。

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