4
Answers

Display images from database with bootstrap carousel

I am trying to display images in an bootstrap carousel and feed data stored in database. I only manage to display one image, the carousel is not working properly. I have more than 4 images stored in the database, with a Datalist I tested and they are displayed properly but not in a carousel. Can you please tell me what am I doing wrong?

View

<div id="carouselHI" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <div class="carousel-item active">
                    <asp:Image ID="imgId" runat="server"
                        ImageURL='<%# Bind("Imagine", "./img/{0}") %>'
                        Style="height: 600px; width: 900px; display: flex; flex-direction: column;"
                        ClientIDMode="Static" />

                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
</div>

and data with

using (SqlConnection conn = new SqlConnection(connString))
{
    string sqlQuery = "SELECT * FROM tblHazInfo WHERE Obiectiv=@Obiectiv AND Cladire=@Cladire AND Cota=@Cota AND Camera=@Camera";
    using (SqlCommand cmd = new SqlCommand(sqlQuery, conn))
    {
        cmd.CommandType = CommandType.Text;
        cmd.Parameters.AddWithValue("@Obiectiv", obiectiv);
        cmd.Parameters.AddWithValue("@Cladire", cladire);
        cmd.Parameters.AddWithValue("@Cota", cota);
        cmd.Parameters.AddWithValue("@Camera", locatie);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        conn.Open();

        DataSet ds = new DataSet();
        da.Fill(ds);
        Repeater1.DataSource = ds.Tables[0];
        Repeater1.DataBind();
        conn.Close();
    }
}
Answers (4)