Thursday, August 6, 2015

Creating Advertisement using Adrotator control in ASP.NET

Step 1:  Add new item - XML file to the web page

Choose the xml file to write below coding for Advertisement
Copy the below code and paste it in the XML file and also include the relevent images which is specified name in your code ( Add existing item -> include appropriate images)


------------------------------------------
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>rose1.jpg</ImageUrl>
    <NavigateUrl>http://www.1800flowers.com</NavigateUrl>
    <AlternateText>
      Order flowers, roses, gifts and more
    </AlternateText>
    <Impressions>10</Impressions>
    <Keyword>flowers</Keyword>
    <Width>1000</Width>
    <Height>150</Height>
  </Ad>

  <Ad>
    <ImageUrl>rose2.jpg</ImageUrl>
    <NavigateUrl>http://www.babybouquets.com.au</NavigateUrl>
    <AlternateText>Order roses and flowers</AlternateText>
    <Impressions>10</Impressions>
    <Keyword>gifts</Keyword>
    <Width>1000</Width>
    <Height>150</Height>
  </Ad>

  <Ad>
    <ImageUrl>rose3.jpg</ImageUrl>
    <NavigateUrl>http://www.flowers2moscow.com</NavigateUrl>
    <AlternateText>Send flowers to Russia</AlternateText>
    <Impressions>10</Impressions>
    <Keyword>russia</Keyword>
    <Width>1000</Width>
    <Height>150</Height>
  </Ad>

  <Ad>
    <ImageUrl>rose4.jpg</ImageUrl>
    <NavigateUrl>http://www.edibleblooms.com</NavigateUrl>
    <AlternateText>Edible Blooms</AlternateText>
    <Impressions>10</Impressions>
    <Keyword>gifts</Keyword>
    <Width>1000</Width>
    <Height>150</Height>
  </Ad>
</Advertisements>
----------------------------------------------------------
These are all the description of  Standard XML tags for creating Advertisements in Webpage.
Element Description
Advertisements Encloses the advertisement file.
Ad Delineates separate ad.
ImageUrl The path of image that will be displayed.
NavigateUrl The link that will be followed when the user clicks the ad.
AlternateText The text that will be displayed instead of the picture if it cannot be displayed.
Keyword Keyword identifying a group of advertisements. This is used for filtering.
Impressions The number indicating how often an advertisement will appear.
Height Height of the image to be displayed.
Width Width of the image to be displayed.
-------------------------------------------------------------------------------------


Added images to the existing application:


Step 2:  In the design / Source view copy the below code or just drag and place the Adrotator control


        <asp:AdRotator ID="AdRotator2" runat="server" AdvertisementFile="~/ADXMLFile.xml" />

here the  AdvertisementFile attribute which specifies the XML file we have created to dentoe the various images with their corresponding attributes.


Step 3:
      
              Then run the page press "F5" . At the initial stage you will be see the singe image for the very first time. then  Refreshing the page you may able to see the random of images according to impression you have given to the particular image.


The above steps can be used to display random Advertisement can be shown when the page is Refreshed. If we want to show the Advertisement Randomly without refreshing the page means should use with Ajax enabled controls like Script manager , Update Panel etc.....

Just copy the below code in source view to see the difference:

  <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
         <asp:Timer ID="Timer1" Interval="1000" runat="server" >
                </asp:Timer>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
             <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
            <ContentTemplate>

                <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/ADXMLFile.xml" />
              
            </ContentTemplate>
        </asp:UpdatePanel>







1 comment:

Unknown said...

The one., which i wanna learn.. :) thanks alot Mam...!!
Very intresting topic.