ASP.NET自定义路由打破图像和JavaScript

Question

我正在使用ASP.NET MVC 3应用程序,它在使用默认路由时工作正常.所以我有类似这样的网址,localhost:4457/Users/Details/5
我想在url中添加一个友好的slug使其成为localhost:4457/Users/Details/5/some-ones-name.
所以我添加了一个自定义路线,我的路线现在看起来像这样

routes.MapRoute(
     "withslug",
     "{controller}/{action}/{id}/{slug}",
      new { controller = "Home", action = "Index", id = UrlParameter.Optional, slug = UrlParameter.Optional });

 routes.MapRoute(
     "Default",
     "{controller}/{action}/{id}",
      new { controller = "Home", action = "Index", id = UrlParameter.Optional });

在视图中我有这样的动作链接

@Html.ActionLink(Model.Name,"Details","Users", new { id=Model.ID, slug="some-ones-name"},null)

我也有像这样的图像链接

<img src="../../Content/images/picture.jpg" alt="" height="42" width="37" />

链接工作正常,当我点击它正确后.该地址读取localhost:4457/Users/Details/5/some-ones-name.问题是页面上的所有图像现在都被破坏了,我的javascript函数将无法运行.
如果我从地址中删除slug并将url保留为localhost:4457/Users/Details/5一切都按预期工作.

如果我在id之后添加一个斜杠,一切都会再次中断.内容按预期加载,只是图像和一些javascript函数.

我不明白问题是什么,任何见解都将受到高度赞赏.

Answer 1

slu is被视为目录.../当网址包含一个slug时,你需要在图像路径中添加一个额外的工具.你应该真的避免在你的网站上使用这样的相对路径.

如何修复它以使其适用于每个页面

您可以将其更改为使用相对于站点根目录的路径,如下所示:

<img src="/Content/images/picture.jpg" alt="" height="42" width="37" />

或者您可以使用asp.net mvc提供的辅助方法,它的工作原理如下.此方法将自动神奇地转换相对于当前URL的路径.

<img src="@Url.Content("~/Content/images/picture.jpg")" ... />

这将使用<script>和<link>标签以及引用网址的任何其他标记.

注意:我正在使用上面的Razor语法,如果您使用Web表单视图引擎,代码将如下所示.

<img src="<%: Url.Content("~/Content/images/picture.jpg") %>" ... />

另外请注意,<% %>在使用剃须刀几个月之后刚刚写完标签我觉得很脏.