Monday, December 14, 2009

Bind images from folder to DataList

Please visit my new Web Site

If you are looking for how to bind images from database to DataList or GridView i hope you will get a lot of example for it. But in this article here i will show you "How one can bind images from server folder to a DataList". Its a bit easy in Asp.Net since Asp.Net provides us a really efficient namespace "System.IO". In this post i will first read the folder where images stored then read all file names if file has a valid extension for images then stored into a list. After that i will bind those list into the DataList. Within DataList i will use an Image control and HyperLink control to display images & name respectively. Here you can also filter image file extension like bmp, jpeg, jpg, png, gif whatever you want. In this example i only consider Jpeg, Jpg, Gif format files or images.


Fig: Images within DataList

Complete HTML Markup Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Datalist_Image.aspx.cs" Inherits="Datalist_Image" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >
<head runat="server">
<title>Bind images from Folder to Datalsit</title>


<form id="form1" runat="server">


<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" CellPadding="5">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/Books/{0}") %>' runat="server" />
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Images/Books/{0}") %>' runat="server"/>
<ItemStyle BorderColor="silver" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />





Code behind/Server side code:
using System;
using System.Collections;
using System.IO;

public partial class Datalist_Image : System.Web.UI.Page

protected void Page_Load(object sender, EventArgs e)

if (!IsPostBack)
DirectoryInfo dir = new DirectoryInfo(MapPath("Images/Books"));
FileInfo[] files = dir.GetFiles();
ArrayList list = new ArrayList();
foreach (FileInfo oItem in files)
if (oItem.Extension == ".jpg" oItem.Extension == ".jpeg" oItem.Extension == ".gif")
DataList1.DataSource = list;


Hope now you can bind server side folder images into the DataList as well as can bind folder image list into the GridView.


Anonymous said...

Thanks!! It works :)

roshan said...

thanks u solve my big problem


sss said...

thanks it works:)

Anonymous said...

Thanks..very useful. solved my problem

Anonymous said...

It gives me an error:
DataBinding: 'System.String' does not contain a property with the name 'Name'.

Can you help me?

Anonymous said...

i want to display data and image in the datalist...can any one help me...

please send to this mail id

Anonymous said...

Its good,but i want to do show images in datalist from different folders.

Muhammad Azeem said...

This is a nice article..
Its very easy to understand ..
And this article is using to learn something about it..

c#,, php tutorial

Thanks a lot..!

kozeltof said...

Hello, I can get the code as it appears on this site to work beautifully but I am trying to add one piece.

I am trying to add a folder whose value is passed through the querystring so the ImageUrl would look like

ImageUrl='<%# Bind("Name", "Images/addQueryStringValueHere/{0}

Can you help please.

Anonymous said...

awesome code......

Kshitij Biyani said...

I want to jquery on these images so that they apperar big when user click on these images.

Want to say something?

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash