Saturday, July 20, 2013

Labels: ,

Dynamically rotating Images after a specific time using Adrotator Control and Ajax Controls in asp.net

Posted by Abhay Makadiya at 7/20/2013

Here in this post we will learn how to use adrotator control of asp.net. i have done one simple demo of adrotator control.

Generally Adrotator control is used in CMS it represents Advertisement Images.When we Click  on particular Image ,We are navigated to new web location as per our requirement.
Here in this demo images are Dynamically rotating in adrotator control after a specific time interval,for that i have used "Timer" Control of Ajax Toolkit.

Here is the most important part Adrotator uses an "XML" file to store the ad information. The XML file must start and end with an <Advertisements> tag. Inside the <Advertisements> tag there may be several <Ad> tags which defines each ad.

In our demo XML is a one of method for storing banner image location. Using XML file you can create unlimited Advertisement image and also formatted them.

Here i want to give you brief introduction about <Ad> tag's child element which we are going to use in our demo.


  1. <ImageUrl> The path to the image file(optional).
  2. <NavigateUrl> The URL to new location where you want to track user, if the user clicks the ad.
  3. <AlternateText> An alternate text for the images(optional).
  4. <Keyword> A category for the ad(optional).
  5. <Impressions> The display rates in percent of the hits(optional).

Here is the Screen Shot How it Works:-


Here is my XML file:-


<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/adimages/images1.jpg</ImageUrl>
    <NavigateUrl>http://sharpaspdeveloper.blogspot.in</NavigateUrl>
    <AlternateText>Mads Logic</AlternateText>
    <Keyword>Asp.net</Keyword>
    <Impressions>Technology</Impressions>
    <Caption>This is the caption for Ad#1</Caption>
  </Ad>

<Ad>
  <ImageUrl>~/adimages/images2.jpg</ImageUrl>
  <NavigateUrl>http://www.google.com</NavigateUrl>
  <AlternateText>www.gtu.ac.net</AlternateText>
  <Keyword>Asp.net</Keyword>
  <Impressions>Web Site</Impressions>
  <Caption>This is the caption for Ad#2</Caption>
</Ad>
  <Ad>
    <ImageUrl>~/adimages/images3.jpg</ImageUrl>
    <NavigateUrl>http://sharpaspdeveloper.blogspot.in</NavigateUrl>
    <AlternateText>click here for ad</AlternateText>
    <Keyword>Asp.net</Keyword>
    <Impressions>Web Site</Impressions>
    <Caption>This is the caption for Ad#2</Caption>
  </Ad>
</Advertisements>


Each time when page will be refreshed at the particular time interval the next Advertisement image will be displayed in Adrotator Control. I have also used Update Panel which is another Ajax control. the role of update pane is that it only updates the content which is in between it means that only that part of web page refreshed,not whole page is reloaded.

Note: you can also use adrotator control without using Update Panel an Timer. In this way the imge will be changed when page is reloaded.

I have Used Trigger of "Updatepanel" Control,It will be fired when interval property of timer is completed.By using Adrortated Control we can easily manage our Advertisement on web page.

There no need for code behind so you can use it for any code behind languages ;

Step for Adding XML File & Image into your Project.


  1. Simply We have to Create One Folder “Image” Store Image that you want to display on banner.
  2. After Doing this You Have Right Click On your Project,then Add -> Add New Item-> XML File and do it as i mentioned above and save it.
  3. Now copy below code and you have done.

Source Code in asp.net:-


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Adrotated.aspx.cs" Inherits="WebApplication1._Default" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:Timer ID="Timer1" runat="server" Interval="3000">
            </asp:Timer>
            <center>
                <asp:UpdatePanel runat="server">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                    </Triggers>
                    <ContentTemplate>
                        <asp:AdRotator ID="AdRotator1" runat="server" BorderColor="Azure" Height="100" BorderStyle="Solid"
                            Width="500"
                            AdvertisementFile="~/XMLFile1.xml" KeywordFilter="A" />

                    </ContentTemplate>
                </asp:UpdatePanel>
            </center>


        </div>
    </form>
</body>
</html>



Property Of Adrorated Control :-

  1. ImageUrl:- URL  of particular image Location.& Display Image on the Screen.
  2. NavigateUrl:-Destination Of Particular Web Site URL. & Display Particular Site
  3. AdvertisementFile:- It is a XML file name path.
  4. KeywordFilter:- It Represent limited ad on the control.
  5. AlternateText:- IF Image is Not Display due to some reason then Alternate text will be Display on the Screen.
  6. Height:-It Represent the Height Of Adrorated Control image.
  7. Width:- It Represent The width Of Adrortated Control image.
  8. Runat:- It Represent Server Side Control.
  9. Target:- opened window type:-
         -blank:-Content represent  in new without frame
          -Self:-Content represent  in frames with force.
          -top:- Content represent in full  window without frames.

Note:- AdvertisementFile & Run at are compulsory ,
Remaining are options.

1 comment :

Subscribe to: Post Comments ( Atom )