Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Web Controls: AdRotator Control - ASP.NET

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Server Technologies - ASP.NET 2.0 and ASP.NET Ajax

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Web Controls: AdRotator Control - ASP.NET

Web pages often contain product or service advertisements, which usually consist of images.

AdRotator Control


Web pages often contain product or service advertisements, which usually consist of images. Although website authors want to include as many sponsors as possible, web pages can display only a limited number of advertisements. To address this problem, ASP.NET provides the AdRotator web control for displaying advertisements. Using advertisement data located in an XML file, an AdRotator randomly selects an image to display and gen-erates a hyperlink to the web page associated with that image. Browsers that do not support images display alternate text that is specified in the XML document. If a user clicks the image or substituted text, the browser loads the web page associated with that image.


Demonstrating the AdRotator Web Control

Figure 25.15 demonstrates the AdRotator web control. In this example, the “advertise-ments” that we rotate are the flags of 10 countries. When a user clicks the displayed flag image, the browser is redirected to a web page containing information about the country that the flag represents. If a user refreshes the browser or requests the page again, one of the 10 flags is again chosen at random and displayed.


The ASPX file in Fig. 25.15 is similar to that in Fig. 25.1. However, instead of XHTML text and a Label, this page contains XHTML text (the h3 element in line 16) and an AdRotator control named countryRotator (lines 18–19). This page also contains an XmlDataSource control (lines 20–22), which supplies the data to the AdRotator con-trol. The background attribute of the page’s body element (line 13) is set to the image background.png, located in the project’s Images folder. To specify this file, click the ellipsis provided next to the Background property of DOCUMENT in the Properties window and use the resulting dialog to select background.png from the Images folder. The images and XML file used in this example are both located in the chapter’s examples directory.


You do not need to add any code to the code-behind file, because the AdRotator con-trol “does all the work.” The output depicts two different requests. Figure 25.15(a) shows


1    <%-- Fig. 25.15: FlagRotator.aspx --%>


2    <%-- A Web Form that displays flags using an AdRotator control. --%>


3    <%@ Page Language="VB" AutoEventWireup="false"


4          CodeFile="FlagRotator.aspx.vb" Inherits="FlagRotator" %>


6    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


7          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


9    <html xmlns="http://www.w3.org/1999/xhtml" >


10   <head runat="server">


11           <title>Flag Rotator</title>


12   </head>


13   <body background="Images/background.png">


14           <form id="form1" runat="server">


15           <div>


16                  <h3>AdRotator Example</h3>

17                  <p>


18                        <asp:AdRotator ID="countryRotator" runat="server"

19                               DataSourceID="adXmlDataSource" />


20                        <asp:XmlDataSource ID="adXmlDataSource" runat="server"

21                               DataFile="~/App_Data/AdRotatorInformation.xml">


22                        </asp:XmlDataSource>

23                  </p>


24           </div>


25           </form>


26   </body>


27   </html>


the first time the page is requested, when the American flag is shown. In the second request, as shown in Fig. 25.15(b), the French flag is displayed. Figure 25.15(c) depicts the web page that loads when the French flag is clicked.


Connecting Data to an AdRotator Control

An AdRotator control accesses an XML file (presented shortly) to determine what adver-tisement (i.e., flag) image, hyperlink URL and alternate text to display and include in the page. To connect the AdRotator control to the XML file, we create an XmlDataSource control—one of several ASP.NET data controls (found in the Data section of the Toolbox) that encapsulate data sources and make such data available for web controls. An XmlData-Source references an XML file containing data that will be used in an ASP.NET applica-tion. Later in the chapter, you will learn more about data-bound web controls, as well as the SqlDataSource control, which retrieves data from a SQL Server database, and the ObjectDataSource control, which encapsulates an object that makes data available.


To build this example, we first add the XML file AdRotatorInformation.xml to the project. Each project created in Visual Web Developer contains an App_Data folder, which is intended to store all the data used by the project. Right click this folder in the Solution


Explorer and select Add Existing Item…, then browse for AdRotatorInformation.xml on your computer. We provide this file in the chapter’s examples directory in the subdirectory named exampleXMLFiles.


After adding the XML file to the project, drag an AdRotator control from the Toolbox to the Web Form. The AdRotator Tasks smart tag menu will open automatically. From this menu, select <New Data Source…> from the Choose Data Source drop-down list to start the Data Source Configuration Wizard. Select XML File as the data-source type. This causes the wizard to create an XmlDataSource with the ID specified in the bottom half of the wizard dialog. We set the ID of the control to adXmlDataSource. Click OK in the Data

Source Configuration Wizard dialog. The Configure Data Source - adXmlDataSource dialog appears next. In this dialog’s Data File section, click Browse… and, in the Select XML File dialog, locate and select the XML file you added to the App_Data folder. Click OK to exit this dialog, then click OK to exit the Configure Data Source - adXmlDataSource dialog. After completing these steps, the AdRotator is configured to use the XML file to deter-mine which advertisements to display.


Examining an XML File Containing Advertisement Information


