Post
Ask Question

AdRotator Using ASP.NET

Background

AdRotator is widely used on websites to display banner ads. In this article, let's learn how to use Ad Rotator in ASP.NET.

The following few properties are commonly used in Ad Rotator.

Advertisement File: An XML file that stores all ads and their details. 

AlternateText Field: This property determines which text to be displayed when an Image is not available on AdRotator for technical reasons.

ImageUrl Field: URL of the Image that is to be displayed using the AdRotator.

Keyword Filter: This property filters the advertisement using a specific keyword.

NavigateUrl Field: This is the URL that navigates you to a specific location after clicking the advertisement.

Now let us create the application to demonstrate the use of the AdRotator control.
 
Use the following procedure to create a web site:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010". You can use any later versions of Visual Studio.
  2. "File" - "New" - "Website..." then select "C#" - "Empty Project" (to avoid adding a master page).
  3. Provide the project a name such as "UsingAdRotator" or another as you wish and specify the location.
  4. Then right-click on Solution Explorer then select "Add New Item" - "Default.aspx" page.
  5. Create one folder by right-clicking on Solution Explorer to store Images.
  6. Add XML file by right-clicking on Solution Explorer to store Advertisement details.
  7. Drag and Drop one AdRotator control onto the Default.aspx page. 

Now create a XML file to store the advertisement details that will look as in the following:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <Advertisements>  
  3.   <Ad>  
  4.     <ImageUrl>~/Banners/comp.jpg</ImageUrl>  
  5.     <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>  
  6.     <AlternateText>C# Corner</AlternateText>  
  7.   </Ad>  
  8.   <Ad>  
  9.     <ImageUrl>~/Banners/Csharpcorner.jpg</ImageUrl>  
  10.     <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>  
  11.     <AlternateText>C# Corner Learn Asp.net</AlternateText>  
  12.   </Ad>  
  13.   <Ad>  
  14.     <ImageUrl>~/Banners/Csharpcorner.jpg</ImageUrl>  
  15.     <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>  
  16.     <AlternateText>C# Corner</AlternateText>  
  17.   
  18.   </Ad>  
  19. </Advertisements> 
Our final Solutionr will look as in the following:
 
 
We have used an Ajax Update Panel  with a Timer control to auto refresh the ads without an entire page refresh, so after adding all the required controls our Solution Explorer will look like as follows:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body bgcolor="gray">  
  9.     <form id="form1" runat="server">  
  10.     <h2 style="color: #800080">  
  11.         Our Clients</h2>  
  12.     <div>  
  13.         <asp:ScriptManager ID="ScriptManager1" runat="server" />  
  14.         <asp:Timer ID="Timer1" Interval="2000" runat="server" />  
  15.         <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
  16.             <Triggers>  
  17.                 <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />  
  18.             </Triggers>  
  19.             <ContentTemplate>  
  20.                 <asp:AdRotator Height="150px" Width="600px" ID="AdRotator1" AdvertisementFile="~/App_Code/ClientsXMLFile.xml"  
  21.                     runat="server" />  
  22.             </ContentTemplate>  
  23.         </asp:UpdatePanel>  
  24.     </div>  
  25.     </form>  
  26. </body>  
  27. </html> 
 Now run the application, the output will look like as follows:
 
 
 
Now wait for 2 seconds, then the second banner will be displaed automatically because we used a Timer control and specified a Time Interval of 2000. 
 
 
 
Now if a click on the above banner, it will navigate to C# Corner Home page.
 
  Note
  • Download the Zip file from the attachment for the full source code of the application.
  • We can also provide the ad details file using a Data Source.
Summary

In this article, we learned use of an ASP.NET AdRotator control. Here is a detailed tutorial for more details: Implement Ad Rotator in ASP.NET 
 


Similar Articles