Browse DevX
Sign up for e-mail newsletters from DevX


A La Carte, Part 2: Build Deep, Flexible Navigation Using Four New Controls

In part 1, we looked in depth at ASP.NET's new Menu control. But ASP.NET 2.0 includes a whole family of controls that make it easy to create deep, complex, and highly-professional navigational elements, including a "bread crumb" style control that will keep your visitors oriented.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

nless your Web site contains only a single Web page, you need a mechanism for visitors to navigate between pages. For most sites, navigation is right up there with content in term of its importance to your site's success. And there are several different ways of coding one's navigation. But ASP.NET 2.0, with several new navigation controls, introduces perhaps the easiest way to date.

These new controls are:

  • SiteMapDataSource—A control that represents a site map. A site map basically describes the logical structure of a Web site and the relationship between the pages in a Web site.
  • SiteMapPath—A visual control that shows "bread-crumb" information depicting the path to the current page.
  • Menu—A visual control that displays information in menu form. The Menu control supports data binding to a site map.
  • TreeView—A visual control that displays information in a hierarchical structure. The TreeView control supports data binding to a site map.
An earlier article, "A La Carte: Make Highly Customized Menus with Ease in ASP.NET 2.0" shows a sample project using only the Menu control. In this article, I'll show you a very simple, high-level example that demonstrates the basics of all four controls.

Creating the Site Map
To see how to implement the controls in ASP.NET, create a new Web site project in Visual Studio 2005. In Solution Explorer, add a site map by right-clicking on the project name and selecting Add New Item -> Site Map. A site map is an XML document describing the logical structure of a Web site.

Listing 1 contains some sample code to populate the site map. Its primary structure is a series of <siteMapNode> elements.

There are four attributes to each <siteMapNode> element in Listing 1:

  • title—The text to display in each node of a SiteMapPath, TreeView, or Menu control.
  • description—The ToolTip text to display when the mouse hovers over a node in a SiteMapPath, TreeView, or Menu control.
  • roles—Indicates the role(s) for which this node is to be displayed. For example, you can choose to display a node only if the user is in a particular role, such as Administrators. This is useful in cases where you want to restrict unauthorized users from seeing options not relevant to them.
  • url—The URL to navigate to when a node in a SiteMapPath, TreeView, or Menu control is clicked.
Next, add a new Master Page to your project. A Master Page is a template page from which all other pages in a Web site can visually inherit. Populate the Master Page with an image, a SiteMapPath control, and a placeholder for content, as shown in Figure 1. You can locate the SiteMapPath control from the Navigation tab in the Toolbox (see Figure 2). The Master Page is the ideal page on which to place the SiteMapPath control as all controls placed in this page are visible in every other page that inherits from it. Hence, the site navigation path displayed by the SiteMapPath control is visible in all pages.

Figure 1. Populating the Master Page: Putting a SiteMapPath control on the master page makes it available on all pages that inherit from the master page.
Figure 2. Location, Location: Expand the Navigation menu to expose the SiteMapPath and Menu controls.

Once the Master Page is completed, add a new Web Form to the project and name it Main.aspx. Check the "Select master page option" and click OK (see Figure 3). In the next screen select the Master Page (MasterPage, master) you created earlier. This will ensure that the "bread crumb"—the SiteMapPath control—and the header image will appear on all subsequent pages you build.

Figure 3. Choose Your Master: Be sure to check the box for "Select Master Page" for your Web form.
Main.aspx will be the home page for the sample Web site. It will appear as "Windows Mobile Home" in the breadcrumb. Populate the Main.aspx page with something simple, such as a text heading and a graphic, as shown in Figure 4. It doesn't really matter what specific content you choose for the pages; as you would expect, the navigation controls will work regardless of what your Web pages contain. However, the names of the pages you create for this sample are not arbitrary. The SiteMapPath control will organize your pages into the proper hierarchical structure using the information you provide in the Web.sitemap file (Listing 1).

Now add another new Web Form, using the same process as before and name it Windowsmobileoverview.aspx. Again, populate the form, roughly, with a text heading and a graphic (see Figure 5).

Figure 4. The Main.aspx Page: Put something simple on your main.aspx page. In this case I've used a header and a graphic.
Figure 5. The Windowsmobileoverview.aspx Page: This page will be a lower page in the site hierarchy for my test site.

The SiteMapPath control reads the content of the Web.sitemap file (Listing 1) and, when the code is compiled, it will display the site navigation path accordingly. To test the pages of your sample app, press Ctrl-F5 and load the Main.aspx and Windowsmobileoverview.aspx pages. The navigational path should appear as shown in Figure 6.

Figure 6. Testing the SiteMapPath control: In this image, you can see the "bread crumb" function working, as each page shows its place in the navigation hierarchy.
Note that in ASP.NET 2.0 Beta 1, there is only one site map provider: XmlSiteMapProvider. The XmlSiteMapProvider reads site map information from a predefined XML document; by default it is Web.sitemap.

If you need to change the default name of the site map file, you can do so via the Web.config file. The code below shows how to deregister the default XmlSiteMapProvider and register the same one with a different site map name, in this case, My.sitemap.

<configuration> <system.web> <siteMap> <providers> <remove name="AspNetXmlSiteMapProvider" /> <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web, Version=1.2.3400.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" siteMapFile="My.sitemap" /> </providers> </siteMap> </system.web> </configuration>

Thanks for your registration, follow us on our social networks to keep up-to-date