Chapter 4: Constructing ASP.NET Web Pages
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.
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:
122
Advanced Controls
Figure 4.8. A breadcrumb created using the SiteMapPath control
File: 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
123
Chapter 4: Constructing ASP.NET Web Pages
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:
File: 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.
Clicking on the button will cause the second template to be displayed. Here’s the code for the SwitchPage event handler:
Visual Basic |
File: MultiViewDemo.aspx (excerpt) |
<script runat="server" language="VB">
Sub SwitchPage(s as Object, e as EventArgs) myMultiView.ActiveViewIndex = _
(myMultiView.ActiveViewIndex + 1) Mod 2
124
Advanced Controls
Figure 4.9. Using the MultiView control
End Sub </script>
C# |
File: 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.
125