Article
ASP.NET 2.0: A Getting Started Guide
AdRotator
The AdRotator control allows you to display a list of banner advertisements within your web application at random. However, it's more than a mere substitute for creating a randomization script from scratch. Since the AdRotator control gets its content from an XML file, the administration and updating of banner advertisement files and their properties is a snap. Also, the XML file allows you to control the banner's image, link, link target, and frequency of appearance in relation to other banner ads.
The benefits of using this control don't stop there, though. As most of the AdRotator control's properties reside within an XML file, if you wished, you could share that XML file on the Web, essentially allowing value added resellers (VARS), or possibly your companies' partners, to use your banner advertisements on their web sites.
XML Basics
In essence, XML is simply a text-based format for the transfer or storage of data; it contains no details on how that data should be presented. XML is very easy to start with because of its close resemblance to your old friend HTML: both are largely comprised of tags inside angle brackets (< and >), and any tag may contain attributes specific to that tag. The biggest difference between XML and HTML is that, rather than providing a fixed set of tags as HTML does, XML allows us to create our own tags to describe the data we wish to represent.
Take a look at the following HTML element:
<p>Star Wars Episode I: The Phantom Menace</p>
This example describes the content between the tags as a paragraph. This is fine if all we are concerned with is displaying the words "Star Wars Episode I: The Phantom Menace" on a web page. But what if we want to access those words as data?
Like HTML, XML's purpose is to describe the content of a document. But unlike HTML, XML doesn't describe how that content should be displayed; it describes what the content is. Using XML, the web author can mark up the contents of a document, describing that content in terms of its relevance as data.
We can use XML to mark up the words "Star Wars Episode I: The Phantom Menace" in a way that better reflects this content's significance as data:
<film>
<title>Star Wars Episode I: The Phantom Menace</title>
</film>
Here, the XML tag names we've chosen best describe the contents of the element. We also define our own attribute names as necessary. For instance, in the example above, you may decide that you want to differentiate between the VHS version and the DVD version of the film, or record the name of the movie's director. This can be achieved by adding attributes and elements, as shown below:
<film format="DVD">
<title>Star Wars Episode I: The Phantom Menace</title>
<director>George Lucas</director>
</film>
If you want to test this out, create a file called ads.xml in your Learning folder, and insert the content presented below. Feel free to create your own banners, or to use those provided in the code archive for this book.
Example 4.8. Ads.xml (excerpt)
<Advertisements>
<Ad>
<ImageUrl>workatdorknozzle.gif</ImageUrl>
<NavigateUrl>http://www.dorknozzle.com</NavigateUrl>
<TargetUrl>_blank</TargetUrl>
<AlternateText>Work at Dorknozzle.com!</AlternateText>
<Keyword>HR Sites</Keyword>
<Impressions>2</Impressions>
</Ad>
<Ad>
<ImageUrl>getthenewsletter.gif</ImageUrl>
<NavigateUrl>http://www.dorknozzle.com</NavigateUrl>
<TargetUrl>_blank</TargetUrl>
<AlternateText>Get the Nozzle Newsletter!</AlternateText>
<Keyword>Marketing Sites</Keyword>
<Impressions>1</Impressions>
</Ad>
</Advertisements>
As you can see, the Advertisements element is the root node, and in accordance with the XML specification, it appears only once. For each individual advertisement, we simply add an Ad child element. For instance, the above advertisement file contains details for two banner advertisements.
As you've probably noticed by now, the .xml file enables you to specify properties for each banner advertisement by inserting appropriate elements inside each of the Ad elements. These elements include:
ImageURL- the URL of the image to display for the banner adNavigateURL- the web page to which your users will navigate when they click the banner adAlternateText- the alternative text to display for browsers that do not support imagesKeyword- the keyword to use to categorize your banner ad. If you use theKeywordFilterproperty of theAdRotatorcontrol, you can specify the categories of banner ads to display.Impressions- the relative frequency that a particular banner ad should be shown in relation to other banner advertisements. The higher this number, the more frequently that specific banner will display in the browser. The number provided for this element can be as low as one, but cannot exceed 2,048,000,000; if it does, the page throws an exception.
Except for ImageURL, all these elements are optional. Also, if you specify an Ad without a NavigateURL, the banner ad will display without a hyperlink.
To make use of this Ads.xml file, create a new ASP.NET page, called AdRotator.aspx, with the following code:
Example 4.9. AdRotator.aspx (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AdRotator Control</title>
</head>
<body>
<form runat="server">
<asp:AdRotator ID="adRotator" runat="server"
AdvertisementFile="Ads.xml" />
</form>
</body>
</html>
You'll need to download workatdorknozzle.gif and getthenewsletter.gif and place them in the Learning folder in order to see these ad images. Save your work and test it in the browser; the display should look something like Figure 4.6.
Figure 4.6. Displaying ads using AdRotator.aspx
Refresh the page a few times, and you'll notice that the first banner appears more often than the second. This occurs because the Impression value for the first Ad is double the value set for the second banner, so it will appear twice as often.
TreeView
The TreeView control is a very powerful control that's capable of displaying a complex hierarchical structure of items. Typically we'd use it to view a directory structure or a site navigation hierarchy, but it could be used to display a family tree, a corporate organizational structure, or any other hierarchical structure.
The TreeView can pull its data from various sources. You'll learn more about the various kinds of data sources later in the book; here, we'll focus on the SiteMapDataSource class, which, as its name suggests, contains a hierarchical sitemap. By default, this sitemap is read from a file called Web.sitemap located in the root of your project. The Web.sitemap file is an XML file that looks like this:
Example 4.10. Web.sitemap
<siteMap
xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode title="Home" url="~/Default.aspx"
description="Home">
<siteMapNode title="TreeViewDemo" url="~/TreeViewDemo.aspx"
description="TreeView Example" />
<siteMapNode title="ClickEvent" url="~/ClickEvent.aspx"
description="ClickEvent Example" />
<siteMapNode title="Loops" url="~/Loops.aspx"
description="Loops Example" />
</siteMapNode>
</siteMap>
Web.sitemap Limitation
An important limitation to note when working with Web.sitemap files is that they must contain only one siteMapNode as the direct child of the root siteMap element.
In the example above, the siteMapNode with the title Home is this single siteMapNode. If we added another siteMapNode alongside (rather than inside) this element, the Web.sitemap file would no longer be valid.
To use this file, you'll need to add a SiteMapDataSource control to the page, as well as a TreeView control that uses this data source, like this:
Example 4.11. TreeViewDemo.aspx (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>TreeView Demo</title>
</head>
<body>
<form runat="server">
<asp:SiteMapDataSource ID="mySiteMapDataSource"
runat="server" />
<asp:TreeView ID="myTreeView" runat="server"
DataSourceID="mySiteMapDataSource" />
</form>
</body>
</html>
Note that although the SiteMapDataSource is a control, it does not generate any HTML within the web page. There are many data source controls like this; we'll delve into this in more detail later.
When combined with the example Web.sitemap file above, this web form would generate an output such as that shown in Figure 4.7.
Figure 4.7. A simple TreeView control
As you can see, the TreeView control generated the tree for us. The root Home node can even be collapsed or expanded.
In many cases, we don't want to show the root node; we can hide it from view by setting the ShowStartingNode property of the SiteMapDataSource to false:
<asp:SiteMapDataSource ID="mySiteMapDataSource" runat="server"
ShowStartingNode="false" />
SiteMapPath
The SiteMapPath control provides the functionality to generate a breadcrumb navigational structure for your site. Breadcrumb systems help to orientate users, giving them an easy way to identify their current location within the site, and provide handy links to the current location's ancestor nodes. An example of a breadcrumb navigation system is shown in Figure 4.8.
Figure 4.8. A breadcrumb created using the SiteMapPath control
The SiteMapPath control will automatically use any SiteMapDataSource control that exists in a web form to display a user's current location within the site. For example, you could simply add the following code to the form we worked with in the previous example to achieve the effect shown in Figure 4.8:
Example 4.12. TreeViewDemo.aspx (excerpt)
<asp:SiteMapPath id="mySiteMapPath" runat="server"
PathSeparator=" > ">
</asp:SiteMapPath>
If you run the example now, you'll see the breadcrumb appear exactly as it's shown in Figure 4.8.
Note that the SiteMapPath control shows only the nodes that correspond to existing pages of your site, so if you don't have a file named Default.aspx, the root node link won't show up. Similarly, if the page you're loading isn't named TreeViewDemo.aspx, the SiteMapPath control won't generate any output.
Menu
The Menu control is similar to TreeView in that it displays hierarchical data from a data source; the ways in which we work with both controls are also very similar. The most important differences between the two lie in their appearances, and the fact that Menu supports templates for better customization and displays only two levels of items (menu and submenu items).
MultiView
The MultiView control is similar to Panel in that it doesn't generate interface elements itself, but contains other controls. A MultiView can store more pages of data (called views), and lets you show one page at a time. You can change the active view (the one being presented to the visitor) by setting the value of the ActiveViewIndex property. The first page corresponds to an ActiveViewIndex of 0, the second page is 1, the third page is 2, and so on.
The contents of each template are defined inside child View elements. Consider the following code snippet, which creates a Button control, and a MultiView control:
Example 4.13. MultiViewDemo.aspx (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>MultiView Demo</title>
</head>
<body>
<form runat="server">
<p>
<asp:Button id="myButton" Text="Switch Page"
runat="server" OnClick="SwitchPage" />
</p>
<asp:MultiView ID="myMultiView" runat="server"
ActiveViewIndex="0">
<asp:View ID="firstView" runat="server">
<p>... contents of the first view ...</p>
</asp:View>
<asp:View ID="secondView" runat="server">
<p>... contents of the second view ...</p>
</asp:View>
</asp:MultiView>
</form>
</body>
</html>
As you can see, by default, the ActiveViewIndex is 0, so when this code is first executed, the MultiView will display its first template, shown in Figure 4.9.
Figure 4.9. Using the MultiView control
Clicking on the button will cause the second template to be displayed. Here's the code for the SwitchPage event handler:
Example 4.14. MultiViewDemo.aspx (excerpt)
<script runat="server" language="VB">
Sub SwitchPage(s as Object, e as EventArgs)
myMultiView.ActiveViewIndex = _
(myMultiView.ActiveViewIndex + 1) Mod 2
End Sub
</script>
Example 4.15. MultiViewDemo.aspx (excerpt)
<script runat="server" language="C#">
public void SwitchPage(Object s, EventArgs e)
{
myMultiView.ActiveViewIndex =
(myMultiView.ActiveViewIndex + 1) % 2;
}
</script>
This simple subroutine uses the modulo operator to set the ActiveViewIndex to 1 when its original value is 0, and vice versa.
The MultiView controls has a number of other handy features, so be sure to check the documentation for this control if you're using it in a production environment.
Wizard
The Wizard control is a more advanced version of the MultiView control. It's able to display one or more pages at a time, but also includes additional built-in functionality such as navigation buttons, and a sidebar that displays the wizard's steps.
FileUpload
The FileUpload control allows you to let visitors upload files to your server. You'll learn how to use this control in Chapter 14, Working with Files and Email.