MVC 3 View: Как создать <image>с помощью src, который содержит и строку, и данные модели - PullRequest
0 голосов
/ 12 ноября 2011

Итак, я начал небольшой домашний проект в MVC 3, где мне нужно сделать фотогалерею.

Я следовал руководству, в котором я создавал папку «Изображение» внутри папки «Содержимое», в которую я поместил 2 изображения, а также XML-файл, содержащий путь и описание для каждого изображения.

Затем XML загружается из файловой системы в XDocument и доставляется в View.

Предполагается, что представление затем просматривает каждое изображение (имеет 2 свойства, путь и описание) и вставляет этот путь в свойство HTML src и свойство href.

Я вижу, что пути правильно отображаются, например, img1.png, в представление. Однако у меня есть проблемы с получением путей для работы, чтобы отобразить картинку. Я думаю, что href и src не могут правильно интерпретировать строки свойств.

Или, может быть, мне нужен относительный путь или кодирование Url.Content?

Вот вид

@foreach(var item in Model){
 <div>
   <a href="content/images/@item.path">
     <img src="content/images/@item.path"/>
   </a>
   <span>
    @item.description
   </span
</div>

Надеюсь, я все правильно объяснил, иначе не стесняйтесь спрашивать дополнительную информацию.

Мой план состоит в том, чтобы иметь страницу, содержащую эти изображения, а затем использовать JQuery Ligthbox, чтобы иметь возможность увеличивать изображения и легко просматривать их.

1 Ответ

4 голосов
/ 12 ноября 2011

Относительный путь здесь не сработает.Из-за перенаправленного пути.Например, ваш текущий URL-адрес mydomain.com/Gallery/All и ваш путь к изображению, заданный content/images/@item.path, который вернет mydomain.com/Gallery/All/content/images/@item.path, и определенно ваше изображение находится не в этом месте.

Для этого вам проще использовать Url.Content вот так:

@foreach(var item in Model){
 <div>
   <a href="@Url.Content("~/content/images/" + item.path)">
     <img src="@Url.Content("~/content/images/" + item.path)" />
   </a>
   <span>
    @item.description
   </span
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...