Как написать простую фотогалерею на основе C # / ASP.NET MVC 3 (бритва)?

Question

Я могу сделать это в Javascript, потянув серию миниатюр в виде массива.Тогда я знаю, когда я на первой фотографии или на последней, и могу показать элементы управления на основе этого.

Как это можно эффективно сделать на стороне сервера, используя C # / ASP.NET MVC 3 (razor)? Например, на моем сайте есть одна фотография из 19 фотографий. Я хотел бы добавить следующую / предыдущую функциональность.

Нужно ли мне извлекать весь массив фотографий, анализировать текущую фотографию, определять, является ли она первой или последней, а затем создавать кнопки «Следующая / Предыдущая»?

Answer 1

Создание одной полной загрузки страницы для каждого изображения неэффективно, медленно и быстро отправит ваших посетителей с вашего сайта.

Недавно я создал прилично быструю фотогалерею ASP.NET MVC , используя следующие приемы:

1. Когда посетитель нажимает на определенную папку, на сервер отправляется ajax-запрос, запрашивающий коллекцию миниатюр папки (данные возвращаются в формате JSON)
2. Миниатюры и другие компоненты пользовательского интерфейса визуализируются с использованием каркаса модели представления вида модели под названием Knockout.js (кстати, это здорово!). Информация, полученная с сервера, передается напрямую в модель привязки выбивания в формате JSON, поэтому вам не нужно выполнять сериализацию или сортировку.
3. Когда пользователь нажимает на определенный эскиз, серверу выдается вызов ajax для извлечения объекта JSON, содержащего информацию об изображении: a) URL основного изображения c) следующее и предыдущее изображения (если есть) d) exif информация c) комментарии к этому изображению и т. д.
4. Knockout.js знает, как визуализировать стрелки prev и next (если они есть) и всю остальную информацию в модель представления пользовательского интерфейса, поэтому они обновляются автоматически.

Если вы объедините это с некоторым кэшированием на стороне сервера, у вас будет довольно быстрое приложение для создания фотогалереи.

Ура !!

1025 * Iván *

Answer 2

Когда есть фотогалерея, есть Одна фотография из множества фотографий , и когда есть понятие, например x элементов из y элементов , в которых x < y, тогдавсе думают о пейджинге .Фотогалерея почти как сетка с одним элементом и двумя кнопками для перехода на следующую и предыдущую страницу.Если вы хотите реализовать пейджинг самостоятельно, нет необходимости извлекать все фотографии и сравнивать их с текущей фотографией для создания следующих / предыдущих кнопок.Все, что вам нужно сделать, это кэшировать текущий индекс элемента и количество всех фотографий, и при каждом рендеринге рассчитывать, нужно ли вам рендерить следующие, предыдущие или следующие и предыдущие кнопки.

Answer 3

Это можно сделать несколькими способами:

1. Создайте страницу aspx, которая получает первую фотографию, и создайте кнопки, которые вызывают эту же страницу aspx, но со строкой запроса следующей или предыдущей фотографии, если необходимо. Это решение вызовет обратную передачу, поэтому вам нужно решить, работает ли это для вас или нет.
2. Создайте страницу aspx, которая получит вам фотографию на основе строки запроса, и вызовите ее через jQuery ajax.
3. Создайте файл ASHX, который возвращает другое изображение для параметра строки запроса, и сделайте его SRC для изображения.

Эти три метода позволяют вам разные уровни интерактивности и обратной передачи. Если вы решите, какой маршрут вы хотели бы выбрать, мы можем помочь вам добраться:)

Answer 4

Я не знаю, почему вы идете на это в C #. Делая это в C #, я буду использовать ajax call . Для этого я буду загружать только первое изображение и общее количество изображений изначально.

По общему количеству и текущему изображению не отображаются кнопки «Предыдущая» и «Следующая».

При нажатии кнопки «Вперед» и «Предыдущая» возьмите соответствующее изображение из базы данных с помощью вызова ajax.

Я не знаю, как использовать, но есть много плагинов jquery, чтобы показать галерею

Answer 5

Вы не указали технологию клиента, Silverlight, ASP.NET MVC, ASP.NET Webforms, WPF, Winforms. Концепция заключается в следующем.

1. Выбор клиента / технология презентации
2. Определите, откуда будут поступать фотографии (База данных, Веб-сервис (Infront базы данных)
3. Создание методов для получения следующих и предыдущих фотографий для определенной серии (Альбом, Пользователь, Глобально)
4. Вызовите эти методы при нажатии кнопки «Вперед» или «Назад» (кнопка / изображение).