Browse DevX
Sign up for e-mail newsletters from DevX


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

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

TreeView and Menu Controls
The SiteMapPath control is just one of several controls in ASP.NET 2.0 that can display site navigation information. In this part of the article, I'll discuss the TreeView and Menu controls.

The TreeView control is best used in very large or very deep sites, where users may frequently need to move quickly among top-level and low-level pages. Unlike static or bread crumb navigation, it allows the user to manipulate the navigation view. In this example, we are adding a TreeView to the existing SiteMapPath control so that both the tree and the bread crumb are used.

Figure 8. TreeView: Add a new data source to the right side of the table that informs the TreeView control on the left of the Master Page.

To build a TreeView, begin by adding a 1x2 table to the Master Page by going to Layout -> Insert Table. Add a TreeView control to the left cell of the table and move the ContentPlaceHolder control into the right cell (see Figure 8). In the Smart Tag of the TreeView control, select "<New data source…>" and select Site Map.

For the sake of this sample, I'll just apply the MSDN autoformat (to find it, select Autoformat on the Smart Tag of the TreeView control) to the TreeView control and I'll set the BackColor property of the TreeView control to Gray (#E0E0E0). The Master Page should look like Figure 9. Note that a SiteMapDataSource control is automatically added to the page (because you selected Site Map as the new data source earlier). The SiteMapDataSource control will automatically map to the Web.sitemap file.

Press Ctrl-F5 to compile your work and see the TreeView control in action. You should now be able to navigate among all the pages in your site by selecting the items in the TreeView control (see Figure 10).

Figure 9. The TreeView Control: Using the TreeView control and the MSDN autoformat, you can mimic the menu of MSDN as a test.
Figure 10. Testing the TreeView Control: The TreeView pulls index information from the same file as the SiteMapPath (bread crumb) control, but it allows the user to manipulate the menu and navigate a deep site more efficiently.

A Menu control is like a TreeView in that it lets the user drill down to lower levels of pages in a deep site quickly. The main difference is that lower levels in the menu hierarchy "fly out" horizontally with the Menu control, in a similar style to the DevX navigation bar. A TreeView expands and contracts in a vertical fashion and remains expanded until the user closes a root. For this example, I will simply add a Menu control to the existing Master Page, without removing the TreeView or SiteMapPath controls first. Obviously, for a real Web site, you'd want to choose one type.

The Menu control is found in the Standard tab of the Toolbox. Add one to the Master Page and apply the "Colorful" autoformat to change its look (select Autoformat in the Smart Tag of the Menu control). In the Smart Tag of the Menu control, select SiteMapDataSource1 as its data source so that its content can be obtained from the SiteMapDataSource1 control (see Figure 11). The SiteMapDataSource1 control was added in automatically when the TreeView control was configured and contains the site map information (Web.sitemap) given in Listing 1.

To test the Menu control, press Ctrl-F5. You should now be able to navigate the site using the Menu control (see Figure 12).

Figure 11. Adding a Menu Control to the Master Page: You need to select a data source for the Menu control.
Figure 12. Testing the Menu Control: The Menu control adds "fly out" style navigation to your site.

Note that the Menu control supports two orientations: horizontal and vertical. Change the Orientation property of the Menu control from horizontal to vertical to observe the changes (see Figure 13).

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