Rotate Ads using jQuery and ASP.NET AdRotator Control
Posted by: Suprotim Agarwal ,
on 9/6/2010,
in
Category jQuery and ASP.NET
Abstract: The ASP.NET AdRotator control is a useful control to randomly display advertisements on a webpage. However the ads in the adrotator control are rotated only when the user refreshes the page. In this article, we will use a single line of jQuery code to rotate ads using the adrotator control, at regular intervals and without refreshing the page.
The ASP.NET AdRotator control is a useful control to randomly display advertisements on a webpage. However the ads in the adrotator control are rotated only when the user refreshes the page. In this article, we will use a single line of jQuery code to rotate ads using the adrotator control, at regular intervals and without refreshing the page.
We will first create a simple adrotator control and then add some jQuery logic to it.
Step 1: Open VS 2008/2010. Click File > New > Website. Choose ASP.NET Website from the list of installed template, choose target platform as .NET Framework 2.0/3.5/4.0, choose the desired language and enter the location where you would like to store the website on your FileSystem (C:\VS 2010 Projects\AdRotatorjQuery. After typing the location, click OK.
Step 2: Now create some banners images to test out the adrotator functionality and drop them in the images folder of your project. I have designed three 200 * 200 png banners (adone, adtwo and adthree). You can find the images in the source code of this article.
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 to take advantage of the security this folder provides. 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/adone.png</ImageUrl>
<NavigateUrl>https://www.dotnetcurry.com</NavigateUrl>
<AlternateText>DotNetCurry Home Page</AlternateText>
<Impressions>30</Impressions>
<Keyword>small</Keyword>
</Ad>
<Ad>
<ImageUrl>~/images/adtwo.png</ImageUrl>
<NavigateUrl>http://www.sqlservercurry.com</NavigateUrl>
<AlternateText>SQLServerCurry Home Page</AlternateText>
<Impressions>30</Impressions>
<Keyword>small</Keyword>
</Ad>
<Ad>
<ImageUrl>~/images/adthree.png</ImageUrl>
<NavigateUrl>http://www.devcurry.com</NavigateUrl>
<AlternateText>DevCurry Home Page</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:
<div class="ads">
<asp:AdRotator
id="adr"
AdvertisementFile="~/App_Data/Ads.xml"
KeywordFilter="small"
Runat="server" />
</div>
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’.
So far, we have a fully functional adrotator control which displays a new ad, when you refresh the page. Let’s see how we can use jQuery to rotate ads without page refresh.
Using jQuery to Rotate ads in the ASP.NET AdRotator without Refreshing the Page
Step 5: Time for some jQuery magic! Add the following jQuery code in the <head> section of the page
<head runat="server">
<title>Rotating ads using ASP.NET AdRotator and jQuery</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
$("#adr").load(location.href + " #adr", "" + Math.random() + "");
}, 4000);
});
</script>
</head>
The jQuery load() function allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
That’s what we are doing in this piece of code. Observe the space before “ #adr” in the load function, which turns it into a jQuery selector.
$("#adr").load(location.href + " #adr", "" + Math.random() + "");
In an ASP.NET Master page, use this piece of code
$('[id$=adr]').load(location.href + " #[id$=adr]", "" + Math.random() + "");
When this method executes, jQuery parses the returned document to find the #adr element and inserts the element with its new content, discarding the rest of the document. That’s how we see a new ad at regular intervals.
Note: We have used Math.random() here so that IE does not treat it as similar requests and cache it. If we do not do this, you will never see a new image loading in IE. Using Firebug, here’s what each request looks like.
Here’s an output of what the page will look like. I have printed the current time in a label control to be sure that the entire page is not being refreshed.
You can see a Live Demo. The example has been tested on the latest browsers including IE8, Firefox 3.6 and Chrome 5.
The entire source code of this article can be downloaded over here
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn