|
Navigation is important to a web site. You can have the best information in the world on your site,
but if people can't find it, then what good is it to them? Keeping users aware of their location
on your site and making it easy for them to move around are key usability issues, but until recently
ASP and ASP.NET didn't include any tools to make it easy for you to build good navigation into your sites.
With ASP.NET 2.0 that has changed.
This article will introduce the new ASP.NET 2.0 Navigation Controls
and show you how they can make managing your site easier. I'll start by introducing you to the
concept of a sitemap file and show you how to create one. After that we'll examine
the three navigation controls: the Menu, the SiteMapPath, and the TreeView.
We'll finish by showing you a sample page that uses them all as well as how to apply formatting
to the controls so that they blend in with the overall look and feel of your site.
Creating a Sitemap
The first step in using most of the navigational controls is to define a source for your
navigational data. Unless your site is extremely complex or its layout varies often, the
easiest way to define your applications navigation structure is most likely
going to be by using a Web.sitemap file.
A Web.sitemap file is a simple XML document that contains a single root
<siteMap> element, a single <siteMapNode> element under that,
and as many sub <siteMapNode> elements as needed to define
your site's layout. So for example, a simple one page site would have a Web.sitemap file something like this:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="Page Title" description="Page Description." />
</siteMap>
One thing that often confuses people when they are trying to set up their sitemap
file is that they think that the structure defined in the file should match the file and
folder structure of their web site. While you can set up the navigation to your site in this manner
and it might even make sense if your files and folders are well grouped, there's absolutely no
reason that you have to do so. The navigation structure that you set up in the sitemap
is simply for display purposes. The URL for the deepest node in your sitemap can be in the
root of your site and likewise the root node in your sitemap can be buried in
your site's deepest folders. Simply put, a file's physical location has no bearing on where the
page that that file represents can be located in your sitemap. Even more interesting is
the fact that each node doesn't even need to point to a unique file. I'll illustrate the
point by presenting the sample Web.sitemap file that I'll be using for the rest of the samples
in this article.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="Our Site" description="This is the site's root.">
<siteMapNode url="~/Default.aspx?page=home" title="Home Page" description="This is the site's home page." />
<siteMapNode url="~/Default.aspx?page=about" title="About Us" description="This page tells the user about us." />
<siteMapNode url="~/Default.aspx?page=products" title="Products" description="This page lists the products we sell.">
<siteMapNode url="~/Default.aspx?page=hardware" title="Hardware" description="This page lists our hardware products." />
<siteMapNode url="~/Default.aspx?page=software" title="Software" description="This page lists our software products." />
</siteMapNode>
<siteMapNode url="~/Plain.aspx" title="Plain Version" description="This is a plain version of the page." />
</siteMapNode>
</siteMap>
Notice how most of the nodes point to the same file and simply pass a different value for the page parameter.
The Menu Control
The first control we'll examine is the <asp:Menu> control. Simply put, the menu control
lists menu items. These items can come from a number of sources, but in this case, we want to use the
entries from our Web.sitemap file. The easiest way to do this is to use an
<asp:SiteMapDataSource> control. You define a SiteMapDataSource control
like this:
<asp:SiteMapDataSource id="mySiteMapDataSource" runat="server"
ShowStartingNode="false"
/>
I've set the ShowStartingNode property to "false" in order to hide the root node
of the sitemap.
The next order of business is to add a Menu control to the page. At it's most basic, the declaration for
a menu control will look like this:
<asp:Menu id="myMenu" runat="server" DataSourceID="mySiteMapDataSource" />
With just the Web.sitemap file and those two controls we get a page that looks something like this:
Now I know it doesn't look like much, but you can format it to your heart's content.
For now I'm leaving it simple so as not to confuse anyone.
The SiteMapPath Control
The next control I'd like to introduce you to is the <asp:SiteMapPath> control.
This control displays what are called breadcrumbs -- a series of links which show the user a
path back up the tree to the root of the site. Because the SiteMapPath control is
strictly a navigation control and doesn't have any other real functionality, it's
even simpler to use then the Menu control. This time around we don't even need to
provide a SiteMapDataSource. The control simply uses the default SiteMap provider
which reads in the values from your Web.sitemap file automatically.
Simply add the control to any page which is listed in your sitemap file:
<asp:SiteMapPath id="mySiteMapPath" runat="server" />
and the control will automatically display the user's current location along with the
route back to the root of the site:
Once again, I'll leave the formatting to you, but the basic functionality couldn't be easier to implement.
Please note that the control will not display on a page that is not listed in the sitemap file.
After all, how is the control going to know the navigational path back out to the root if it
doesn't know where the current file goes.
The TreeView Control
The treeview is probably the most logical control for displaying this type of hierarchical data.
Anyone who's ever browsed their hard drive in Windows Explorer or visited Microsoft's MSDN site
should be familiar with this type of interface. The problem was that they used to be a pain
to implement. Well no longer... the <asp:TreeView> does almost all the work
for you.
Just as we did with the Menu control, we'll need to create an <asp:SiteMapDataSource>
control.
<asp:SiteMapDataSource id="mySiteMapDataSource" runat="server"
ShowStartingNode="false"
/>
Note: If you're using both the Menu and TreeView on the same page, it's perfectly fine to
bind them both to the same SiteMapDataSource if you'd like. There's no need to create
two SiteMapDataSource objects unless you want to change the configuration on one of them.
Setting up the TreeView control is just like the Menu control. Simply add the control to
the page and then set the DataSourceID to the name you gave the SiteMapDataSource.
<asp:TreeView id="myTreeView" runat="server" DataSourceID="mySiteMapDataSource" />
Once you've done that, if you view the resulting page in a browser you'll see something like this:
Once again I've left the default formatting just to keep things as simple as possible.
Putting It All Together and Making It Pretty
While it's doubtful that you'd actually want to put all three controls on the same page,
that's exactly what this next sample does. I'm also going to apply some basic formatting
so that you can get a better feel for what these controls might look like if you run across them
"in the wild".
I'm not going to provide the code listing here because all the formatting makes for a
relatively long file, but take a look at the screen shot and you'll see that these controls
can be made to look like pretty much anything you want them to.
While it's nothing all that fancy, the formatted version in the zip file will give
you an idea of what you can do. I'd recommend you get the controls working the way you
want them to first, but once you've got everything working, feel free to play around
with the formatting options. The guys at Microsoft really did a good job of making
the controls extremely powerful and simple to use, but at the same time allowing you
to tweak them to your heart's content.
Download
If you'd like a copy of the files used in the samples above, you can download a zip file containing them
from here: ASP.NET 2.0 Navigation Controls Sample Code (5.6 KB).
Conclusion
I hope this article has shown you just how powerful and easy to use the new ASP.NET
2.0 Navigation controls actually are. Long gone are the days of hand coding all sorts of
funky client-side JavaScript just to create a simple menu. Not only does ASP.NET 2.0 do all
that work for you, but it does it well and even lets you tweak the display until it looks exactly
like you want it to.
If you're not already using the navigation controls in your web projects ask yourself: "Why not?"
Unless you can come up with a very good reason, give them a try. I think you'll be pleasantly surprised.
|
