Как показать источник данных ListView в виде слайдера изображений на ASCX? - PullRequest
Новая
       17

Как показать источник данных ListView в виде слайдера изображений на ASCX?

0 голосов
/ 02 апреля 2019

Я работаю над проектом DotNetNuke, где мне нужно показать несколько изображений из базы данных SQL-сервера на внешнем интерфейсе в виде слайдера. Я вложил разметку ползунка в элемент управления asp:ListView на странице ASCX и назначил набор данных в качестве источника данных для asp:ListView в моем коде файла.

Код работает нормально, но мне нужно, чтобы изображения отображались в виде слайдера. В настоящее время 2-е изображение показано справа внизу первого изображения, а 3-е изображение после 2-го. Я хочу, чтобы они выглядели как слайдер, который скользит справа налево или наоборот с помощью кнопок навигации слева и справа.

Вот мой код ASCX: 

<asp:ListView ID="lvFeaturedSlider" runat="server" class="full">
    <ItemTemplate>
        <div class="home-slide">
            <a href="#">
                <span class="project-title-large">MARRIOT HOTEL LOUNGE</span>   
                <img src="http://localhost:52829<%# Eval("Image") %>" alt="">
            </a>
         </div>
    </ItemTemplate>
</asp:ListView>

А вот мой код: 

private void BindSlider()
   {
        ProjectsController objController = new ProjectsController();
        DataSet ds = new DataSet();
        ds = objController.GetFeaturedProjectSlider();

        if (ds.Tables[0].Rows.Count > 0)
        {
            lvFeaturedSlider.DataSource = ds.Tables[0].DefaultView;
            lvFeaturedSlider.DataBind();
        }
        else
        {
            lvFeaturedSlider.DataSource = null;
            lvFeaturedSlider.DataBind();
        }
    }

Кнопки навигации слева и справа появляются, когда я жестко кодирую разметку вне ItemTemplate. Но после привязки они не появляются, и изображения также не отображаются как слайдер. Я попытался заключить код внутри ItemTemplate в оператор foreach, но не могу определить точный формат расположения элементов на странице ASCX.

1 Ответ

0 голосов
/ 02 апреля 2019

Я знаю, что stackoverflow хмурится при ответе на вопросы, меняя тему, но ... я думаю, что здесь уместно.

Первый вопрос: вы делаете это в файле темы (скина)?Если вы не нормальный способ сделать это.

Второй вопрос: храните ли вы изображения в базе данных DNN?Обычно это вызывает недовольство, в основном из-за проблем с производительностью.

Теперь правильный путь для этого - установить модуль в установку DNN и использовать его пользовательский интерфейс и инструменты для настройки ползунка.Все это должно быть частью модуля.Есть несколько очень хороших слайдерных модулей, как коммерческих, так и с открытым исходным кодом.Google или проверьте DNN Store.

Теперь к вашему вопросу.Ваш ретранслятор создает серию div на вашей странице, по одному для каждого изображения.Вот почему вы видите все изображения в вертикальном расположении.Если вы хотите «сдвинуть» их, вам нужно добавить некоторые функции, чтобы сделать это.Они могут сделать это путем добавления некоторого javascript или jQuery, чтобы превратить этот набор элементов div в слайдер.Google 'jquery slider' для большого выбора.

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

...