Pages

Monday, November 26, 2007

Displaying Random Images in an ASP.NET Web Page

Displaying Random Images can be done using two different approaches.They are:

1.) Randomly Displaying an Image from a Directory of Images:

The easiest way to display a random image is to add an ASP.NET Image control to your page (or Master Page) and to write a little code that gets all of the image files from a particular directory, uses the Random class to randomly pick an image from the list, and assings the randomly selected image's path to the ASP.NET Image control's ImageUrl property.

2.)Displaying Random Images Using the ContentRotator Web Control:

Using the ContentRotator control is easy: just specify what content items are to be considered when choosing the content item to display. The content items can be specified through an XML file, added programmatically to the control, or hard-coded through the control's declarative syntax.
The algorithm used to determine what content item to display uses each content item's impressions attribute.

"The algorithm used to randomly choose a content item works by laying out each applicable content item end-to-end, forming a line. The length of each content item is its impressions value, meaning that the total length of the line is the sum of the applicable content items' impressions. Next, a random number less than the total length is chosen, and the content item to display is the one that lies at the location of the random number."

To complete the implementation of this approach, all we need to do is add the ContentRotator control to the ASP.NET page or Master Page where we want the random image to appear and set its ContentFile property to the path of the XML content file.

Using the ContentRotator control in your application involves the following steps:

1.) Add the skmContentRotator.dll assembly to your application's /Bin directory.

2.) At the top of the ASP.NET page or Master Page where you want to use the ContentRotator control, add the following @Register directive: <%@ Register TagPrefix="skm" Namespace="skmContentRotator" Assembly="skmContentRotator" %>.

3.) Add the ContentRotator control to a page by adding the following markup: .

Alternatively, you can bypass steps 2 and 3 above by adding the ContentRotator control to the Toolbox and then dragging and dropping the control from the Toolbox onto your web page or Master Page.

No comments: