Few days ago, while answering a forum thread, there was a question about displaying banners in ASP.NET. Actually Banner word is widely used among Joomla user.
Joomla is a award winning Open Source CMS powering most of the powerful, larger and complex websites.
Joomla has builtin module for showing promotional banners in graphical format. You have to define an image and target URL for that banner.
In ASP.NET framework, we can also display the Advertisements using a control named AdRotator.
AdRotator is one of the standard server side control available with Visual Studio from long time.
In this article I will try to demonstrate the procedure of using AdRotator in ASP.NET with the XML file as Data Source.
- Visual Studio 2005 or higher. We are using Visual Studio 2013 in this article.
- Images used to display at frontend.
- Skill Level: Beginner
We have created a simplest design as possible. Just a Heading and AdRotator control. Here is the structure of Solution Explorer for this project.
We have created a folder named Ads and then again created a folder inside newly created folder to put images wit the relevant name of images.
We also added a XML File which will be our data source for serving ads. Also We have taken some screenshots of website and paste them inside images folder.
Again we have added a New Web Form which will contain the AdRotator control to serve ads.
Now here is the Code of ASPX page for design as image 1 in this article.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>AdRotator Demo - P.Yar.B Complex</title> </head> <body> <form id="form1" runat="server"> <table width="80%" align="center"> <tr> <td align="center"> <h2>AdRotator Demo</h2> </td> </tr> <tr> <td align="center"> <asp:AdRotator BorderWidth="1" ID="MyAds" runat="server" Width="400px" Height="246px" Style="text-align: center" DataSourceID="adsOnWebsite" /> <asp:XmlDataSource ID="adsOnWebsite" runat="server" DataFile="~/Ads/Advertisements.xml"></asp:XmlDataSource> </td> </tr> </table> </body> </html>
In the above code snippet, We have added a AdRotator Control from Controls, set BorderWidth property to 1px so that it can be identified.
Also we have fixed the height and width of control (banner) so in case images are larger, we will not face any kind of alignment problem with content.
As earlier mentioned, AdRotator control is server side control that works from DataSource, so we have taken a XML datasource with link to XML file.
Now lets have a look at our DataSource XML file structure.
<?xml version="1.0" encoding="utf-8" ?> <!-- Advertisement database by John Bhatt. Simple XML Advertisement Format. --> <Advertisements> <Ad> <ImageUrl>~/Ads/images/Dotnetspider.JPG</ImageUrl> <NavigateUrl>http://www.dotnetspider.com</NavigateUrl> <AlternateText>Dotnetspider</AlternateText> <Keyword>Spider, Dotnet, interview, forum, answer, resources, artiles, jobs, institutes</Keyword> <Impression>10</Impression> </Ad> <Ad> <ImageUrl>~/Ads/images/PRsBlog.JPG</ImageUrl> <NavigateUrl>//www.pyarb.com</NavigateUrl> <AlternateText>PR's Blog</AlternateText> <Keyword>Tutorial, Computer, Books, HTML, ASP.NET, CSS, Developer, Design, Website, Blog</Keyword> <Impression>10</Impression> </Ad> <Ad> <ImageUrl>~/Ads/images/Questpond.JPG</ImageUrl> <NavigateUrl>http://www.questpond.com</NavigateUrl> <AlternateText>Questpond</AlternateText> <Keyword>Dotnet, interview, forum, answer, resources, artiles, shivprasad, koirala, trainer, dvd, online school, step by step</Keyword> <Impression>10</Impression> </Ad> </Advertisements>
Lets understand first, An Advertisement Node for AdRotator can have following attributes.
- ImageURL : This is the path to Image. Image can be of any standard format and might be located to local server or remote server.
- NavigateUrl : This is the path where user will be redirected when clicked in Ad.
- AlternateText : Alternate Text is a text that will work same as alt in case of img tag of HTML. This will display the text specified if image is not available for any reason.
- Keyword : Keywords are used to filter ads sometimes.
- Impression : This is the repeat value in simple word. You can define how often that ad will be served. In above case we have set the impression value same for all 3 ads which case each time user reloads page, he will be served different ad. Suppose, if we had set impression value of first ad to 30 and other’s 10, then first will be served three time while others will be served once.
- Height : Height of the Ad to be displayed. This will override the values specified in control.
- Width : Width of the ad to be displayed. This will override the values specified in control.
So we have escaped attributes Height and Width here because we have already defined this in Control.
No more work to do, lets have look at browser. We got below screens each time we reload page, We get different ad. Lets have a look at outputs of above design and code.
Demo : Follow Link
Do not forget to provide feedback on above post. We will be glad to head. You can contribute by sharing our article if this helped in any manner.