New Document
ASP.NET Ad Rotator

The AdRotator control randomly selects banner graphics from a list, which is specified in an external XML schedule file. This external XML schedule file is called the advertisement file.

The AdRotator control allows you to specify the advertisement file and the type of window that the link should follow in AdvertisementFile and Target property respectively.

.NET is the new distributed computing platform developed by Microsoft and ASP.NET is its programming model for web development. Advertisements on Web pages typically take the form of ad banners -.gif files or similar images - that when clicked redirect the user to the advertisers' Web pages. In order to generate ads on your Web page you will need the image files and accompanying URLs. The intent of this article is to get a good experience in developing using the AdRotator web server control for beginners. This application will teach you how to develop a website with an ad management system. This uses XML to change ads in the web page.

The basic syntax of adding an AdRotator is as follows:

<asp:AdRotator  runat = "server" 
                AdvertisementFile = "adfile.xml"  
                Target = "_blank" />

Before going into details of the AdRotator control and its properties, let us look into the construction of the advertisement file.


The AdRotator web server control cycles through a series of clickable ad banners, and allows some ads to be weighted more heavily than others. Ads can either be linked to the control using an XML file with a predefined schema or by creating your own custom logic. Use the AdRotator control to retrieve and display ads with one of two methods:

Create an XML file containing references to ad banners and their associated properties.

Write your own logic to select an ad banner in the AdCreated event.

XML

One method of storing ad banner image locations, URLs for redirection, and associated properties is to put the detailed information in an XML file. By using the XML file format, you can create and maintain a list of advertisements without having to change the other code inside your application when a change is made to an advertisement. The XML file can be created using the Ad Rotator Schedule File template in the XML designer or manually by the developer.

Controls used in this application

Collapse | Copy Code

protected System.Web.UI.WebControls.AdRotator AdRotator;
protected System.Web.UI.WebControls.PlaceHolder PlaceHolder1;
Namespaces used in this application:

Collapse | Copy Code

using System.Web.UI.WebControls;
using System.Drawing;
using System.Web.UI.HtmlControls;

In the XML file, we can filter the ads by the keywords we declared for each ad. First you add the AdRotator control to a page, and then link it to the ads you wish to display. Link ads to the control either by using a separate XML file containing the ad information or by linking the ads to the control within an event handler at run time.

Adding the AdRotator web server control to your web application: first, select the AdRotator and drag and drop the control to your web form. Map the XML file which contains the details about each and every ad.


// XML CODE THAT AS THE DETAILS ABOUT THE ADS
< Advertisements>
    < Ad>
        < ImageUrl>D:\Viv_B-Practice\AdRotator_VT\www.asp.net.gif< /ImageUrl>
        < NavigateUrl>http://www.asp.net< /NavigateUrl>
        < AlternateText>ASP.NET Logo< /AlternateText>
        < Keyword>A< /Keyword>
        < Impressions>Technology< /Impressions>
        < Caption>This is the caption for Ad#1< /Caption> 
    < /Ad>

    < Ad>
        < ImageUrl>D:\Viv_B-Practice\AdRotator_VT\www.sulekha.com.gif< /ImageUrl>
        < NavigateUrl>http://www.sulekha.net< /NavigateUrl>
        < AlternateText>www.Sulekha.net< /AlternateText>
        < Keyword>S< /Keyword>
        < Impressions>Web Site< /Impressions>
        < Caption>This is the caption for Ad#2< /Caption> 
    < /Ad>

    < Ad>
        < ImageUrl>D:\Viv_B-Practice\AdRotator_VT\FlashFile.swf< /ImageUrl>
        < NavigateUrl>AdRotator.aspx?ad=Widgets
               &target=http://msdn.microsoft.com/widgets/< /NavigateUrl>
        < AlternateText>www.neostream.net< /AlternateText>
        < Keyword>S< /Keyword>
        < Impressions>Flash Site< /Impressions>
        < Caption>This is the caption for Ad#2< /Caption> 
    < /Ad>
< /Advertisements>

The above shown is the XML code. The above XML template contains the details about each ad that is going to be placed in the web application. You can create an ad list for the AdRotator control in the XML designer using the Ad Rotator Schedule File as the target schema.

The Advertisement File:

The advertisement file is an XML file, which contains the information about the advertisements to be displayed.

Extensible Markup Language (XML) is a W3C standard for text document markup. It is a text-based markup language that enables you to store data in a structured format by using meaningful tags. The term 'extensible' implies that you can extend you ability to describe a document by defining meaningful tags for your application.

