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

Posted by: Suprotim Agarwal , on 9/17/2008, in Category ASP.NET AJAX
Views: 207207
Abstract: 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.
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>https://www.dotnetcurry.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>https://www.dotnetcurry.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.
So that was a quick tip on how to rotate ads using the AdRotator at regular intervals without refreshing the page. The source code of the article can be downloaded from here. I hope this article was useful and I thank you for viewing it.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

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!

What Others Are Reading!
Using Script reference Profiler to Improve the Performance of an ASP.NET AJAX page

ASP.NET AJAX SlideShow Extender - Some Common Tips and Tricks

Using the ASP.NET AJAX ModalPopup in an ASP.NET 3.5 Application

Executing ClientScript Before and After an Asynchronous PostBack using ASP.NET AJAX

ASP.NET AJAX CollapsiblePanelExtender - Tips and Tricks

3 Different Ways to Display Progress in an ASP.NET AJAX Application

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
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



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Pradeep Kumar Mishra on Monday, September 22, 2008 2:36 AM
nice and useful article. Thanks for putting this up.
Comment posted by sasi on Monday, October 6, 2008 6:14 AM
Need some that can be understand by the beginerrs
Comment posted by jjohn on Thursday, October 16, 2008 3:51 PM
Good stuff! Thanks.
Comment posted by Vivek Vashisht on Saturday, November 1, 2008 2:05 AM
Nice one. I used the same concept but with timer control inside update panel and without triggers.
Comment posted by Thanigainathan.S on Saturday, November 1, 2008 4:12 AM
Hei this is really a nice article.
Thanks for the good stuff.
Comment posted by Allen on Sunday, November 2, 2008 8:10 PM
How you can have fade in/out effort on this control?
Comment posted by Ek Gunawan on Sunday, November 2, 2008 10:13 PM
Hi there,

Does any one know how to bind this with dataset or not using xml. Using data from .mdb for example.
Comment posted by sukeev on Monday, November 3, 2008 9:50 AM
useful stuff. Thx
Comment posted by Scott Sinclair on Tuesday, November 4, 2008 4:41 AM
Great article, keep up the good work.

Thanks

Scott
Comment posted by Muhammad Yasar Ikram on Tuesday, November 4, 2008 5:31 AM
great article


thanx for sharing a really nice n informative article.
Comment posted by vinit sambhare on Wednesday, November 26, 2008 6:49 AM
Good One !
Also please mention something about master pages too.
Comment posted by apoorv mittal on Monday, December 8, 2008 11:50 PM
hiiiii
please tell me how to move links in a panel from down to up as we can see websites contain the news heading in it.
as i have learned to rotate the images with the help of AJAX Update Panel and XML file and AD Rotater.
I also want to ask what are the other ways to use XML file in an visual studio.
Comment posted by lion.jack on Tuesday, December 9, 2008 4:41 AM
Good........
Comment posted by Suprotim Agarwal on Tuesday, December 9, 2008 8:59 AM
Thanks everyone for your comments!

Vinit: Sure. I will be posting an article soon which will contain similar stuff using Master Pages

