Click here to Skip to main content
12,350,723 members (24,828 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

3K views
65 downloads
4 bookmarked
Posted

AdRotator with ImageButton control

, 14 Jan 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
ImageButton control can be used as AdRotator with help of UpdatePanel
 

Introduction

This trick shows how you can use ImageButton control as AdRotator without using xml or database integration to rotate the picture of the advertisement.

Background

Using AdRotator control we need to create xml file or database with ImageUrl, NavigateUrl, AlternateText, Impression tags/fields ,instead we can directly use ImageButton control as Adrotator to rotate advertisements and navigate the user to specified page once he/she clicks on ImageButton.

Using the code

  1. Create new website project in visual studio by selecting ASP.NET empty website template. 
  2. Create Images folder in the project and store some images in the folder and rename each one of them as follows
     If we want to display the shopping website image in ImageButton then rename that image as websitename.jpg
     For example-If we want to display image which shows clothings available at filpkart.com then  rename that image as flipkart.jpg
  3. Now Add new webform to the project and name it as Default.aspx and inform tag write the following code
    <asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>   
        <div align="center">
        <asp:UpdatePanel runat="server">
            <ContentTemplate>   
              <asp:ImageButton ID="img" Height="300" Width="350" OnClientClick="return confirm('Are you sure, you want to leave the page?');" OnClick="img_Click" runat="server" />
            </ContentTemplate>
            <Triggers>
              <asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
        </div>
    <asp:Timer ID="timer1" runat="server" OnTick="timer1_tick" Interval="2000"></asp:Timer>
    
    In above source view ImageButton control is enclosed in update panel to avoid full postback of the page. Timer is used to rotate the image after 2 seconds by using AsyncPostback trigger of update panel.
  4. Now in code behind write the following code.
    using System.IO;
     
    public partial class Adrotatorwithimgtag : System.Web.UI.Page
    {
        static List<string> filename=new List<string> ();
        static List<string> url = new List<string>();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                DirectoryInfo info = new DirectoryInfo(Server.MapPath("~/images/"));
                foreach (var item in info.GetFiles())
                {
                    filename.Add(item.Name);
                }
                foreach (var item in info.GetFiles())
                {
                    url.Add(item.Name.Substring(0,item.Name.Length-4));
                }
            }        
        }
     
        protected void timer1_tick(object sender, EventArgs e)
        {   
            Random r = new Random();
            int i = r.Next(0, filename.Count);
            img.ImageUrl = "~/images/" + filename[i];
            ViewState["x"] = "http://www."+url[i]+".com";
            img.ToolTip = "http://www." + url[i] + ".com";
        }
        protected void img_Click(object sender, ImageClickEventArgs e)
        {
            Response.Redirect(ViewState["x"].ToString(),true);
        }
    } 
    • We are using DirectoryInfo class of System.IO namespace so import System.IO namespace. To create object of DirectoryInfo class provide path of the images folder as specified.
    • Using foreach loop and GetFiles() method of DirectoryInfo class we are storing complete name of the image file in filename object and name of the image file without .jpg extension in url object using Name property of DirectoryInfo class.
    • In timer1_tick event we are using Random class to generate random number between 0 and total count of images which are present in images folder and assign that random number to int variable i to access the data which are present in filename and url generics by using index.
  5. Run the project to check output as follows: 

Points of Interest  

Using ajax changing the behavior of ImageButton control and use it as Adrotator control.



License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Vinay Jade
Student NA
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160621.1 | Last Updated 14 Jan 2014
Article Copyright 2014 by Vinay Jade
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid