传递Guid至asp-route-id时CSS/JS加载失败问题求助

这个问题的核心是静态资源（CSS/JS）使用了相对路径，导致点击带Guid参数的详情链接后，资源请求路径错误。

当你通过asp-route-id="@residence.Id"生成详情链接后，页面URL会变成类似/Residences/Details/3fa85f64-5717-4562-b3fc-2c963f66afa6的多层级结构。如果布局页（_Layout.cshtml）里的CSS/JS引用用的是相对路径（比如css/site.css），浏览器会从当前URL的层级下去请求资源，也就是/Residences/Details/css/site.css，而这个路径下不存在对应的静态资源，自然加载失败。

解决步骤： #

• 修正静态资源引用路径：在布局页中，所有CSS、JS、图片等静态资源的路径统一改用根路径开头的写法，用~/表示网站根目录，ASP.NET Core会自动解析为正确的绝对路径。

错误示例：

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

正确写法：

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

也可以使用@Url.Content辅助方法（效果一致）：

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

• 检查图片路径：你代码中的图片使用了@Url.Content(residence.ResidenceImage)，确保ResidenceImage存储的是相对根目录的路径（比如~/images/residence1.jpg或images/residence1.jpg），这样@Url.Content会自动解析为正确的绝对路径。

修改后可以打开浏览器开发者工具（F12）的网络面板，查看CSS/JS的请求状态，返回200即表示资源加载正常。

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