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
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();
}
}
Marius VasilePosted Mar 27, 2025, 4:49 PM
Thank you for your reply Prasad. It is working properly now
Prasad RaveendranPosted Mar 23, 2025, 11:25 PM
I hope you have got the solution.
Marius VasilePosted Mar 23, 2025, 6:50 PM
I got a solution by changing the carousel activ item div with
Emily FosterPosted Mar 23, 2025, 5:03 PM
It appears that the issue you are encountering with your Bootstrap carousel and image display from a database is related to how multiple images are being handled within the carousel. Let's address a few things to troubleshoot and enhance your implementation:
1. Active Class Issue: The `active` class in the `carousel-item` div should not be applied to every item in the carousel. Only the first item should have the `active` class, so subsequent images should not have this class. This will ensure the carousel functions correctly by transitioning between images.
2. Iteration through Images: Ensure that your Repeater properly iterates through all the images retrieved from the database. Each image should be wrapped in a `carousel-item` div, but only the first image should have the `active` class as mentioned earlier.
3. Data Binding: Check that your database query is correctly fetching all the desired images. Verify the structure of your `tblHazInfo` table to ensure that the data is being selected and bound correctly.
4. Bootstrap Carousel Initialization: Make sure that you have initialized the Bootstrap carousel in your script. Include the necessary Bootstrap JavaScript and jQuery files if they are not already present. Also, verify that you have the correct structure for the Bootstrap carousel initialization in your script.
5. Image Source: Ensure that the `ImageURL` property in the `asp:Image` control is correctly bound to the image path from the database. Confirm that the path is being constructed accurately for each image.
By addressing the above points, you should be able to troubleshoot and enhance your Bootstrap carousel implementation to display multiple images retrieved from the database. If you encounter any further issues or require additional assistance, feel free to provide more details or code snippets for further analysis and support. Good luck with your project, and don't hesitate to reach out for more help!