Reader Level:
ARTICLE

AdRotator Control in AJAX

Posted by Davin Martyn Articles | AJAX December 13, 2011
In this article, I will explore how you can easily rotate ads at regular intervals, without the user refreshing the web page.
  • 0
  • 0
  • 11491

Introduction : AJAX (Asynchronous JavaScript and XML) is a new web development technique used for creating an interactive website. AJAX can help us develop web applications and retrieve a small amount of data from a web server. AJAX consists of different types of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

AdRotator Control : The AdRotator control in ASP.NET is extremely handy when it comes to randomly displaying advertisements on your site. However the ads are rotated only when the user refreshes the page. The AdRotaotr control is used to display a sequence of ad image. This control uses an xml file to store the ad information. The XML file must begin and end with an <Advertisements>tag. Inside the <Advertisements>tag which defines each ad.

AdRotator Control Properties :

  • AlternetTextField
  • ImageUrlField
  • KeyWordFilter
  • Runat
  • Target

Step 1 : Open Visual Studio 2010.

  • Go to File->New->WebSite
  • Select ASP.NET WebSite

ads1.gif

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open

ads2.gif

Step 3 : Now go to the Default.aspx page and drag a control from Toolbox.

  • Drag ScriptManger, UpdatePanel,Timer Control

Add Image for the AdRotator Functionality :

Step 4 : Go to Solution Explorer and right-click

  • Select Add Existing Item

ad3.gif

Step 5 : Now go to Default.aspx page and write the following code.

code :

<title>my ajax application</title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
    </head>
<body>
    <form id="form1" runat="server">
    <div style="background-color: #FF99CC">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer ID="Timer1" Interval="2000" runat="server" ontick="Timer1_Tick" />
    <asp:UpdatePanel ID="up1" runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
        <ContentTemplate>
         <table class="style1">
        <tr>
            <td height="40px" style="background-color: #FF9966" width="100%">
                <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/asd.xml" BackColor = "Aqua" KeywordFilter = "small"/>
            </td>
        </tr>
    </table>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</
html>

Step 6 : The AdRotator control can retrieve the list of advertisements from either a XML file or from the database.To keep things simple,I will be use an XML file.So the next step is to create the advertisement file.

  • Go to Solution Explorer and right-click
  • Select Add->New Item
  • Select XML File
  • Now add the following contents to the 'XML.xml' file

add4.gif

Content :

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <
Ad>
    <
ImageUrl>~/image/Untitled-3.gif</ImageUrl>
    <NavigateUrl>https://www.facebook.com/login.php</NavigateUrl>
    <AlternateText>DotNetCurry Home Page</AlternateText>
    <Impressions>40</Impressions>
    <Keyword>small</Keyword>
  </Ad>
  <
Ad>
    <
ImageUrl>~/image/Untitled-2.gif</ImageUrl>
    <NavigateUrl>http://www.microsoft.com/en-us/default.aspx</NavigateUrl>
    <AlternateText>DotNetCurry Home Page</AlternateText>
    <Impressions>40</Impressions>
    <Keyword>small</Keyword>
  </Ad>
  <
Ad>
    <
ImageUrl>~/image/Untitled-4.gif</ImageUrl>
    <NavigateUrl>http://www.google.co.in/</NavigateUrl>
    <AlternateText>DotNetCurry Home Page</AlternateText>
    <Impressions>40</Impressions>
    <Keyword>small</Keyword>
    <BackGroundColour>Red</BackGroundColour>
  </Ad>
  <
Ad>
    <
ImageUrl>~/image/Untitled-6.gif</ImageUrl>
    <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>
    <AlternateText>DotNetCurry Home Page</AlternateText>
    <Impressions>40</Impressions>
    <Keyword>small</Keyword>
    <BackGroundColour>Blue</BackGroundColour>
  </Ad>
</
Advertisements>

Add the AdRotator control and bind it to the advertisement file.

Step 7 : Drag and drop an AdRotator control from the toolbox to the Default.aspx.To bind the AdRotator to our XML file.

  • Go to Default.aspx page [Design] option
  • Right-click in AdRotator control
  • Select properties option
  • Define Advertisement File property

add6.gif

Note : The 'KeywordFilter' property enables to filter advertisement using a keyword.The Advertisement file contains different kinds of ads (banner, leaderboard, skyscraper etc.), We can use this property to filter the different ads on different sections of the page.The ads.xml file contains a property called 'Keyword' which binds that ad with the AdRotator that contains the same KeywordFilter, in our case 'small'.

Step 8 : Now run the Web application by press F5.

ads10.gif

Step 9 : In the Browser, you will find that, while using AdRotator Control in AJAX allows the images to change without refreshing.

ads9.gif
Step 10 : Every click on the image redirects the user to their respective web pages.

img.gif

COMMENT USING

Trending up