How to Rotate Ads without Refreshing the Page using AdRotator and ASP.NET AJAX

The AdRotator control in ASP.NET is extremely handy when it comes to randomly displaying advertisements on your site. 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. Follow these steps:

Step 1: Open VS 2008. Click File > New > Website. Choose ASP.NET Website from the list of installed template, choose target platform as .NET Framework 3.5, choose the desired language and enter the location where you would like to store the website on your FileSystem. I have created a folder called VS2008 Projects, so the location over here is C:\VS 2008 Projects\AdRotatorAJAX. After typing the location, click OK.

Step 2: Now you would need to create some banners images to test out the adrotator functionality. I have designed three 270 * 270 banners (dnc.jpg, ssc.jpg and writeforus.jpg)  that has been attached along with the code over here. Let us add them to our project. Right click the project > New Folder > Rename it to ‘images’. Now add the 3 banners images to this project.

Step 3: The AdRotator control can retrieve the list of advertisements from either a XML file or from the database. To keep things simple, I will be using an XML file. So the next step is to create the advertisement file. I prefer to create this file in the App_Data folder as it is secure. To do so, right click the App_Data folder > Add New Item > ‘XML File’ > Rename it to ads.xml and click Add. Now add the following contents to the ‘ads.xml’ file:

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements>

 <Ad>

    <ImageUrl>~/images/dnc.jpg</ImageUrl>  

    <NavigateUrl>http://www.veetech.com</NavigateUrl>

    <AlternateText>DotNetCurry Home Page</AlternateText>

    <Impressions>40</Impressions>

    <Keyword>small</Keyword>

 </Ad>

 <Ad>

    <ImageUrl>~/images/ssc.jpg</ImageUrl>

    <NavigateUrl>http://www.sqlservercurry.com</NavigateUrl>

    <AlternateText>SQL Server Curry Home Page</AlternateText>

    <Impressions>20</Impressions>

    <Keyword>small</Keyword>

 </Ad>

 <Ad>

    <ImageUrl>~/images/writeforus.jpg</ImageUrl>

    <Width>300</Width>

    <Height>50</Height>

    <NavigateUrl>http://www.revive.com/writeforus.aspx</NavigateUrl>

    <AlternateText>dotnetcurry.com Write For Us</AlternateText>

    <Impressions>40</Impressions>

    <Keyword>small</Keyword>

 </Ad> 

</Advertisements>

Step 4: Our next step is to add the AdRotator control and bind it to the advertisement file. Drag and drop an AdRotator control from the toolbox to the Default.aspx. To bind the AdRotator to our XML file, we will make use of the ‘AdvertisementFile’ property of the AdRotator control as shown below:

<asp:AdRotator

    id="AdRotator1"

    AdvertisementFile="~/App_Data/Ads.xml"

    KeywordFilter="small"

    Runat="server" />

Note: The ‘KeywordFilter’ property enables you to filter advertisement using a keyword. If your Advertisement file contains different kinds of ads (banner, leaderboard, skyscraper etc.), you can use this property to filter out different ads on different sections of the page. If you observe, the ads.xml file also contains a property called ‘Keyword’ which binds that ad with the AdRotator that contains the same KeywordFilter, in our case ‘small’.

If you run the sample now, you will have to refresh the page to display a new advertisement. In the last step, let us see how to rotate the ads without refreshing the page.

Step 5: To rotate the ads without refreshing the page, we will add some AJAX code to the page. The trick is to drop the AdRotator in an UpdatePanel and then use a Timer control to refresh the contents at regular intervals. The resultant code will be as shown below:

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Timer ID="Timer1" Interval="2000" runat="server" />

    <asp:UpdatePanel ID="up1" runat="server">

        <Triggers>

            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

        </Triggers>

        <ContentTemplate>

            <asp:AdRotator

            id="AdRotator1"

            AdvertisementFile="~/App_Data/Ads.xml"

            KeywordFilter="small"

            Runat="server" />

        </ContentTemplate>

    </asp:UpdatePanel>   

</div>

</form>

If you observe, we have used Triggers inside an UpdatePanel. Triggers enable the UpdatePanel to refresh its content from a control outside the UpdatePanel. In our case, the Timer control is the control outside the UpdatePanel, which updates the content of the UpdatePanel. The content here is the AdRotator control.

<Triggers>

    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

</Triggers>

The Event captured is the ‘Tick’ event of the Timer control. So every time the Timer control raise a tick event, an async postback occurs and the contents of the UpdatePanel is refreshed and that is how you are able to see the AdRotator control refresh its content at regular intervals.