Article
Constructing ASP.NET Web Pages
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. We’ll talk 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 that’s located in the root of your project (you can easily create this file using the Site Map template in Visual Web Developer). Web.sitemap is an XML file that looks like this:
LearningASP\VB\Web.sitemap
<siteMap
xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode title="Home" url="~/Default.aspx"
description="Home">
<siteMapNode title="SiteMapPath" url="~/SiteMapPath.aspx"
description="TreeView Example" />
<siteMapNode title="TreeView" url="~/TreeViewSitemap.aspx"
description="TreeView Example" />
<siteMapNode title="ClickEvent" url="~/ClickEvent.aspx"
description="ClickEvent Example" />
<siteMapNode title="Loops" url="~/Loops.aspx"
description="Loops Example" />
</siteMapNode>
</siteMap>
NOTE: A Web.sitemap Limitation
An important limitation to note when you’re 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 siteMapNodealongside (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:
Visual Basic LearningASP\VB\TreeViewSiteMap.aspx
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TreeView Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SiteMapDataSource ID="mySiteMapDataSource"
runat="server" />
<asp:TreeView ID="myTreeView" runat="server"
DataSourceID="mySiteMapDataSource" />
</div>
</form>
</body>
</html>
Note that although the SiteMapDataSource is a control, it doesn’t generate any HTML within the web page. There are many data source controls like this; we’ll delve into them in more detail later.
When combined with the example Web.sitemap file above, this web form would generate an output like that shown in Figure 7.
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 won’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 providing handy links to the current location’s ancestor nodes. An example of a breadcrumb navigation system is shown in Figure 8.
The SiteMapPath control will automatically use any SiteMapDataSource control that exists in a web form, such as the TreeView control in the previous example, to display a user’s current location within the site. For example, you could simply add the following code to a new web form to achieve the effect shown in Figure 8:
Visual Basic LearningASP\VB\SiteMapPath.aspx
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>SiteMapPath Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SiteMapDataSource ID="mySiteMapDataSource"
runat="server" />
<asp:SiteMapPath ID="mySiteMapPath" runat="server"
DataSourceID="mySiteMapDataSource"
PathSeparator=" > " />
</div>
</form>
</body>
</html>
Note that the SiteMapPath control allows you to customize the breadcrumbs’ separator character via the PathSeparator property. Also note that if you don’t have a file named Default.aspx in the directory, the root node link won’t work.
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 items and submenu items).
MultiView
The MultiView control is similar to Panel in that it doesn’t generate interface elements itself, but contains other controls. However, 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 that’s being presented to the visitor) by setting the value of the ActiveViewIndex property. The first page corresponds to an ActiveViewIndex of 0; the value of the second page is 1; the value of the third page is 2; and so on.
The contents of each template are defined inside child View elements. Consider the following code example, which creates a Button control and a MultiView control:
Visual Basic Learning ASP\VB\MultiView.aspx
<%@ Page Language="VB" %> <!DOCTYPE
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Sub SwitchPage(s as Object, e as EventArgs)
myMultiView.ActiveViewIndex = _
(myMultiView.ActiveViewIndex + 1) Mod 2
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MultiView Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<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>
</div>
</form>
</body>
</html>
LearningASP\CS\MultiView.aspx (excerpt)
<%@ Page Language="C#" %>
…
<script runat="server">
public void SwitchPage(Object s, EventArgs e)
{
myMultiView.ActiveViewIndex =
(myMultiView.ActiveViewIndex + 1) % 2;
}
</script>
…
As you can see, by default, the ActiveViewIndex is 0, so when this code is first executed, the MultiView will display its first template, which is shown in Figure 9.
Clicking on the button will cause the second template to be displayed. The SwitchPage event handler uses the modulo operator, Mod in VB and % in C#, to set the ActiveViewIndex to 1 when its original value is 0, and vice versa.
The MultiView control 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 can 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. We go into this control in more detail in Chapter 14 of this book.