jump to navigation

The AdRotator web server control November 21, 2008

Posted by fofo in asp.net 2.0, C#, Sql Server 2005, VB 2005.
Tags: , ,
trackback

Hello all,

I had some requests to write a post about the Adrotator control and how it can be used to serve up random banners in our web site.I thought that was a good idea and a great excuse to break away from the LINQ stuff…

I will demonstrate the use of this control with an example (C# version).I will use an XML file that will serve as the source for my banners.

The AdRotator control of course was included in the previous versions of Visual Studio and framework version, ASP.Net 2.0 to be exact.

1) Launch Visual Studio

2) Create a new project. More specifically choose C#, and from the templates ASP.Net Web application

3) Give a name to your project

4) From your toolbox just drag and drop an AdRotator Control in the Default.aspx page

5) Click on your project from the Solution explorer and create an Images folder

6) Place your images (i am going to use images of mine) in the folder above

7) Add a new item to your project. It will be an XML file. Name it “banner.xml”. It is a good idea to place it in the App_Data special folder that is already created in your project structure.

8) Copy and paste the following XML code inside the “bannel.xml” file.

<?xml version=”1.0″ encoding=”utf-8″ ?>
<Advertisements xmlns=”http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File”&gt;

<Ad>
<ImageUrl>~/images/ajax-logo.gif</ImageUrl>
<NavigateUrl>http://www.asp.net/ajax/</NavigateUrl&gt;
<AlternateText>ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers</AlternateText>
<Keyword>asp.net ajax</Keyword>
<Impressions>100</Impressions>

</Ad>

<Ad>
<ImageUrl>~/images/asp-logo.png</ImageUrl>
<NavigateUrl>http://www.asp.net</NavigateUrl&gt;
<AlternateText>ASP.NET is a free technology that allows anyone to create a modern web site</AlternateText>
<Keyword>Asp.Net</Keyword>
<Impressions>150</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/NET-logo.png</ImageUrl>
<NavigateUrl>http://www.microsoft.com/NET/</NavigateUrl&gt;
<AlternateText>The .NET Framework is Microsoft’s comprehensive and consistent programming model for building applications </AlternateText>
<Keyword>.NET</Keyword>
<Impressions>250</Impressions>
</Ad>

</Advertisements>

If you want to find more about the attributes of the control and how we include them in the .xml file, have a a look here

Make sure you change the name of the images in the <ImageUrl> attribute to reflect the images you placed in the Images folder in your project.
9) Now select the AdRotaror control and from the properties window in VS select the property called AdvertisementFile .Click on the ellipsis button and navigate until you find the “banners.xml” file.

10) Run your application and hit F5 (refresh) many times from your keyboard to see all the banners specified in the .xml file appearing randomly according to their weight (Impressions attribute).

That is it folks!!! Congrats. you have your dynamic page displaying your feature banners.

If you want to enable some sort of filtering in your ads, you can do so.

If you place a DropDownlist control in your default.aspx page and add as items these names

  • asp.net ajax
  • Asp.Net
  • .NET

Enable AutoPostBack property for this control.By clicking on this control in the Default.aspx.cs,

you will be presented with the event handling routine for the standard event(SelectedIndexChanged).

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
AdRotator1.KeywordFilter = DropDownList1.SelectedItem.Value;
}

We set the property Keywordfilter of the AdRotator control to the value of the selected item from the list, thus selecting only the banners that match the keyword.

Run your application and choose different items from the dropdownlist . In my example there are 3 banners with 3 different keywords so only one banner will be shown every time you choose a different item.

I would like to show you how you can retrieve the ads if we have a Sql Server database as our source file.

1) First we need to create the database . Select the App_Data special folder and add a new item, a Sql Server Database. Call it banners.mdf.We need to create a table and we will call it ads

The definition for this table, for fields and data types could be

Field names Data type

id                    ->      int    -> primary key and identity column

ImageUrl         -> nvarchar(250) -> not null

NavigateUrl     -> nvarchar(250) -> not null

AlternateText  -> nvarchar(250) -> not null

keyword          -> nvarchar(50) -> not null

impressions    -> int -> not null

Populate the table with the following data (for 3 rows)

1st row

ImageUrl = ~/images/asp-logo.png
NavigateUrl=http://www.asp.net
AlternateText=ASP.NET is a free technology that allows anyone to create a modern web site
Keyword=Asp.Net
Impressions=150
2nd row

ImageUrl = ~/images/ajax-logo.gif
NavigateUrl=http://www.asp.net/ajax
AlternateText=ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers
Keyword=asp.net ajax
Impressions=100

3rd row

ImageUrl = ~/images/NET-logo.png
NavigateUrl=http://www.microsoft.com/NET
AlternateText=The .NET Framework is Microsoft’s comprehensive and consistent programming model for building applications
Keyword=.Net
Impressions=250

Now create a new .aspx page and make it the Start page.Name it as you want.

Place a new AdRotator control in the newly created page.

Now we must have a datasource control that points to the database we created and tie this datasource control with the rotator control.

Click on the little arrow in the rotator control and choose New Data Source, choose database from the window and then from the Configure DataSource window, select the banner database and click Next.

Then select the ads table and select all the fields from the table. Test the query and click Finish.

Run your application and see the ads to apper now from the database.

You can email me if you want the source code or leave a comment.

Hope it helps!!!!

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to Ma.gnoliaAdd to TechnoratiAdd to Furl

Advertisements

Comments»

1. venkat - January 29, 2009

please send it used adrotator control in asp dot net.send it sample mini project

thanks
~venkat

2. venkat - January 29, 2009

this description for ad rotator is very use full

thanks
~venkat

3. Mamatha - February 19, 2009

I want to folder name of the image in the imageurl filed of adrotator control in the souce code or code behind.Please its very urgent for m e

fofo - February 19, 2009

please be more specific. i do not understand what you say.

4. ween - February 20, 2009

i did follow these steps. created a folder in App_Data, added image folder and then images in the folder and so on. but when i run my application, i just see a small X sign on the adrotator control. no image is displayed. please help if anyone knows why this is happening.

fofo - February 20, 2009

that is a very easy mistake. that small X sign means that cannot find the image, so just check the path , the name of the folder the images reside. do not create the folder in the App_Data folder. create it in the root folder of your application. not in the App_Data folder.

5. Ween - February 20, 2009

i am still facing the same error, not able to see the pics. i do see the text and can navigate to the url.

fofo - February 20, 2009

try to follow the steps exactly as in my post. obviously you have a mistake in the path so the images cannot be shown

6. Vishal Shah - July 10, 2010

hi,

Adrotator is working fine on local machine. but when i try to host on server as web-server. it it not going to display any images.

I am not getting, what is the problem.

Reply me as soon as possible


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: