Home / Software / Tips and Tricks / How to Rotate Ads without Refreshing the Page using AdRotator and ASP.NET AJAX

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

Updated:  01/22/2010 10:01 AM
Author:  Shiju Mathews

Status:    Resolved.

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. This can be achieved by using update panel and the add rotator control.

Create 'ads.xml’ file:

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:

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.

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:

Place images in 'images' folder, Ads.xml in websites 'App_Data' ollder.

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.

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.