XML document AdRotatorInformation.xml (Fig. 25.16)—or any XML document used with an AdRotator control—must contain one Advertisements root element (lines 4– 94). Within that element can be several Ad elements (e.g., lines 5–12), each of which pro-vides information about a different advertisement. Element ImageUrl (line 6) specifies the path (location) of the advertisement’s image, and element NavigateUrl (lines 7–9) speci-fies the URL for the web page that loads when a user clicks the advertisement. Note that we reformatted this file for presentation purposes. The actual XML file cannot contain any whitespace before or after the URL in the NavigateUrl element, or the whitespace will be considered part of the URL, and the page will not load properly.


The AlternateText element (line 10) nested in each Ad element contains text that displays in place of the image when the browser cannot locate or render the image for some reason (i.e., the file is missing, or the browser is not capable of displaying it), or to assist the visually impaired. The AlternateText element’s text is also a tooltip that Internet Explorer displays when a user places the mouse pointer over the image (Fig. 25.15). The Impressions element (line 11) specifies how often a particular image appears, relative to the other images. An advertisement that has a higher Impressions value displays more fre-quently than an advertisement with a lower value. In our example, the advertisements dis-play with equal probability, because the value of each Impressions element is set to 1.


1    <?xml version="1.0" encoding="utf-8"?>


2    <!-- Fig. 25.16: AdRotatorInformation.xml -->


3    <!-- XML file containing advertisement information. -->


4    <Advertisements>


5          <Ad>


6                 <ImageUrl>Images/france.png</ImageUrl>


7                 <NavigateUrl>http://www.cia.gov/library/publications/


8                       the-world-factbook/geos/fr.html


9                 </NavigateUrl>


10                <AlternateText>France Information</AlternateText>


11                <Impressions>1</Impressions>


12         </Ad>


14         <Ad>


15                <ImageUrl>Images/germany.png</ImageUrl>


16                <NavigateUrl>http://www.cia.gov/library/publications/


17                      the-world-factbook/geos/gm.html


18                </NavigateUrl>


19                <AlternateText>Germany Information</AlternateText>


20                <Impressions>1</Impressions>


21         </Ad>



23         <Ad>


24                <ImageUrl>Images/italy.png</ImageUrl>


25                <NavigateUrl>http://www.cia.gov/library/publications/


26                      the-world-factbook/geos/it.html


27                </NavigateUrl>


28                <AlternateText>Italy Information</AlternateText>


29                <Impressions>1</Impressions>


30         </Ad>


32         <Ad>


33                <ImageUrl>Images/spain.png</ImageUrl>


34                <NavigateUrl>http://www.cia.gov/library/publications/


35                      the-world-factbook/geos/sp.html


36                </NavigateUrl>


37                <AlternateText>Spain Information</AlternateText>


38                <Impressions>1</Impressions>


39         </Ad>


41         <Ad>


42                <ImageUrl>Images/latvia.png</ImageUrl>


43                <NavigateUrl>http://www.cia.gov/library/publications/


44                      the-world-factbook/geos/lg.html


45                </NavigateUrl>


46                <AlternateText>Latvia Information</AlternateText>


47                <Impressions>1</Impressions>


48         </Ad>


50         <Ad>


51                <ImageUrl>Images/peru.png</ImageUrl>


52                <NavigateUrl>http://www.cia.gov/library/publications/


53                      the-world-factbook/geos/pe.html


54                </NavigateUrl>


55                <AlternateText>Peru Information</AlternateText>


56                <Impressions>1</Impressions>


57         </Ad>


59         <Ad>


60                <ImageUrl>Images/senegal.png</ImageUrl>


61                <NavigateUrl>http://www.cia.gov/library/publications/


62                      the-world-factbook/geos/sg.html


63                </NavigateUrl>


64                <AlternateText>Senegal Information</AlternateText>


65                <Impressions>1</Impressions>


66         </Ad>


68         <Ad>


69                <ImageUrl>Images/sweden.png</ImageUrl>


70                <NavigateUrl>http://www.cia.gov/library/publications/


71                      the-world-factbook/geos/sw.html


72                </NavigateUrl>

73                <AlternateText>Sweden Information</AlternateText>

74                <Impressions>1</Impressions>


75         </Ad>


77         <Ad>


78                <ImageUrl>Images/thailand.png</ImageUrl>


79                <NavigateUrl>http://www.cia.gov/library/publications/


80                      the-world-factbook/geos/th.html


81                </NavigateUrl>


82                <AlternateText>Thailand Information</AlternateText>


83                <Impressions>1</Impressions>


84         </Ad>


86         <Ad>


87                <ImageUrl>Images/unitedstates.png</ImageUrl>


88                <NavigateUrl>http://www.cia.gov/library/publications/


89                      the-world-factbook/geos/us.html


90                </NavigateUrl>


91                <AlternateText>United States Information</AlternateText>


92                <Impressions>1</Impressions>


93         </Ad>




Fig. 25.16 | XML file containing advertisement information used in AdRotator example.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.