Post
Ask Question

Making Slideshow With Adrotator Control in ASP.Net

Today we will see how to make a slideshow with the adrotator control in two ways.

1. In a simple way
2. Using Ajax UpdatePanel and Timer Control to automatically update adrotator images.

  • First create a new web site
  • Create a XML File with the following contents:
    1. <Advertisements>  
    2.          <Ad>  
    3.              <ImageUrl>../images/1.jpg</ImageUrl>  
    4.              <Width>230</Width>  
    5.              <Height>320</Height>  
    6.              <NavigateUrl>http://www.google.com</NavigateUrl>  
    7.              <AlternateText>First Image</AlternateText>  
    8.              <Impressions>50</Impressions>  
    9.              <Keyword>Banner</Keyword>  
    10.          </Ad>  
    11.           <Ad>  
    12.              <ImageUrl>../images/2.jpg</ImageUrl>  
    13.              <Width>230</Width>  
    14.              <Height>320</Height>  
    15.              <NavigateUrl>http://www.google.com</NavigateUrl>  
    16.              <AlternateText>Second Image</AlternateText>  
    17.              <Impressions>40</Impressions>  
    18.              <Keyword>Banner</Keyword>  
    19.           </Ad>  
    20.           <Ad>  
    21.             <ImageUrl>../images/3.jpg</ImageUrl>  
    22.             <Width>230</Width>  
    23.             <Height>320</Height>  
    24.             <NavigateUrl>http://www.google.com</NavigateUrl>  
    25.             <AlternateText>Third Image</AlternateText>  
    26.             <Impressions>25</Impressions>  
    27.             <Keyword>Banner</Keyword>  
    28.          </Ad>  
    29.          <Ad>  
    30.             <ImageUrl>../images/4.jpg</ImageUrl>  
    31.             <Width>230</Width>  
    32.             <Height>320</Height>  
    33.             <NavigateUrl>http://www.google.com</NavigateUrl>  
    34.             <AlternateText>Fourth Image</AlternateText>  
    35.             <Impressions>60</Impressions>  
    36.             <Keyword>Banner</Keyword>  
    37.          </Ad>  
    38.          <Ad>  
    39.             <ImageUrl>../images/5.jpg</ImageUrl>  
    40.             <Width>230</Width>  
    41.             <Height>320</Height>  
    42.             <NavigateUrl>http://www.google.com</NavigateUrl>  
    43.             <AlternateText>Fifth Image</AlternateText>  
    44.             <Impressions>35</Impressions>  
    45.             <Keyword>Banner</Keyword>  
    46.           </Ad>  
    47.    </Advertisements>  

After that drag an adrotator control and xmldatasource control and bind the xmldatasource to the XML file then bind the XML file bound adrotator control to the xmldatasource so that it can fetch images from the datasource provided.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5.     <title>Adrotar Demo By Honey Chawla.</title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <div>  
  10.         <asp:AdRotator ID="AdRotator1" runat="server" DataSourceID="XmlDataSource1" />  
  11.         <br />  
  12.         <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Ad.xml">  
  13.         </asp:XmlDataSource><br />  
  14.         <asp:HyperLink ID="NavHyperLink1" runat="server" NavigateUrl="~/AjaxAdrotator/AjaxAds.aspx">Click To See Ajax Adrotator Demo</asp:HyperLink>  
  15.     </div>  
  16.     </form>  
  17. </body>  
  18. </html>   

Now run the application. The output will be:

Adrotator-control-1.jpg 

Another Screenshot

Adrotator-control-2.jpg
 
If you want an adrotator to automatically switch images then you should use the following code.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxAds.aspx.cs" Inherits="AjaxAdrotator_AjaxAds" %>  
  2. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head id="Head1" runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  11.     </asp:ToolkitScriptManager>  
  12.     <div>  
  13.     <p>  
  14.     This is a Ajax Based SlideShow using ASP.Net Adrotator Control.  
  15.     </p><br />  
  16.     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">  
  17.     <Triggers>  
  18.     <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />  
  19.     </Triggers>  
  20.     <ContentTemplate>  
  21.     <asp:Timer ID="Timer1" Enabled="true" Interval="2000" runat="server"  
  22.             ontick="Timer1_Tick"></asp:Timer>  
  23.     <asp:AdRotator ID="AdRotator1" runat="server" DataSourceID="XmlDataSource1" />  
  24.         <br />  
  25.         <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Ad.xml">  
  26.         </asp:XmlDataSource>  
  27.         <br />  
  28.         <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>  
  29.     </ContentTemplate>  
  30.     </asp:UpdatePanel>  
  31.     </div>  
  32.     </form>  
  33. </body> 

Code Behind

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     Label1.Visible = false;  
  4. }  
  5. protected void Timer1_Tick(object sender, EventArgs e)  
  6. {  
  7.     Label1.Text = DateTime.Now.ToLongTimeString();  
  8. } 

The output will be:

Adrotator-control-3.jpg

Another screenshot:

Adrotator-control-4.jpg


Similar Articles