Subscribe
Please visit my new Web Site https://coderstechzone.com
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.
OUTPUT:
Fig: Images within DataList
Complete HTML Markup Code:
OUTPUT:
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Bind images from Folder to Datalsit</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" CellPadding="5">
<ItemTemplate>
<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"/>
</ItemTemplate>
<ItemStyle BorderColor="silver" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Bind images from Folder to Datalsit</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" CellPadding="5">
<ItemTemplate>
<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"/>
</ItemTemplate>
<ItemStyle BorderColor="silver" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
</form>
</body>
</html>
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")
list.Add(oItem);
}
DataList1.DataSource = list;
DataList1.DataBind();
}
}
}
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")
list.Add(oItem);
}
DataList1.DataSource = list;
DataList1.DataBind();
}
}
}
Hope now you can bind server side folder images into the DataList as well as can bind folder image list into the GridView.
10 comments:
Thanks!! It works :)
thanks u solve my big problem
thaks
thanks it works:)
Thanks..very useful. solved my problem
It gives me an error:
DataBinding: 'System.String' does not contain a property with the name 'Name'.
Can you help me?
hi,
i want to display data and image in the datalist...can any one help me...
please send to this mail id --prasadraja07@ibibo.com
Its good,but i want to do show images in datalist from different folders.
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.
awesome code......
I want to jquery on these images so that they apperar big when user click on these images.
I WOULD BE DELIGHTED TO HEAR FROM YOU