Apporv: I am not sure if I understand you, but you could try out the following. Create a key value collection and bind your control with the coll. Keep the keys from say 1 to 5. Just shuffle the keys and rebind the collection and you will get what you want.
Comment posted by Amol on Thursday, January 15, 2009 5:36 AM
But still page is postback so please help how to avoid the auto post abck while using adrotator
Comment posted by Rashmi on Wednesday, April 15, 2009 5:53 AM
simply cool
Comment posted by skaufmann on Friday, May 8, 2009 3:05 PM
How can I get the password to open File????
Comment posted by chint_1000 on Tuesday, June 2, 2009 2:10 AM
i downloaded this article. On compiling i get error of unknown server tag asp:ScriptManager,asp:Timer,asp:UpdatePanel. Pls let me know workaround for this.
Comment posted by Suprotim Agarwal on Thursday, June 4, 2009 3:02 AM
Chint_1000: Is your site ASP.NET AJAX enabled?
Comment posted by harvinder singh syan on Monday, June 15, 2009 3:25 AM
really very effective code it is
Comment posted by Ramani Sandeep on Friday, July 17, 2009 10:13 AM
i hv tried this code in my user control but still my page got refreshed after few seconds.
main problem is on data entry form , when ad changes , all the data filled got erased as page refresh.. i dont knw where is the problem...
Comment posted by kavya on Thursday, October 29, 2009 4:10 AM
how to bind this with database  or not using xml.
Comment posted by Manimaran,V on Tuesday, November 24, 2009 1:29 AM
Really very useful to everyone.. I thank to this author. because i searched many sites but they not given properly so it's difficult to understand. so this Project is given step by step  is very good.. keep it up.
Comment posted by John Black on Thursday, March 25, 2010 12:23 AM
Nice work. keep it up
Comment posted by Kevin McClain on Tuesday, April 6, 2010 2:23 PM
Wicked great example! Thank you very much for such a useful, concise example. :)
Comment posted by SnehaSree on Saturday, April 24, 2010 2:22 PM
This was very useful. I thank to this author.I searched many sites but none of them are not giving properly so it's difficult to understand. But here its given step by step and easy to understand.Thanks a lot.Good work.keep it up
Comment posted by ekta garg on Thursday, May 13, 2010 2:21 AM
this is working bt it still refreshes the whole page...so for me its nt useful...
Comment posted by Sheel Rana on Tuesday, June 29, 2010 7:12 AM
It was really very good.Thanks for such a good article. Keep it up. I would like to join your form. Thanks again.
Comment posted by Rajeev kumar singh on Saturday, July 17, 2010 4:59 PM
i read this code but i m unknown about ajax so please tell me how i can i implement this timer with asp.net .it show asp.net has no timer conrol. so plz tell me which directory we hava to add
Comment posted by ramadevi on Tuesday, July 27, 2010 3:33 AM
This is very nice article it helped me a lot thanks alot and we can add our ad file by programitically also
Comment posted by efbolton on Saturday, January 1, 2011 11:59 PM
article still useful!  thxs!! did u ever add the option of fading &/or prev/next buttons?
Comment posted by efbolton on Sunday, January 2, 2011 3:23 PM
article still useful!  thxs!! did u ever add the option of fading &/or prev/next buttons?
Comment posted by jiya jain on Sunday, March 6, 2011 7:20 AM
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.

This article shows how use jQuery code to rotate ads using the adrotator control, at regular intervals and without refreshing the page.For more detail go through following link

http://www.totaldotnet.com/Article/ShowArticle65_AdRotatorJquery.aspx
Comment posted by sajjad on Thursday, April 7, 2011 6:27 AM
thans....
Very Gooooooooooood Article.
Comment posted by Arun agrawal on Thursday, June 30, 2011 1:57 PM
Thank you sir,
   i am using this technique in our website & it's work....
Comment posted by Peyman ABDOLKARIMZADEH on Friday, July 1, 2011 12:11 AM
Simple and useful.

Thanks
Comment posted by Peyman ABDOLKARIMZADEH on Friday, July 1, 2011 12:51 AM
Simple and useful.

Thanks
Comment posted by patel nitin on Friday, August 5, 2011 1:15 PM
it is very useful me to create roteted images
thanks
Comment posted by shyam Kalaskar on Wednesday, August 17, 2011 2:37 AM
Thanks it is so useful to me..
Comment posted by Bhima Birajdar on Monday, December 12, 2011 11:44 AM
Thank you sir,
  Im using this technique in my BCA project.
Comment posted by Arif Khan on Saturday, December 17, 2011 2:15 AM
hi...

i tried your article but when updatePanel is being refreshed it is throwing an exception please help me to sort it out...
the exception is as follows...

"Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.
Details: Error parsing near 'page loaded first ti'."
Comment posted by bikram anand on Monday, February 27, 2012 5:37 AM
very simple coding but powerful result this  is.net very informative article  helpful in making o level project.....  
Comment posted by sangeetha on Tuesday, March 6, 2012 9:59 AM
iis connect
Comment posted by Shankar Purohit on Saturday, April 21, 2012 11:46 AM
Thanx bro this code help me alot
it helps in my sixth semister project........
Comment posted by Shankar Purohit on Saturday, April 21, 2012 12:07 PM
Thanx bro this code help me alot
it helps in my sixth semister project........
Comment posted by Adriano Sperandio on Thursday, May 24, 2012 7:11 AM
Great!! Thanks alot!.
Comment posted by Nitin on Tuesday, June 12, 2012 8:41 PM
pls tell me solution how to move images from left to right using adrotator or any way in asp.net.
Comment posted by Suresh Akunuru on Friday, July 6, 2012 12:17 AM
I am beginner, was very happy with the step by step instructions you provided i would give a + 2. Many Thanks.
Comment posted by Prashant Kamboj on Monday, July 16, 2012 1:38 AM
Very Very good article for beginners like me.... Thanks
Comment posted by Srinivasa Nadella on Sunday, August 19, 2012 10:56 AM
This is very very nice article. Very simple thought and you applied really nice. Thanks again.
Comment posted by jitesh on Saturday, September 1, 2012 10:58 AM
hey its not working...plzz help...its showing error
Comment posted by Hasina Salim Nadaf on Tuesday, September 11, 2012 11:39 PM
Thanks To You
I'm Faculty in Computer Institute For Dot Net
Your Code is really Helping me in My Lectures
Comment posted by Gaurav on Wednesday, October 17, 2012 4:06 AM
Really a nice solution to timer
Comment posted by mTT on Monday, January 14, 2013 3:35 PM
good job!
Comment posted by intellion on Thursday, March 28, 2013 12:25 PM
awesume article ..well done..its working
Comment posted by Ajay Verma on Saturday, April 6, 2013 10:11 PM
Thank you...
nice article..
Comment posted by Pandurang Pailvan on Monday, June 10, 2013 12:22 AM
Good article.......
Comment posted by Aayush Paliwal on Monday, September 23, 2013 7:29 AM
wow nice
Comment posted by krishna on Wednesday, October 16, 2013 8:29 PM
Hi dud,

Its very useful for me. Really it is good.
Comment posted by Baswell on Tuesday, January 7, 2014 7:42 AM
Great article. How can I get the ads move from left to right
Comment posted by Mathews on Tuesday, April 15, 2014 6:21 AM
good job! Thank you...
Comment posted by Neil on Tuesday, June 24, 2014 2:58 AM
Awesome. Worked first time! Thanks for not only giving the correct method, but also the explanations.
Comment posted by pankaj on Thursday, July 31, 2014 7:51 AM
Hi,
I want to slide two images at a time left to right . is it possible through AdRotator if so how ??
please i need it reply soon..
Thanks!
Comment posted by sanjeev kumar sharma on Monday, October 27, 2014 3:21 AM
this is testing mail
Comment posted by pugal on Thursday, October 30, 2014 8:34 AM
thanks for ur guidance,i got the answer
Comment posted by Nilesh Leuva on Friday, March 20, 2015 9:35 AM
So clean, easy to understand and most important, working fine..Thanks a lot.
Comment posted by Nilesh on Friday, March 20, 2015 10:11 AM
Is there any way you can add Fade effect between slide transition?
Comment posted by Suprotim Agarwal on Friday, March 20, 2015 11:42 PM
@Nilesh It's best to use jQuery here:

$('#someDiv')
        .stop(true, true)
        .animate({
            height:"toggle",
            opacity:"toggle"
        },slideDuration);

Getting started with jQuery - http://www.dotnetcurry.com/ShowArticle.aspx?ID=1089