Post
Ask Question

How to Display Ads Using AdRotator in ASP.Net

A few days ago, when answering a forum thread, there was a question about displaying banners in ASP.NET. Actually the word Banner is widely used among Joomla users. Joomla is an award-winning Open Source CMS powering most of the powerful, larger and complex websites. Joomla has a built-in module for showing promotional banners in graphical format. You need to define an image and target the URL for that banner.

In the ASP.NET Framework, we can also display advertisements using a control named AdRotator. AdRotator is one of the standard server-side controls available with Visual Studio for a long time. In this article I will try to show the procedure for using AdRotator in ASP.NET with the XML file as a Data Source.

Requirements

  • Visual Studio 2005 or higher. We are using Visual Studio 2013 in this article.
  • Images used to display at frontend.
  • Skill Level: Beginner.


Figure 1 AdRotator

We have created the simplest design possible. Just a Heading and AdRotator control. Here is the structure of the Solution Explorer for this project.


Figure 2 Use AdRotator in ASP.NET

Using AdRotator in ASP.NET – Solution Explorer

We have created a folder named Ads and then again created a folder inside the new folder to put images with the relevant name of images. We also added a XML File that will be our data source for serving ads. We also have taken some screenshots of the website and pasted them inside the images folder. Again we have added a New Web Form that will contain the AdRotator control to serve ads.

Now here is the Code of ASPX page for design as image 1 in this article.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title>AdRotator Demo - P.Yar.B Complex</title>  
  7.     </head>  
  8.     <body>  
  9.         <form id="form1" runat="server">  
  10.             <table width="80%" align="center">  
  11.                 <tr>  
  12.                     <td align="center">  
  13.                         <h2>AdRotator Demo</h2>  
  14.                     </td>  
  15.                 </tr>  
  16.                 <tr>  
  17.                     <td align="center">  
  18.                         <asp:AdRotator BorderWidth="1" ID="MyAds" runat="server" Width="400px" Height="246px" Style="text-align: center" DataSourceID="adsOnWebsite" />  
  19.                         <asp:XmlDataSource ID="adsOnWebsite" runat="server" DataFile="~/Ads/Advertisements.xml"></asp:XmlDataSource>  
  20.                     </td>  
  21.                 </tr>  
  22.             </table>  
  23.         </form>  
  24.     </body>  
  25. </html>
In the preceding code snippet, we have added a AdRotator control from Controls, set the BorderWidth property to 1px so that it can be identified. Also we have fixed the height and width of control (banner) so in case the images are larger, we will not encounter any kind of alignment problem with the content.

As earlier said, the AdRotator control is a server-side control that works from a DataSource, so we have taken a XML datasource with a link to a XML file.

Now let's have a look at our DataSource XML file structure.
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <!-- 
  3. Advertisement database by John Bhatt. Simple XML Advertisement Format. 
  4. -->  
  5. <Advertisements>  
  6.     <Ad>  
  7.         <ImageUrl>~/Ads/images/Dotnetspider.JPG</ImageUrl>  
  8.         <NavigateUrl>http://www.dotnetspider.com</NavigateUrl>  
  9.         <AlternateText>Dotnetspider</AlternateText>  
  10.         <Keyword>Spider, Dotnet, interview, forum, answer, resources, artiles, jobs, institutes</Keyword>  
  11.         <Impression>10</Impression>  
  12.     </Ad>  
  13.     <Ad>  
  14.         <ImageUrl>~/Ads/images/PRsBlog.JPG</ImageUrl>  
  15.         <NavigateUrl>http://www.pyarb.com</NavigateUrl>  
  16.         <AlternateText>PR's Blog</AlternateText>  
  17.         <Keyword>Tutorial, Computer, Books, HTML, ASP.NET, CSS, Developer, Design, Website, Blog</Keyword>  
  18.         <Impression>10</Impression>  
  19.     </Ad>  
  20.     <Ad>  
  21.         <ImageUrl>~/Ads/images/Questpond.JPG</ImageUrl>  
  22.         <NavigateUrl>http://www.questpond.com</NavigateUrl>  
  23.         <AlternateText>Questpond</AlternateText>  
  24.         <Keyword>Dotnet, interview, forum, answer, resources, artiles, shivprasad, koirala, trainer, dvd, online school, step by step</Keyword>  
  25.         <Impression>10</Impression>  
  26.     </Ad>  
  27. </Advertisements>
Now the most important is, what is the preceding XML Node and their content.

Let's understand first that an Advertisement Node for AdRotator can have the following attributes.
  1. ImageURL: This is the path to the Image. The Image can be of any standard format and might be located in the local server or the remote server.
  2. NavigateUrl: This is the path where the user will be redirected to when the ad is clicked.
  3. AlternateText: Alternate Text is a text that will work the same as alt in the case of a HTML img tag. This will display he text specified if the image is not available for any reason.
  4. Keyword: Keywords are used to filter ads sometimes.
  5. Impression: This is the repeat value in simple words. You can define how often that ad will be served. In the preceding case we have set the impression value the same for all 3 ads and each time the user reloads the page, he will be served a different ad. Assume we have set an impression value of the first ad to 30 and the others 10, then the first will be served three time whereas the others will be served once.
  6. Height: Height of the ad to be displayed. This will override the values specified in the control.
  7. Width: Width of the ad to be displayed. This will override the values specified in the control.

So we have the escaped attributes for Height and Width here because we have already defined this in the Control.

There is no more work to do, let's have a look at the browser. We got the following screens; each time we reload page, we get a different ad. Let's have a look at the outputs of the preceding design and code.

Demo: Follow Link

Do not forget to provide feedback on this the preceding article. We will be glad to hear from you. You can contribute by sharing our article if this helped in any manner.


Similar Articles