Monday, July 18, 2011

How to add Images to the AdRotator Control and how to make this control automatic refreshable ?

Q.) How to add Images to the AdRotator Control and how to  make this control automatic refreshable ?

Answer:-) 
---------------------------------------------------------------------------------------------------------​-------
  • Create Website
  • Create one Image Folder inside Website root
  • Add images to the Folder
Then,
  • Minimize the website & open Notepad, 
Save Notepad with name with extension .xml (eg; adrotator.xml).
  • Open adrotator.xml in Noetpad & write code which mensioned below:
---------------------------------------------------------------------------------------------------------​------
<?xml version="1.0" encoding="utf-8"?>
<Advertisements>
    <Ad>
        <ImageUrl>Image\Chrysanthemum.jpg</ImageUrl>
        <NavigateUrl></NavigateUrl>
        <AlternateText></AlternateText>
        <Keyword>A</Keyword>
        <Impressions>Technology</Impressions>
        <Caption>This is the caption for Ad#1</Caption>
    </Ad>


  <Ad>
        <ImageUrl>Image\Desert.jpg</ImageUrl>
        <NavigateUrl>http://www.sulekha.net</NavigateUrl>
        <AlternateText>www.Sulekha.net</AlternateText>
        <Keyword>B</Keyword>
        <Impressions>Web Site</Impressions>
        <Caption>This is the caption for Ad#2</Caption>
    </Ad>


    <Ad>
        <ImageUrl>Image\Hydrangeas.jpg</ImageUrl>
        <NavigateUrl></NavigateUrl>
        <AlternateText>www.neostream.net</AlternateText>
        <Keyword>C</Keyword>
        <Impressions>Flash Site</Impressions>
        <Caption>This is the caption for Ad#3</Caption>
    </Ad>
</Advertisements>

---------------------------------------------------------------------------------------------------------​--------

  • After writing every code in xml file Save it again. 
  • Then, Maximize the Website & add this xml file to website.
  • Go To Source View of Default.aspx(Page Name) and Write the code which is mensioned below:-
---------------------------------------------------------------------------------------------------------​--------
<body style="height: 966px">
    <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
       <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="2000">
        </asp:Timer>
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
      <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/adrotator.xml " target="_self"

     style="z-index: 1; left: 10px; top: 15px; position: absolute; height:50px ; width:100px " 
            onadcreated="AdRotator1_AdCreated" Height="200px" Width="300px" />
            </ContentTemplate>
       </asp:UpdatePanel>
       <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>

    </asp:UpdatePanel>

    <asp:TextBox ID="TextBox1" runat="server" 
        style="z-index: 1; left: 1062px; top: 152px; position: absolute"></asp:TextBox>
    <asp:TextBox ID="TextBox3" runat="server" 
        style="z-index: 1; left: 1059px; top: 275px; position: absolute"></asp:TextBox>
    </form>
</body>

---------------------------------------------------------------------------------------------------------​--------

  • Copy this source code and paste it on Default.aspx page........In place of Body tag.
  • And go to design vew and double click on Timer Control.
  • Build the website and run

Result:- You will find pictures are changing automatically............

I put the textbox to make it clear only adrotator control is updating.

------------------------------------------------------------------------------------------------

Enjoy the code....................

No comments:

Post a Comment