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 asp.net 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>http://www.google.com</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>http://csharpdotnetfreak.blogspot.com
  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>
   6:   
   7:  <asp:Timer ID="Timer1" runat="server" 
   8:             Interval="500">
   9:  </asp:Timer>
  10:   
  11:  <asp:UpdatePanel ID="UpdatePanel1" 
  12:                   runat="server">
  13:  <Triggers>
  14:  <asp:AsyncPostBackTrigger ControlID="Timer1" 
  15:                            EventName="Tick" />
  16:  </Triggers>
  17:   
  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

5 comments:

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...

hi...
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


Find More Articles