How to display images from folder dynamically into web page using ASP.NET?
In this article I will be explaining you a simple way to show and rotate images in the web page without using AJAX, Ad rotator, Jquery etc.
Description
In many times we are need to display images in the web page from folder and display that image like slide show (advertisement). If you create slideshow using ad rotator you need to mention path in XML for each image that is static one. But using this code snippet no need to create XML file or any file to load images in the webpage. Just only one time mention path of the folder in the source code.
This code snippet is helps you to make slide show (like DNS awards winner list slide show) from your folder image. If you want add any image in your slide show then no need to alter code just place that image in that rooted path it's enough automatically image will appear in web page.
For example,
Here in my code snippet I have placed images in the folder name like "uploads" that is placed in the root path. And I have create one user control page (Image.ascx) to write code in that code behind and then I drag and drop that custom control in webpage Default.aspx to make slide show in my web page.Full Source Code
I have design page in the user control using image control like below Client Side: Image.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Image.ascx.cs" Inherits="Image" %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Up1" runat="server">
<ContentTemplate>
<asp:Image ID="Image1" runat="server" Width="100" Height="100" />
<br />
<asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>Code Behind: Image.ascx.cs
using System.IO;
using System.Collections;
public partial class Image : System.Web.UI.UserControl
{
//just provide here your image folder path nothing to change anywhere else
string store_folder = HttpContext.Current.Server.MapPath("~/uploads");
protected void Page_Load(object sender, EventArgs e)
{
//Initally assign image count as zero
int count = 0;
if (!Page.IsPostBack)
{
ArrayList slide = new ArrayList();
System.IO.DirectoryInfo inputDir = new System.IO.DirectoryInfo(store_folder);
//Get each file in the specified folder store in the array list
foreach (FileInfo eachfile in inputDir.GetFiles())
{
slide.Add(eachfile.ToString());
count += 1;
}
//store the total file count in the session
Session["count"] = count;
//store the total images name arraylist in the session
Session["images"] = slide;
Timer1_Tick(this, new EventArgs());
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
ArrayList slide = new ArrayList();
//Get the image name from the session assign back in the arraylist
slide = (ArrayList)Session["images"];
if ((Session["current"] != null) && (Convert.ToInt32(Session["current"]) != Convert.ToInt32(Session["count"]) - 1))
{
//If already image is display in control then assign next image when post back occur
Image1.ImageUrl = "~\\uploads\\" + slide[Convert.ToInt32(Session["current"]) + 1].ToString();
Session["current"] = Convert.ToInt32(Session["current"]) + 1;
}
else if (Session["current"] == Session["count"])
{
//If that displayed image is last image then start again from beginning to display in image control
Image1.ImageUrl = "~\\uploads\\" + slide[0].ToString();
Session["current"] = 0;
}
else
{
if (Convert.ToInt32(Session["count"]) != 0)
{
//Initally load the first image in the image control
Image1.ImageUrl = "~\\uploads\\" + slide[0].ToString();
Session["current"] = 0;
}
}
}
}Default.aspx
<h3>
Display Images from folder to web page and Change automatically certain period of
time</h3>
<uc1:Image ID="Image1" runat="server" />Output
The output of the above code is look like below image
Source Code
Here I have attached full source code for the same download it and test it.
Client Side : ASP.NET
Code Behind : C#Conclusion
I hope this article is help you to create slide show in simple way retrieve image from folder.
Thanks ..That's what I was looking for