Как динамически отображать изображения в Bootstrap Carousel, используя URL-адреса изображений базы данных и пользовательский элемент управления - PullRequest
Новая
       35

Как динамически отображать изображения в Bootstrap Carousel, используя URL-адреса изображений базы данных и пользовательский элемент управления

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

Я создал пользовательский элемент управления (ascx) для использования Bootstraps Carousel для отображения изображений с использованием URL-адресов изображений из моей базы данных. Я загружаю созданный пользовательский пользовательский элемент управления и передаю изображение в элемент управления и добавляю его.

Вот мой пользовательский элемент управления: 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CarouselProducts.ascx.cs" Inherits="TermProject.CarouselProducts" %>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!-- Custom CSS -->
<link href="Style.css" rel="stylesheet" />

<div class="container">
    <h2>Carousel Example</h2>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <asp:Image ID="imgProduct" runat="server" Width="100%" />
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Вот код пользовательского элемента управления: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TermProject
{
    public partial class CarouselProducts : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public String ProductImg
        {
            get
            {
                return imgProduct.ImageUrl;
            }
            set
            {
                imgProduct.ImageUrl = value;
            }
        }
    }
}

Вот файл aspx с использованием пользовательского элемента управления: 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using Utilities;
using ClassLibrary;

namespace TermProject
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DBConnect objDB = new DBConnect();
            SqlCommand objCmd = new SqlCommand();

            objCmd.CommandType = CommandType.StoredProcedure;
            objCmd.CommandText = "TP_GetProducts";

            DataSet ds = objDB.GetDataSetUsingCmdObj(objCmd);

            if (ds.Tables[0].Rows.Count > 0)
            {
                CarouselProducts cp = (CarouselProducts)LoadControl("CarouselProducts.ascx");

                foreach (DataRow record in ds.Tables[0].Rows)
                {
                    cp.ProductImg = record["ImgURL"].ToString();
                    Form.Controls.Add(cp);
                }
            }
        }
    }
}

У меня проблема в том, что страница загружает только одно изображение вместо всех изображений.

...