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: 101560

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" ?>

<Ad>

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

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

<AlternateText>DotNetCurry Home Page</AlternateText>

<Keyword>small</Keyword>

</Ad>

<Ad>

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

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

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

<Keyword>small</Keyword>

</Ad>

<Ad>

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

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

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

<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:

<div>

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

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

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

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

</Triggers>

<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.

<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.

Give me a +1 if you think it was a good article. Thanks!

Recommended Articles

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

Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

User Feedback

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 06, 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 01, 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 01, 2008 4:12 AM

Hei this is really a nice article.
Thanks for the good stuff.

Comment posted by Allen on Sunday, November 02, 2008 8:10 PM

How you can have fade in/out effort on this control?

Comment posted by Ek Gunawan on Sunday, November 02, 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 03, 2008 9:50 AM

useful stuff. Thx

Comment posted by Scott Sinclair on Tuesday, November 04, 2008 4:41 AM

Great article, keep up the good work.

Thanks

Scott

Comment posted by Muhammad Yasar Ikram on Tuesday, November 04, 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 08, 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 09, 2008 4:41 AM

Good........

Comment posted by Suprotim Agarwal on Tuesday, December 09, 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 08, 2009 3:05 PM

How can I get the password to open File????

Comment posted by chint_1000 on Tuesday, June 02, 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 04, 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 06, 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 01, 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 02, 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 06, 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 07, 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 01, 2011 12:11 AM

Simple and useful.

Thanks

Comment posted by Peyman ABDOLKARIMZADEH on Friday, July 01, 2011 12:51 AM

Simple and useful.

Thanks

Comment posted by patel nitin on Friday, August 05, 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 06, 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 06, 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 01, 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 06, 2013 10:11 PM

Thank you...
nice article..

Comment posted by Pandurang Pailvan on Monday, June 10, 2013 12:22 AM

Good article.......

Post your comment

Name:
E-mail:	(Will not be displayed)
Comment:
Insert Cancel

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

Popular Categories

Links

Social Network