.NET datalist / binding images

You have a datalist and you want to display thumbnails in a grid. Let's say we have a function called getPhotos(), that takes these thumbnails:

private void getPhotos()
{
try
{
DataSet ds = new DataSet();
string[] FileArray;
DataTable dlist = new DataTable();
dlist.Columns.Add("filename");
dlist.Columns.Add("picture");
dlist.Columns.Add("navigate");
FileArray = Directory.GetFiles(Server.MapPath("~/photosFolder/" + brandName + "/"));
for (int i = 0; i <>
{
string[] splitted = FileArray[i].Split('.');
if (("." + splitted[1]).Equals(".jpg"))
{
DataRow r = dlist.NewRow();
int index = splitted[0].LastIndexOf('\\');
r[1] = splitted[0].Substring(index+1);
r[0] = "~/photosFolder" + brandName + "/" + r[1] + ".jpg";
r[2] = brandName + "/" + r[1];
dlist.Rows.Add(r);
}
}
dl.DataSource = dlist; //dl is our datalist
dl.DataBind();
}
catch
{
}
}

Here we want to display images of mobile phones. brandName stands for a word like nokia or samsung, which is a directory under phonePhotos directory. Each folder that belongs to a brand has associated mobile phone photos in it. I mean: ~/photosFolder/nokia/2600.jpg is a thumbnail we would want to display.

Well, this is the method we use to get the photos.

In the designer part, we have to add some changes too.




By clicking on the picture you can see the details of the datalist. This is the code for the datalist. It is very important that url's of pictures are correct and we don't miss a whitespace or something like that.

There are three fields here, which are filename, picture and navigate.
Picture field is a label that appears under thumbnails to display model name of the phone.
Navigate field is used to make use of the information when user clicks on a thumbnail.
Just like with a gridview we can use commandname and commandargument properties. We can then write code for that operation in onitemcommand event of the datalist.

Hope it helps!