Tuesday 28 May 2013

Asp.Net AdRotator With Timer Rotate Ads Without Refresh

Asp.Net AdRotator With Timer Rotate Ads Without Refresh


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

No comments:

Post a Comment