ASP.NET пользовательские маршруты, разрушающие изображения и javascript

#c# #asp.net-mvc #routing

#c# #asp.net-mvc #маршруты

Вопрос:

Я работаю над ASP.NET Приложение на MVC 3, и оно отлично работает при использовании маршрутов по умолчанию. Итак, у меня есть URL-адреса, похожие на этот, localhost: 4457 / Users / Details / 5
Я хочу добавить дружественный фрагмент к URL, чтобы сделать его 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, все будет работать так, как ожидалось.

Если я добавлю хотя бы косую черту после идентификатора, все снова сломается. Содержимое загружается, как и ожидалось, только изображения и некоторые функции javascript.

Я не понимаю, в чем проблема, и любая информация будет высоко оценена.

Ответ №1:

Slug обрабатывается как каталог. Вам нужно было бы добавить дополнительный ../ к пути к изображению, чтобы оно работало, когда URL содержит фрагмент. Вам действительно следует избегать использования подобных относительных путей на вашем веб-сайте.

Как это исправить, чтобы это работало на каждой странице

Вы могли бы изменить его, чтобы использовать путь, который относится к корню сайта, вот так:

 <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> , а также с любым другим тегом, который ссылается на URL.

ПРИМЕЧАНИЕ: Я использую приведенный выше синтаксис Razor, если вы используете механизм просмотра веб-форм, код будет выглядеть следующим образом.

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

Дополнительное примечание, я чувствую себя грязным, только что написав <% %> теги после использования razor в течение нескольких месяцев.

Комментарии:

1. Спасибо. Я смешал Url.Content и в других используемых частях .. / .. /. Я изменил все на Url.Content, и это работает как по волшебству. Большое вам спасибо 🙂

2. Я использую Spark с пользовательскими привязками и определяю общее расположение скрипта. Мой синтаксис <Script src="myscript.js" /> мог бы сделать то же самое для изображений. 🙂 sparkviewengine.com/documentation/bindings

Ответ №2:

Возможно, было бы проще всего просто использовать абсолютные пути для ваших изображений и JavaScript, например

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

Таким образом, если вам нужно снова изменить свои URL-маршруты, вам не придется беспокоиться о повторном нарушении каких-либо относительных путей к изображениям, CSS или JavaScript.

Метод ResolveClientUrl может оказаться полезным для генерации ваших абсолютных путей:

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

Ответ №3:

Не используйте относительные пути, если это вообще возможно. Используйте это вместо:

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

Ответ №4:

Я пока не эксперт по маршрутизации, но мне интересно, заключается ли ваша проблема в наличии двух смежных необязательных элементов. Как механизм маршрутизации может отличить маршрут, в котором отсутствует {id}, от маршрута, в котором отсутствует {slug}? Как насчет изменения маршрута на что-то вроде {controller}/{action}/{id}-{slug} ?

Ответ №5:

Просто попробуйте использовать:

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

И вы можете получить доступ к изображениям со всех уровней