Using the AdRotator Control with ASP.NET 4.0

This tutorial will demonstrate how to use the ad rotator control to configure custom advertisements with ASP.NET 4.0.

What is the AdRotator?
The ad rotator is an ASP.NET control built specifically to create custom banner advertisements for a web site. The ad rotator can contain either one or many banner advertisements that it randomly displays one at a time when the page is loaded. The power behind this control is how it is setup. The ad rotator is linked to an XML file that contains all of the data for all of the advertisements, meaning that once the XML file is designed it is highly reusable over many different web pages.

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Using the AdRotator
To demonstrate how to use the ad rotator, we will be creating a simple web site with some temporary advertisements on it. To begin, create a new ASP.NET Empty Web Site and:

1. Right click the project in your solution explorer.
2. Select add new item...
3. Select a web form.
4. Name it 'Default.aspx'.
5. Click add.
6. Open Default.aspx up to design mode.
7. Drag and drop an adrotator onto the web form.

Now that we have created our ad rotator, we need to begin configuring it. First, because this control works with banner advertisements, we will need a few images for each different advertisment we want to create. For this, I will simply be using two temporary images, however you can use whatever images you want as long as you have a valid URL to them via locally or through the internet. I will be using these images locally and adding them to the project, to do this:

1. Right click the project in your solution explorer.
2. Select add existing item...
3. Select the image you want to add.
4. Click add.

Once we have the images we want to add configured, next we need to add in the XML file that we will use to configure our advertisements. To do this:

1. Right click the project in your solution explorer.
2. Select add new item...
3. Select an XML file.
4. Name it 'Ads.xml'.
5. Click add.

I just signed up at Server Intellect and couldn't be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.

Next, we need to add in the advertisments to our XML file. The advertisements can contain any of the following properties:

Property	Description
ImageUrl	The URL to the image for the advertisement.
NavigateUrl	The URL of the page to link to when the advertisement is clicked.
Height	The height of the image in pixels.
Width	The width of the image in pixels.
AlternateText	The text displayed if the image is not found. Also, this appears as the tooltip for certain browsers.
Keyword	Categories for the advertisement that you can filter by.
Impressions	A number to represent importance of the advertisement relative to the other advertisements in the file.

All of these properties are optional, but need to be configured based on the functionality that you want. I have added in the following two advertisements in my XML file using the temporary images I added to the project:

<Advertisements>     <Ad>         <ImageUrl>~/tmpImage.gif</ImageUrl>         <NavigateUrl>http://www.serverintellect.com</NavigateUrl>         <AlternateText>Check it out!</AlternateText>     </Ad>     <Ad>         <ImageUrl>~/tmpImage2.gif</ImageUrl>         <NavigateUrl>http://www.serverintellect.com</NavigateUrl>         <AlternateText>Check it out!</AlternateText>     </Ad> </Advertisements>

Next, we need to link our ad rotator to the XML file that we have added. To do this, simply open up Default.aspx to design mode and configure the AdvertisementFile property of the ad rotator by selecting the 'Ads.xml' file we added earlier.

Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we've found so far.

Testing
Now that we have our ad rotator configured, we can test it out. To do this, load up the web site and refresh the page a few times. Notice that the advertisement displayed is randomly selected for the advertisements we configured in our XML file. To verify that your links are working properly you can go ahead and click the ad rotator to make sure you are redirected to the appropriate web page.