Developing custom AD rotator control with multiple Image Mapping using C#.NET & XML

We are all familiar with AD rotator control ASP.NET provides to show rotating/random ads on every page refresh.

But I found a limitation of this control while I needed to develop functionality where AD banners get changed on every page refresh as well as each banner should have multiple links which navigates to different URLs (multiple image mapping in each AD banners).

As this is not possible with AD rotator, I have developed a custom ASP.NET control which provides all this flexibilities with all AD rotator features.

Basic Concept

To make the control easy to use & understand, we will be keeping the concept of defining Ads same like AD rotator control using XML file.

Control will read the Ad banners from the XML file and render all the details with multiple image mappings in the aspx page.

XML File Structure

First and foremost step is to finalize the XML file structure that is to be used in custom control to render the ads on random bases.

XML file will look as given in the sample file below.

bannes.xml

<?xml version="1.0" encoding="utf-8" ?>
<banbers>
	<banner>
		<ImageUrl>http://xyz.com/banner1.jpg</ImageUrl>
		<AlternateText>Site1 Main</AlternateText>
		<mappings>
			<map>
				<left>0</left>
				<top>0</top>
				<right>50</right>
				<bottom>50</bottom>
				<navigateUrl>google.com</navigateUrl>
			</map>
		</mappings>
	</banner>
	<banner>
		<ImageUrl>banners/5.jpg</ImageUrl>
		<AlternateText>b5</AlternateText>
		<mappings>
			<map>
				<left>10</left>
				<top>10</top>
				<right>10</right>
				<bottom>10</bottom>
				<navigateUrl>google.com</navigateUrl>
			</map>
			<map>
				<left>25</left>
				<top>25</top>
				<right>25</right>
				<bottom>25</bottom>
				<navigateUrl>google.com</navigateUrl>
			</map>
			<map>
				<left>10</left>
				<top>10</top>
				<right>10</right>
				<bottom>10</bottom>
				<navigateUrl>google.com</navigateUrl>
			</map>
			<map>
				<left>25</left>
				<top>25</top>
				<right>25</right>
				<bottom>25</bottom>
				<navigateUrl>google.com</navigateUrl>
			</map>
			<map>
				<left>10</left>
				<top>10</top>
				<right>10</right>
				<bottom>10</bottom>
				<navigateUrl>google.com</navigateUrl>
			</map>
			<map>
				<left>25</left>
				<top>25</top>
				<right>25</right>
				<bottom>25</bottom>
				<navigateUrl>google.com</navigateUrl>
			</map>
		</mappings>
	</banner>
</banbers> 

Inside main banners TAG there will be multiple banners TAG to be added for each AD banner,

Each banner TAG will have child nodes(attributes) as listed below:

1. Image URL – AD image URL to be specified here
2. Alternate text – alt attribute for image
3. Mappings - list of all mappings with relative left-right-top-Bottom attributes
   1. Left – left side relative axis
   2. Right – right side relative axis
   3. Top– Top relative axis
   4. Bottom– Bottom relative axis
   5. Navigate URL – URL to navigate

Developing Custom Control

Now the next step is to build a custom ASP.NET control which will read the above XML structure and renders the data accordingly on ASPX page.

C# Code File will be as Given Below

ad-banners.cs