XML is not a language in itself, like HTML but, a set of rules for creating new markup languages. It is a meta-markup language. It allows developers to create custom tag sets for special uses. It structures, stores and transport information.

Following is an example of XML file:

<BOOK>
<NAME> Learn XML </NAME>
<AUTHOR> Samuel Peterson </AUTHOR>
<PUBLISHER> NSS Publications </PUBLISHER>
<PRICE> $30.00</PRICE>
</BOOK>

Like all XML files, the advertisement file needs to be a structured text file with well-defined tags delineating the data. There are the following standard XML elements that are commonly used in the advertisement file:

ElementDescription
AdvertisementsEncloses the advertisement file
AdDelineates separate ad
ImageUrlThe image that will be displayed
NavigateUrlThe link that will be followed when the user clicks the ad
AlternateTextThe text that will be displayed instead of the picture if it cannot be displayed
KeywordKeyword identifying a group of advertisements. This is used for filtering
ImpressionsThe number indicating how often an advertisement will appear
HeightHeight of the image to be displayed
WidthWidth of the image to be displayed

Apart from these tags, customs tags with custom attributes could also be included. The following code illustrates an advertisement file ads.xml:

<Advertisements>
<Ad>
<ImageUrl>rose1.jpg</ImageUrl>
<NavigateUrl>http://www.1800flowers.com</NavigateUrl>
<AlternateText>
   Order flowers, roses, gifts and more
</AlternateText>
<Impressions>20</Impressions>
<Keyword>flowers</Keyword>
</Ad>

<Ad>
<ImageUrl>rose2.jpg</ImageUrl>
<NavigateUrl>http://www.babybouquets.com.au</NavigateUrl>
<AlternateText>Order roses and flowers</AlternateText>
<Impressions>20</Impressions>
<Keyword>gifts</Keyword>
</Ad>

<Ad>
<ImageUrl>rose3.jpg</ImageUrl>
<NavigateUrl>http://www.flowers2moscow.com</NavigateUrl>
<AlternateText>Send flowers to Russia</AlternateText>
<Impressions>20</Impressions>
<Keyword>russia</Keyword>
</Ad>

<Ad>
<ImageUrl>rose4.jpg</ImageUrl>
<NavigateUrl>http://www.edibleblooms.com</NavigateUrl>
<AlternateText>Edible Blooms</AlternateText>
<Impressions>20</Impressions>
<Keyword>gifts</Keyword>
</Ad>
</Advertisements>
Properties and events of the AdRotator Class:

The AdRotator class is derived from the WebControl class and inherits its properties. Apart from those the AdRotator class has the following properties:

PropertiesDescription
AdvertisementFileThe path to the advertisement file.
AlternateTextFeildThe element name of the field where alternate text is provided; default value is AlternateText.
DataMemberThe name of the specific list of data to be bound when advertisement file is not used.
DataSourceControl from where it would retrieve data.
DataSourceIDId of the control from where it would retrieve data.
FontSpecifies the font properties associated with the advertisement banner control.
ImageUrlFieldThe element name of the field where the URL for the image is provided; default value is ImageUrl.
KeywordFilterFor displaying the keyword based ads only.
NavigateUrlFieldThe element name of the field where the URL to navigate to is provided; default value is NavigateUrl.
TargetThe browser window or frame that displays the content of the page linked.
UniqueIDObtains the unique, hierarchically qualified identifier for the AdRotator control.

Following are the important events of the AdRotator Class:

EventsDescription
AdCreated It is raised once per round trip to the server after creation of the control, but before the page is rendered
DataBindingOccurs when the server control binds to a data source.
DataBoundOccurs after the server control binds to a data source.
DisposedOccurs when a server control is released from memory, which is the last stage of the server control lifecycle when an ASP.NET page is requested
InitOccurs when the server control is initialized, which is the first step in its lifecycle.
LoadOccurs when the server control is loaded into the Page object.
PreRenderOccurs after the Control object is loaded but prior to rendering.
UnloadOccurs when the server control is unloaded from memory.
Working with the AdRotator Control

Create a new web page and place an AdRotator control on it.

<form id="form1" runat="server">
<div>
   <asp:AdRotator ID="AdRotator1" 
                runat="server" AdvertisementFile ="~/ads.xml"
                onadcreated="AdRotator1_AdCreated" />
  
</div>
</form>

The ads.xml file and the image files should be located in the root directory of the web site.

Try to run the above application an dobserve that each time the page is reloaded, the ad is changed.



Previous                                                                                                                                                       Next

Back to Top