#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" />
И вы можете получить доступ к изображениям со всех уровней