Following
our tutorial of inserting images into the database I will now show you
how to display images in a slide show with the Ajax Toolkit Slide Show
Extender.
The
Slide Show Extender usually works by providing the slideshow with
images on the file system that are placed inside objects called
Slide’s. These Slide objects are then displayed sequentially on the
Slide Show with options to stop, re-play, and choose next and previous
images.
So
if images from the Slide Show Extender can only use file system images,
how can we display images from the database table that are in the form
of image bytes?
The
trick is to use the PreviewImage.aspx (from previous tutorial) as a
replacement in the image path url of the Slide constructor and append
to it the image id. So when the Slide Show starts playing, each slide
that is about to be displayed will in fact:
1. Call this PreviewImage.aspx file
2. The image will be fetched from the database table
3. PreviewImage.aspx renders the image to screen
The
PreviewImage.aspx in essence acts like the physical file image as it
retrieves and writes the image bytes to screen without needing to store
the image on the file system.
Below is the code to get images from the file system and display it in the Slide Show.
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static Slide[] GetSlidesFileSystem()
{
string imageFolder = @"C:\randomimages";
DirectoryInfo directory = new DirectoryInfo(imageFolder);
Slide[] slides = null;
if (directory.Exists)
{
FileInfo[] images = directory.GetFiles("*.jpg");
slides = new Slide[images.Length];
int i = 0;
foreach (FileInfo image in images)
{
string title = image.Name;
string imagePath = image.FullName;
slides[i] = new Slide(imagePath, title, title);
i++;
}
}
return slides;
}
The
full name of the file includes the full path to where the file is
located. So when the slide show is played, we can directly reference
the image from the full file path then display it. When we use images
from the database table, we cannot reference the image from the
database directly. The database image is a series of bytes so it is not
really an image until we convert it to one. If we wanted to take the
same approach as above, we need to read through the database table and
save all the images on to the file system.
In
order to display the images from the database the only thing we need to
add as the image path is the reference to the file PreviewImage.aspx
concatenated with the image id.
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static Slide[] GetSlides()
{
DataTable dt = ImageTransactions.RetrieveAllImagesFromDatabase();
Slide[] slides = null;
if (dt.Rows.Count > 0)
{
slides = new Slide[dt.Rows.Count];
int i = 0;
foreach (DataRow dr in dt.Rows)
{
int id = (int)dr["id"];
string title = (string)dr["title"];
string imagePath = string.Format("PreviewImage.aspx?id={0}", id);
slides[i] = new Slide(imagePath, title, title);
i++;
}
}
return slides;
}
Installing the Ajax Control Toolkit
Download it from http://www.codingdotnet.com/blog/ct.ashx?id=08167750-a3aa-44e0-8a73-1c28f6b3b575&url=http%3a%2f%2fwww.asp.net%2fajax%2fdownloads%2f (for .Net Framework 3.5)
Steps:
1. Extract the Ajax Control Toolkit project
2. Build the project
3. Now the AjaxControlToolkit.dll will be in the bin directory
4. In the project, add a reference to the AjaxControlToolkit.dll file
5. On the Default.aspx page, make a reference to the AjaxControlToolkit
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ToolKit" %>
There you have it, an easy way to display images from a database table using the Ajax Toolkit Slide Show Extender.