AdRotator Control in Asp.Net  

AdRotator control is available in asp.net to ease the task of rotating the advertisement images in a web form. This control is used to display randomly advertisement images each time a user enters or refreshes the page.

0 678 Technology | Asp.Net
Tue Dec 25 , 2018

The ads information can be stored in an xml file or in a database table. In this article we will discuss about AdRotator using an XML file.

The following are the AdRotator properties that are commonly used.

  • ImageUrl - The URL of the image to display.
  • NavigateUrl - The URL of the file to navigate to when the user is clicked on the ad.
  • AlternateText - The text to be displayed if the image is not loaded.
  • Keyword - This property can be used to filter ads by category.
  • Impressions - This property takes number as a value which indicates how often the ad is displayed with respect to other ads.More the value, more is the frequency of the ad.

Syntax of AdRotator

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="Xmlfile.xml" Target="_blank" />

Example of AdRotator using XML file

Firstly, Add XML file by right-clicking on Solution Explorer and then click on Add New Item which contains the details about each and every ad. XML file must begin and end with an <Advertisement> tag. Inside this tag there may be several <Ad> tags which defines each add. Rename the XML file as Ads.xml.


<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/Images/Google.png</ImageUrl>
    <NavigateUrl>http://google.com</NavigateUrl>
    <AlternateText>Please visit http://www.Google.com</AlternateText>
    <Impressions>10</Impressions>
  </Ad>
  <Ad>
    <ImageUrl>~/Images/ConceitCode.png</ImageUrl>
    <NavigateUrl>https://www.conceitcode.com</NavigateUrl>
    <AlternateText>Please visit http:/www.conceitcode.com</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
  <Ad>
    <ImageUrl>~/Images/Facebook.png</ImageUrl>
    <NavigateUrl>http://Facebook.com</NavigateUrl>
    <AlternateText>Please visit http://www.Facebook.com</AlternateText>
    <Impressions>40</Impressions>
  </Ad>
</Advertisements>


Secondly, Create a folder by right-clicking on Solution Explorer and then click on Add New Folder which contains Images. Then store Images by right-clicking on folder that you create and click on Add Existing Item and add the images to the folder that we create. Rename the folder as "Images" and add the images Google.png, ConceitCode.png, Facebook.png.


Thirdly, Select the AdRotator control in toolbox and drag and drop the control to your web form in Design View.
Set AdvertisementFile="~/Ads.xml".

<asp:AdRotator AdvertisementFile="~/Ads.xml" ID="AdRotatorAds" runat="server" Target="_blank" />


Important Note

If you want to rotate the ads without refreshing the whole page, then use the Ajax Update Panel with Timer control to the page. Drop the AdRotator control in an UpdatePanel and then use a Timer control to refresh the contents at regular intervals. Let's take a look on an example as shown below:


<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManagerAds" runat="server" />
<asp:Timer ID="TimerAds" Interval="2000" runat="server" />
 
    <asp:UpdatePanel ID="upAds" runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="TimerAds" EventName="Tick" />
        </Triggers>
        <ContentTemplate>
           <asp:AdRotator AdvertisementFile="~/Ads.xml" ID="AdRotatorAds" runat="server" Target="_blank"/>
        </ContentTemplate>
    </asp:UpdatePanel>   
</div>
</form>


Now run the application,after every 2000 milli-seconds advertisement will be automatically refreshed one by one because we used the Timer control with Time Interval of 2000.



Subscribe & Get Regular Updates On Your E-mail