Question

我正在使用ASP.NET MVC 3应用程序，它在使用默认路由时工作正常。所以我的网址与此类似， localhost：4457 / Users / Details / 5
我想在网址中添加一个友好的slug使其成为 localhost：4457 / Users /细节/ 5 /一些酮名称即可。
所以我添加了一个自定义路线，我的路线现在看起来像这样

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并将网址保留为 localhost：4457 / Users / Details / 5 ，一切都按预期工作。

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

我不明白问题是什么，任何见解都会受到高度赞赏。

Answer 1

slug被视为目录。当网址包含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语法，如果您使用的是网络表单视图引擎，则代码将如下所示。

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

附加说明，在使用剃刀几个月后刚刚写完<% %>标签后感觉很脏。

Answer 2

对图像和JavaScript使用绝对路径可能最简单，例如

<img src="/Content/images/picture.jpg" alt="" />

这样，如果您需要再次修改URL路由，则不必担心再次破坏图像，CSS或JavaScript的相对路径。

ResolveClientUrl方法可能对生成绝对路径很有用：

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

Answer 3

如果可能的话，不要使用相对路径。请改用：

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

Answer 4

我还不是路由专家，但我想知道你的问题是否有两个相邻的可选元素。路由引擎如何区分缺少{id}的路由和缺少{slug}的路由？如何将路线更改为{controller}/{action}/{id}-{slug}？

Answer 5

试着使用：

<img src="../../../images/logo.png" />

您可以访问所有级别的图像

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

5 个答案:

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