ASP.NET路由子页面时CSS/JS文件出现404错误的问题排查

一、路由配置检查 #

先确认你的Global.asax中的路由配置是否符合以下正确格式：

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapPageRoute(
        routeName: "AddCustomer",
        routeUrl: "customers/add-customer",
        physicalFile: "~/add-customer.aspx"
    );
}

如果配置和上述一致，路由本身是没问题的。但要注意两个细节：

• 不要把更宽泛的路由（比如customers/{*path}）放在这个路由前面，否则会优先匹配泛路由导致当前路由失效。
• 确保physicalFile参数用~/指向应用根目录下的add-customer.aspx，路径不能写错。

二、资源404的核心原因与修复 #

样式、JS文件返回404，本质是路由改变了页面的虚拟访问路径：
原本add-customer.aspx在根目录，相对路径引用的资源（比如css/style.css）会被浏览器解析为/css/style.css；但现在访问路径是customers/add-customer，浏览器会把相对路径解析为/customers/css/style.css，而实际资源并不在这个路径下，所以报错。

修复方法选一种即可：

1. 用绝对路径引用资源 #

直接在资源路径前加/，强制从应用根目录加载：

<link href="/css/style.css" rel="stylesheet">
<script src="/js/common.js"></script>

2. 用ASP.NET内置方法生成正确路径 #

利用Page.ResolveClientUrl动态解析资源的根路径，适配路由后的虚拟路径：

<link href='<%= Page.ResolveClientUrl("~/css/style.css") %>' rel="stylesheet">
<script src='<%= Page.ResolveClientUrl("~/js/common.js") %>'></script>

3. 设置<base>标签统一基础路径 #

在页面的<head>中添加<base>标签，指定所有相对路径的基准为应用根目录：

<head runat="server">
    <base href="<%= Request.ApplicationPath %>/" />
    <!-- 其他资源引用保持原有相对路径即可 -->
    <link href="css/style.css" rel="stylesheet">
</head>

注意：如果页面内有锚点链接（比如#top）或其他相对页面链接，需要确认它们不受<base>标签的影响。

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