Post
Ask Question

Change Image In ASP.NET AdRotator Without Refreshing Page.

Step 1. Create a new website project and add a folder with name image and add 3 images in that. These three images will become our banners that we will load and rotate in Ad Rotator.
 
Step 2. Add a XML file with name AdRotatorFiles.xml and add the following code. Make sure images names are the images that you added in Step 1.
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <Advertisements>  
  3. <Ad>  
  4. <ImageUrl>~/images/1.jpg</ImageUrl>  
  5. <NavigateUrl>http://www.varanasiworld.com/</NavigateUrl>  
  6. <AlternateText>ASP.NET Logo</AlternateText>  
  7. <Keyword>A</Keyword>  
  8. <Impressions>Web Site</Impressions>  
  9. <Caption>This is the caption for Ad#1</Caption>  
  10. </Ad>  
  11. <Ad>  
  12. <ImageUrl>~/images/2.jpg</ImageUrl>  
  13. <NavigateUrl>http://www.varanasiworld.com/</NavigateUrl>  
  14. <AlternateText>teesting test</AlternateText>  
  15. <Keyword>S</Keyword>  
  16. <Impressions>Web Site</Impressions>  
  17. <Caption>This is the caption for Ad#2</Caption>  
  18. </Ad>  
  19. <Ad>  
  20. <ImageUrl>~/images/3.jpg</ImageUrl>  
  21. <NavigateUrl>http://www.varanasiworld.com/</NavigateUrl>  
  22. <AlternateText>www.neostream.net</AlternateText>  
  23. <Keyword>S</Keyword>  
  24. <Impressions>Web Site</Impressions>  
  25. <Caption>This is the caption for Ad#3</Caption>  
  26. </Ad>  
  27. </Advertisements>  
Step 3. Add a default.aspx page, add script manager + update panel + a timer control + an AdRotator control in the following order.
  1. <div>  
  2. <asp:ScriptManager ID="ScriptManager1" runat="server" />  
  3. <asp:UpdatePanel ID="up1" runat="server">  
  4. <Triggers>  
  5. <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />  
  6. </Triggers>  
  7. <ContentTemplate>  
  8. <asp:Timer ID="Timer1" Interval="4000" runat="server" />  
  9. <asp:AdRotator ID="AdRotator1" runat="server"  
  10. AdvertisementFile="~/AdRotatorFiles.xml" Height="200px" Target="_top"  
  11. Width="300px" />  
  12. </ContentTemplate>  
  13. </asp:UpdatePanel>  
  14. </div>  
Step 4. Build and run the applicaiton. You will see the images start rotating without refreshing the page. I've attached the code .rar format, download it to see the sample code.
 
Here is a detailed tutorial: Implementing Ad Rotator in ASP.NET 
 
Next Recommended Reading How To Crop Image And Save Image In ASP.NET Using jQuery