ASP.NET Adrotator and its Implementation

Anurag Prajesh

4.00/5 (4 votes)

1 Dec 2014CPOL2 min read

18.1K

331

How to add banner and slideshow in your website with adrotator

Download source - 489.7 KB

Introduction

AdRotator provides facility to display ads on websites by selecting banner images from a list randomly.
It uses XML file for displaying ad. XML stands for Extensible Markup Language and is used to store and carry data.
You can learn little bit of XML for better understanding.

It has limited properties:

<Advertisement File>: It clubs all ads.
<Ad>: Groups individual ads.
<ImageUrl>: image URL that will be displayed
<NavigateUrl>: Provide navigation URL for displayed image, if you will click that image, you will redirect that URL.
<Alternate Text>: This text will be available if image is not there.
<Height>: To set the height of the ad.
<Width>: To set the width of the ad.
<Impressions>: How often advertisement will appear.

Solution Approach

Simple and efficient use of AdRotator is in Master Page to show a slide show because Master Page is common for all child pages.

Add an Image folder and paste some images for sliding.

2. Add an XML file as a data source and save as Imagerotator.xml.

XML

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/images/nature-photo4.png</ImageUrl>
    <NavigateUrl>http://www.codeproject.com/script/Membership/View.aspx?mid=8414042</NavigateUrl>
    <AlternateText>Image is currently unavailable</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
  <Ad>
    <ImageUrl>~/images/nature-photo.png</ImageUrl>
    <NavigateUrl>http://www.codeproject.com/script/Membership/View.aspx?mid=8414042</NavigateUrl>
    <AlternateText>Image is currently unavailable</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
  <Ad>
     <ImageUrl>~/images/nature-photo1.png</ImageUrl>
    <NavigateUrl>http://www.codeproject.com/script/Membership/View.aspx?mid=8414042</NavigateUrl>
    <AlternateText>Image is currently unavailable</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
  <Ad>
    <ImageUrl>~/images/nature-photo2.png</ImageUrl>
    <NavigateUrl>http://www.codeproject.com/script/Membership/View.aspx?mid=8414042</NavigateUrl>
    <AlternateText>Image is currently unavailable</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
</Advertisements>

3. Add a master page and save as MasterPage.master, paste below code.

Here, Script Manger is used for partialpostback and Timer is used to refresh page after given interval.
If you will not use Script Manager control, then whole page refreshes after given interval, but you want to refresh Advertisement portion so that you have to use script manager.

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #divAdrotator
        {   height: 300px;
            width: 1000px;
            margin-left: 25%;}
        p
        {text-align: center;}
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server"/>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="divAdrotator">
            <asp:ScriptManager ID="ScriptManager" runat="server">
            </asp:ScriptManager>
            <asp:Timer ID="Timer" runat="server" Interval="5000">
            </asp:Timer>
            <asp:AdRotator ID="AdRotator" runat="server" 
             AdvertisementFile="~/Imagerotator.xml" Height="250px" Width="1000px"/>            
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server"/>
    </div>
    </form>
</body>
</html>

4. Add a new webpage and bind with master page.

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
<p>Welcome to Home page.</p>
</asp:Content>

How to Run Application

Right click your webpage and select set as start page
Now press F5

Points of Interest

Resize your all banner same width height.
Without ScriptManager (Ajax control) whole page will be refreshed, Ajax provides partial postback facility through ScriptManager.
When you bind your page with master page, then page code behind has no HTML Body because it inherits by masterpage, there are two ContentPlaceHolders, one for headerpart (Styles, JavaScript) and second child page content.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)