This control will have 1 public property where the XML file path will be given called:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
namespace InfoquestLibrary.Controls
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:banner runat="server" />")]
    public class banner : System.Web.UI.WebControls.WebControl
    {

        string _strImageURL, _strXMLpath;

        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]

        public string ImageURL
        {
            get { return _strImageURL; }
            set { _strImageURL = value; }
        }
        public string XMLpath
        {
            get { return _strXMLpath; }
            set { _strXMLpath = value; }
        }

        public override void RenderBeginTag(HtmlTextWriter writer)
        {
            //base.RenderBeginTag(writer.WriteBeginTag("a"));           
            //System.Globalization.CultureInfo obj = 
			new System.Globalization.CultureInfo("");
            //obj.DateTimeFormat.FullDateTimePattern = "dd=MM=yyyy";
            //string xStr = "12=12=1985";
            //DateTime dt = new DateTime();
            //System.Globalization.DateTimeFormatInfo o = 
			new System.Globalization.DateTimeFormatInfo();            
            //dt = DateTime.Parse(xStr, obj.DateTimeFormat);
            //string str = dt.ToString();
            //writer.Write(xStr);
            //writer.Write(str);
        }

        public override void RenderEndTag(HtmlTextWriter writer)
        {
            //base.RenderEndTag(writer.WriteEndTag("a"));
            //writer.WriteEndTag("a");
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            XmlDocument xDoc = new XmlDocument();
            XmlNode xRandomNode;
            bool useMapping = true;
            int xIntRandomNumber;
            Random r = new Random();            
            xDoc.Load(System.Web.HttpContext.Current.Server.MapPath(this.XMLpath));

            xIntRandomNumber = r.Next(xDoc.ChildNodes[1].ChildNodes.Count);

            xRandomNode = xDoc.ChildNodes[1].ChildNodes[xIntRandomNumber];

            if (xRandomNode.ChildNodes[2].Equals(null))
            {
                useMapping = false;
            }
            else
            {
                if (xRandomNode.ChildNodes[2].ChildNodes.Count == 0)
                    useMapping = false;
            }

            if (xRandomNode.HasChildNodes)
            {
                this.ImageURL = xRandomNode.ChildNodes[0].InnerText;
            }

            output.AddAttribute(HtmlTextWriterAttribute.Src, this.ImageURL);
            if (useMapping)
            {
                output.AddAttribute(HtmlTextWriterAttribute.Usemap, "#map" + this.ID);
            }
            output.AddAttribute(HtmlTextWriterAttribute.Border, "none");
            this.AddAttributesToRender(output);
            output.RenderBeginTag(HtmlTextWriterTag.Img);

            if (useMapping)
            {
                int xIntMaps, xIntCounter;
                xIntMaps = xRandomNode.ChildNodes[2].ChildNodes.Count;

                output.AddAttribute(HtmlTextWriterAttribute.Name, "map" + this.ID);
                output.AddAttribute(HtmlTextWriterAttribute.Id, "map" + this.ID);
                this.AddAttributesToRender(output);
                output.RenderBeginTag(HtmlTextWriterTag.Map);

                for (xIntCounter = 0; xIntCounter < xIntMaps; xIntCounter++)
                {
                    XmlNode xMap = xRandomNode.ChildNodes[2].ChildNodes[xIntCounter];
                    if (xMap.HasChildNodes)
                    {
                        output.AddAttribute(HtmlTextWriterAttribute.Shape, "rect");
                        output.AddAttribute(HtmlTextWriterAttribute.Coords, 
			xMap.ChildNodes[0].InnerText + "," + 
			xMap.ChildNodes[1].InnerText + "," + 
			xMap.ChildNodes[2].InnerText + "," + 
			xMap.ChildNodes[3].InnerText);
                        output.AddAttribute(HtmlTextWriterAttribute.Href, 
			xMap.ChildNodes[4].InnerText);
                        output.AddAttribute(HtmlTextWriterAttribute.Title, "");
                        output.AddAttribute(HtmlTextWriterAttribute.Alt, "");
                        output.RenderBeginTag(HtmlTextWriterTag.Area);
                        output.RenderEndTag();
                    }
                }

                output.RenderEndTag();
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            //base.OnPreRender(e);
            //Page.ClientScript.RegisterStartupScript(typeof(Page), 
					"asd", "alert('mm');", true);            
            //Page.ClientScript.RegisterClientScriptResource(typeof(Page), "myScript");
        }
    }
}

Using Customer Control in ASPX Page

Now we are done with developing customer control with all the required functionality.

And control is now ready for use.

Registering Custom Control

<%@ Register Assembly="code_center_library" TagPrefix="TCC" Namespace="TCC.Controls" %>

Defining Custom control in ASPX Page

<TCC:banner ID="ads" runat=""server"" XMLpath="~/banner-mapping/bannes.xml" /> 

CodeProject