Блог

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

Код работает нормально, но мне нужно, чтобы изображения отображались в виде слайдера. В настоящее время 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.

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

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

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

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

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

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