2K

In ASP.NET, we can also display the Advertisements using AdRotator control. 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 users.

Joomla is an award-winning Open Source CMS powering most of the powerful, larger, and complex websites. Joomla has built-in module for showing promotional banners in graphical format. You have to define an image and target URL for that banner.

AdRotator is one of the standard server-side controls 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.

Requirement:

• 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 with the relevant name of images.

We also added an 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.

Now, we have added a New Web Form which will contain the AdRotator control to serve ads.

Using AdRotator in ASP.NET Web Page

Now here is the Code of ASPX page for design as image 1 in this article.

<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>

In the above code snippet, we are using 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 an XML DataSource with link to XML file.

Using AdRotator: DataSource in XML Format

Now let’s 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 for using AdRotator DataSource. -->
<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>https://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>

Let’s understand first, An Advertisement Node for AdRotator can have following attributes.

1. ImageURL : This is the path to Image. Image can be of any standard format and might be located to local server or remote server.
2. NavigateUrl : This is the path where user will be redirected when clicked in Ad.
3. 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.
4. Keyword: Keywords are used to filter ads sometimes.
5. 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, it will serve 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.
6. Height: Height of the Ad to be displayed. This will override the values specified in control.
7. 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, let’s have look at browser. We got below screens each time we reload page, we get different ad. Let’s have a look at outputs of above design and code.

Live Demo of Ad Serving in ASP.NET using AdRotator control

You can visit the working demo created with exact above code : Follow Link

Source Code:

You can download the source code from Following Link.

Do not forget to provide feedback on above post. We will be glad to head. You could contribute by sharing our article if this helped in any manner.