These controls are advanced in terms of their usage, the HTML code they generate, and the background work they do for you. Some of these controls aren’t available to older versions of ASP.NET; we’ll learn more about many of them (as well as others that aren’t covered in this chapter) as we progress through this book.
The Calendar control requires very little customization. In Visual Web Developer, select Website > Add New Item…, and make the changes indicated:
Visual Basic LearningASP\VB\Calendar_01.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>
Calendar Test
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Calendar ID="myCalendar" runat="server" />
</div>
</form>
</body>
</html>
Again, the C# version is the same, except for the Page declaration:
C# LearningASP\CS\01_Calendar.aspx(excerpt)
<%@ Page Language="C#" %>
⋮
If you save this page in your working folder and load it, you’ll see the output shown in below Figure.
Figure : Displaying the default calendar
The Calendar control contains a wide range of properties, methods, and events, including those listed in above Table.
Table 4.3. Some of the Calendar control’s properties
Let’s take a look at an example that uses some of these properties, events, and methods to create a Calendarcontrol which allows users to select days, weeks, and months. Modify the calendar in Calendar.aspx (both the VB and C# versions), and add a label to it, as follows:
LearningASP\VB\Calendar_02.aspx(excerpt)
⋮
<form id="form1" runat="server">
<div>
<h1>Pick your dates:</h1>
<asp:Calendar ID="myCalendar" runat="server"
DayNameFormat="Short" FirstDayOfWeek="Sunday"
NextPrevFormat="FullMonth" SelectionMode="DayWeekMonth"
SelectWeekText="Select Week"
SelectMonthText="Select Month" TitleFormat="Month"
OnSelectionChanged="SelectionChanged" />
<h1>You selected these dates:</h1>
<asp:Label ID="myLabel" runat="server" />
</div>
</form>
⋮
Now edit the <script runat="server"> tag to include the SelectionChangedevent handler referenced by your calendar:
Visual Basic LearningASP\VB\Calendar_02.aspx(excerpt)
<script runat="server">
Sub SelectionChanged(ByVal s As Object, ByVal e As EventArgs)
myLabel.Text = ""
For Each d As DateTime In myCalendar.SelectedDates
myLabel.Text &= d.ToString("D") & "<br />"
Next
End Sub
</script>
C# LearningASP\CS\Calendar_02.aspx(excerpt)
<script runat="server">
void SelectionChanged(Object s, EventArgs e)
{
myLabel.Text = "";
foreach (DateTime d in myCalendar.SelectedDates)
{
myLabel.Text += d.ToString("D") + "<br />";
}
}
</script>
Save your work and test it in a browser. Try selecting a day, week, or month. The selection will be highlighted in a similar way to the display shown in elow Figure.
Figure : Using the Calendar control
In SelectionChanged, we loop through each of the dates that the user has selected, and append each to the Label we added to the page.
AdRotator
The AdRotator control allows you to display a list of banner advertisements at random within your web application. 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. Most of the AdRotator control’s properties reside within an XML file, so, if you wanted to, you could share that XML file on the Web, allowing value added resellers (VARS), or possibly your companies’ partners, to use your banner advertisements on their web sites.
If you want to test this control out, create a file called ads.xml in your LearningASP\VB or LearningASP\CS folder (or both), 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:
LearningASP\VB\Ads.xml
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>workatdorknozzle.gif</ImageUrl>
<NavigateUrl>http://www.example.com</NavigateUrl>
<TargetUrl>_blank</TargetUrl>
<AlternateText>Work at Dorknozzle!</AlternateText>
<Keyword>HR Sites</Keyword>
<Impressions>2</Impressions>
</Ad>
<Ad>
<ImageUrl>getthenewsletter.gif</ImageUrl>
<NavigateUrl>http://www.example.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 ad
NavigateURL
the web page to which your users will navigate when they click the banner ad
AlternateText
the alternative text to display for browsers that don’t support images
Keyword
the keyword to use to categorize your banner ad
If you use the KeywordFilter property of the AdRotatorcontrol, you can specify the categories of banner ads to display.
Impressions
the relative frequency with which 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, and add the following code to it:
Visual Basic LearningASP\VB\AdRotator.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>
Using the AdRotator Control
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:AdRotator ID="adRotator" runat="server"
AdvertisementFile="Ads.xml" />
</div>
</form>
</body>
</html>
Figure : Displaying ads using AdRotator.aspx
As with most of our examples, the C# version of this code is the same except for the Page declaration. You’ll also need to copy the workatdorknozzle.gif and getthenewsletter.gif image files from the code archive and place them in your working folder in order to see these ad images. Save your work and test it in the browser; the display should look something like aboveFigure.
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. 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>
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.blosums.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.blosums.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 below Figure.
Figure : 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 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 below Figure .
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 below Figure :
Figure 4.8. A breadcrumb created using the SiteMapPath control
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 SiteMapPathcontrol 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 Viewelements. Consider the following code example, which creates a Button control and a MultiView control:
Visual Basic LearningASP\VB\MultiView.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">
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>
C# 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 below Figure .
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.
Figure : Using the MultiView control
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.
Calendar
The Calendar is a great example of the reusable nature of ASP.NET controls. The Calendar control generates markup that displays an intuitive calendar in which the user can click to select, or move between, days, weeks, months, and so on.The Calendar control requires very little customization. In Visual Web Developer, select Website > Add New Item…, and make the changes indicated:
<%@ 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>
Calendar Test
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Calendar ID="myCalendar" runat="server" />
</div>
</form>
</body>
</html>
C# LearningASP\CS\01_Calendar.aspx(excerpt)
<%@ Page Language="C#" %>
⋮
If you save this page in your working folder and load it, you’ll see the output shown in below Figure.
Figure : Displaying the default calendar
The Calendar control contains a wide range of properties, methods, and events, including those listed in above Table.
Table 4.3. Some of the Calendar control’s properties
Let’s take a look at an example that uses some of these properties, events, and methods to create a Calendarcontrol which allows users to select days, weeks, and months. Modify the calendar in Calendar.aspx (both the VB and C# versions), and add a label to it, as follows:
LearningASP\VB\Calendar_02.aspx(excerpt)
⋮
<form id="form1" runat="server">
<div>
<h1>Pick your dates:</h1>
<asp:Calendar ID="myCalendar" runat="server"
DayNameFormat="Short" FirstDayOfWeek="Sunday"
NextPrevFormat="FullMonth" SelectionMode="DayWeekMonth"
SelectWeekText="Select Week"
SelectMonthText="Select Month" TitleFormat="Month"
OnSelectionChanged="SelectionChanged" />
<h1>You selected these dates:</h1>
<asp:Label ID="myLabel" runat="server" />
</div>
</form>
⋮
Now edit the <script runat="server"> tag to include the SelectionChangedevent handler referenced by your calendar:
Visual Basic LearningASP\VB\Calendar_02.aspx(excerpt)
<script runat="server">
Sub SelectionChanged(ByVal s As Object, ByVal e As EventArgs)
myLabel.Text = ""
For Each d As DateTime In myCalendar.SelectedDates
myLabel.Text &= d.ToString("D") & "<br />"
Next
End Sub
</script>
C# LearningASP\CS\Calendar_02.aspx(excerpt)
<script runat="server">
void SelectionChanged(Object s, EventArgs e)
{
myLabel.Text = "";
foreach (DateTime d in myCalendar.SelectedDates)
{
myLabel.Text += d.ToString("D") + "<br />";
}
}
</script>
Save your work and test it in a browser. Try selecting a day, week, or month. The selection will be highlighted in a similar way to the display shown in elow Figure.
Figure : Using the Calendar control
In SelectionChanged, we loop through each of the dates that the user has selected, and append each to the Label we added to the page.
AdRotator
The AdRotator control allows you to display a list of banner advertisements at random within your web application. 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. Most of the AdRotator control’s properties reside within an XML file, so, if you wanted to, you could share that XML file on the Web, allowing value added resellers (VARS), or possibly your companies’ partners, to use your banner advertisements on their web sites.
If you want to test this control out, create a file called ads.xml in your LearningASP\VB or LearningASP\CS folder (or both), 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:
LearningASP\VB\Ads.xml
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>workatdorknozzle.gif</ImageUrl>
<NavigateUrl>http://www.example.com</NavigateUrl>
<TargetUrl>_blank</TargetUrl>
<AlternateText>Work at Dorknozzle!</AlternateText>
<Keyword>HR Sites</Keyword>
<Impressions>2</Impressions>
</Ad>
<Ad>
<ImageUrl>getthenewsletter.gif</ImageUrl>
<NavigateUrl>http://www.example.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 ad
NavigateURL
the web page to which your users will navigate when they click the banner ad
AlternateText
the alternative text to display for browsers that don’t support images
Keyword
the keyword to use to categorize your banner ad
If you use the KeywordFilter property of the AdRotatorcontrol, you can specify the categories of banner ads to display.
Impressions
the relative frequency with which 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, and add the following code to it:
Visual Basic LearningASP\VB\AdRotator.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>
Using the AdRotator Control
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:AdRotator ID="adRotator" runat="server"
AdvertisementFile="Ads.xml" />
</div>
</form>
</body>
</html>
Figure : Displaying ads using AdRotator.aspx
As with most of our examples, the C# version of this code is the same except for the Page declaration. You’ll also need to copy the workatdorknozzle.gif and getthenewsletter.gif image files from the code archive and place them in your working folder in order to see these ad images. Save your work and test it in the browser; the display should look something like aboveFigure.
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. 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>
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.blosums.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.blosums.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 below Figure.
Figure : 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 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 below Figure .
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 below Figure :
Figure 4.8. A breadcrumb created using the SiteMapPath control
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 SiteMapPathcontrol 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 Viewelements. Consider the following code example, which creates a Button control and a MultiView control:
Visual Basic LearningASP\VB\MultiView.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">
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>
C# 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 below Figure .
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.
Figure : Using the MultiView control
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.
