Post
Ask Question

Rotate Ads Without Refreshing the Page Using AdRotator in ASP.NET

Introduction
 
This article explains the concept of the AdRotator control without the user refreshing the page and rotates the ads on a certain time interval. This article also gives a tip to fetch ad information from an XML file. The AdRotator Control presents ad images each time a user enters or refreshes a webpage. When the ads are clicked, it will navigate to a new web location. However the ads are rotated only when the user refreshes the page. In this article, we will explore how you can easily rotate ads at regular intervals, without the user refreshing the page. First of all start Visual Studio .NET And make a new ASP.NET web site using Visual Studio 2010.
 
Now you have to create a web site.
  • Go to Visual Studio 2010
  • New-> Select a website application
  • Click OK

img5.gif

Now add a new page to the website.
  • Go to the Solution Explorer
  • Right-click on the Project name
  • Select add new item
  • Add new web page and give it a name
  • Click OK 

img6.gif

We create an images folder in the application which contains some images to rotate in the AdRotator control. Now add a XML file. To do so, right-click the App_Data folder > Add New Item > 'XML File' > Rename it to adXMLFile.xml and click Add. Put this code in the .XML File. 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <Advertisements>  
  3. <Ad>  
  4. <ImageUrl>~/Images/image1.gif</ImageUrl>  
  5. <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>  
  6. <AlternateText>C-sharpcorner Home Page</AlternateText>  
  7. <Impressions>3</Impressions>  
  8. <Keyword>small</Keyword>  
  9. </Ad>  
  10. <Ad>  
  11. <ImageUrl>~/images/forest_wood.JPG</ImageUrl>  
  12. <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>  
  13. <AlternateText>C-sharpcorner Home Page</AlternateText>  
  14. <Impressions>2</Impressions>  
  15. <Keyword>small</Keyword>  
  16. </Ad>  
  17. <Ad>  
  18. <ImageUrl>~/images/image2.gif</ImageUrl>  
  19. <Width>300</Width>  
  20. <Height>50</Height>  
  21. <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>  
  22. <AlternateText>C-sharpcorner Home Page</AlternateText>  
  23. <Impressions>3</Impressions>  
  24. <Keyword>small</Keyword>  
  25. </Ad>  
  26. </Advertisements>  
XML file elements
 
Here is a list and a description of the <Ad> tag items.
  • ImageUrl - The URL of the image to display.
  • NavigateUrl - The URL where the page will go after AdRotator image is clicked.
  • AlternateText - Text to display if the image is unavailable.
  • Keyword - Category of the ad, which can be used to filter for specific ads.
  • Impressions - Frequency of ad to be displayed. This number is used when you want some ads to be displayed more frequently than others.
  • Height - Height of the ad in pixels.
  • Width - Width of the ad in pixel.
Now drag and drop an AdRotator control from the toolbox to the .aspx and bind it to the advertisement file. To bind the AdRotator to our XML file, we will make use of the "AdvertisementFile" property of the AdRotator control as shown below:
  1. <asp:AdRotator  
  2. id="AdRotator1"  
  3. AdvertisementFile="~/adXMLFile.xml"  
  4. KeywordFilter="small"  
  5. Runat="server" />  
To rotate the ads without refreshing the page, we will add some AJAX code to the page. 
  1. <Triggers>  
  2. <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />  
  3. </Triggers>  
The .aspx code will be as shown below.
 
Now drag and drop an UpdatePanel and add an AdRotator control into it. The DataList code looks like this: 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="adrotator.aspx.cs" Inherits="adrotator" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title></title>  
  6. </head>  
  7. <body>  
  8. <form id="form1" runat="server">  
  9. <div>  
  10. <asp:ScriptManager ID="ScriptManager1" runat="server" />  
  11. <asp:Timer ID="Timer1" Interval="1000" runat="server" />  
  12. <asp:UpdatePanel ID="up1" runat="server">  
  13. <Triggers>  
  14. <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />  
  15. </Triggers>  
  16. <ContentTemplate>  
  17. <asp:AdRotator ID="AdRotator1" AdvertisementFile="~/adXMLFile.xml" KeywordFilter="small"  
  18. runat="server" />  
  19. </ContentTemplate>  
  20. </asp:UpdatePanel>  
  21. </div>  
  22. </form>  
  23. </body>  
  24. </html>  
Now run the application and test it. The AdRotator control rotates the ads without the user refreshing the page and rotates the ads on a certain time interval.
 

image4.gif

Here is a detailed tutorial: 


Similar Articles