Asp.Net AdRotator With Timer Rotate Ads Without Refresh

AdRotator Control With Timer Example In Asp.Net Ajax To Rotate Advertisements Ads Without Refreshing The Page.

Asp.Net AdRotator With timer to rotate ads without refreshing the page
AdRotator control is used to display ads on website.

Ads are changed when user reload or refresh the page, but using ajax and timer we can rotate them without refreshing.

Create a new website in visual studio and add a new folder named Ads and place some images in it.

AdRotator control display advertisements from XML file

For this right click in solution explorer > Add New Item > XML File.

Name it advertisement.xml and write following info in it.

   1:  <?xml version="1.0" encoding="utf-8" ?>
   2:  <Advertisements>
   3:    <Ad>
   4:      <ImageUrl>~/Ads/1.jpg</ImageUrl>
   5:      <NavigateUrl></NavigateUrl>
   6:      <AlternateText>AdRotator Control sample ads
   7:      </AlternateText>
   8:      <Impressions>20</Impressions>
   9:      <Keyword>Asp.Net</Keyword>
  10:    </Ad>
  11:    <Ad>
  12:      <ImageUrl>~/Ads/2.jpg</ImageUrl>
  13:      <NavigateUrl>
  14:      </NavigateUrl>
  15:      <AlternateText>AdRotator Control sample ads
  16:      </AlternateText>
  17:      <Impressions>30</Impressions>
  18:      <Keyword>Asp.Net</Keyword>
  19:    </Ad>
  20:   </Advertisements>

Place AdRotator control on the aspx page and configure it as mentioned below.

   1:  <asp:AdRotator ID="AdRotator1" runat="server" 
   2:                 AdvertisementFile="~/App_Data/advertisement.xml"
   3:                 KeywordFilter="Asp.Net">
   4:  </asp:AdRotator>

Set AdvertisementFile property to the XML file we created earlier and set KeywordFilter to keywords on which we want to show ads, these can be channel keywords or banner size keywords but they must match with keywords in XML file.

To change ads on regular interval we need to put AdRotator control in Ajax Update Panel with a timer control in it as mentioned below.

   1:  <form id="form1" runat="server">
   2:  <div>
   3:  <asp:ScriptManager ID="ScriptManager1" 
   4:                     runat="server">
   5:  </asp:ScriptManager>
   7:  <asp:Timer ID="Timer1" runat="server" 
   8:             Interval="500">
   9:  </asp:Timer>
  11:  <asp:UpdatePanel ID="UpdatePanel1" 
  12:                   runat="server">
  13:  <Triggers>
  14:  <asp:AsyncPostBackTrigger ControlID="Timer1" 
  15:                            EventName="Tick" />
  16:  </Triggers>
  18:  <ContentTemplate>
  19:  <asp:AdRotator ID="AdRotator1" runat="server" 
  20:                 AdvertisementFile="~/App_Data/advertisement.xml"
  21:                 KeywordFilter="Asp.Net">
  22:  </asp:AdRotator>
  23:  </ContentTemplate>
  24:  </asp:UpdatePanel>
  25:  </div>
  26:  </form>

Build and run the code.

Download Sample Code

If you like this post than join us or share


prashant said...

Hi Amit,
It's Really nice and working good for me,
but i want to change transitional effect, could possible in it.

amiT jaiN said...

@Prashant: You can use UpdatePanelAnimationExtender of AjaxControlToolkit with updatepanel to show fade or other animation effects

prashant said...

Thanks Amit...

Anonymous said...

this code is not working.
the images are not displaying please help me for this.

amiT jaiN said...

@Above : please check image urls in your XML file or show it to me so that i can find out the error

Kaminepalli Naveen said...

sir please tell how can i include triggers in the source code.there is no tag for that.i shall be thankful to you if u tell

Neha Kochhar said...

hi this code is running in internet explore but not in google chrome
i want to run the code in google chrome also



Anonymous said...

great work :)

Find More Articles