Navigation with SiteMap, Menu and TreeView
Site navigation interfaces have always been a complicated subject. What should we use to create a user-friendly interface, and at the same time, easy to maintain? ASP.NET 2.0 has brought resources that made this task so simple it will look like a joke . This article will explain how Master Pages, Site Map, Menus and TreeView can help us to create navigation interfaces with not even one code line!
Create a new Web Site in Visual Studio 2005. Close Default.aspx page and through Solution Explorer add a new item. In the Add New Item window choose the Master Page template and name it “Menu.Master”, as shown in Figure 1.
Figure 1. Creating a Master Page
A Master Page is nothing else than an ASP.NET page. The difference is that a Master Page comes with a control called ContentPlaceHolder. We will easily understand the behavior of a Master Page as soon we add new pages to the project. For the time being, think of it as being the site’s “main page” and the ContentPlaceHolder control, the space reserved for the content of the site, which will be modified while we navigate.
Place the cursor before ContentPlaceHolder and add a new HTML Table to the page, through the Layout> Insert Table menu. A very interesting feature of Visual Studio 2005 is the template option that appears when we are creating tables (Figure 2). Note that there are many common templates to build Web interfaces. Select template and choose Header and Side.
Figure 2. Creating a table using templates
Drag the ContentPlaceHolder into the central cell of the table, as seen in Figure 3. Adjust spaces, borders, colors etc. so the page will suit you. Consider that this will be the visual identity of your entire site, and that the ContentPlaceHolder control must be set where the content of the site will appear.
Figure 3. Formatting a Master Page
Figure 4. Adding a content page
Next, a window will appear so that you can choose which the master page of this content page is. Choose Menu.Master and click OK (Figure 5). The Start.aspx page will be created. See in the page design that the only area in which we can work is exactly the space reserved by the master page’s ContentPlaceHolder. Our content page stays covered with the formats performed in the master page. In the Start.aspx page, add a text to identify the page. If you wish, you can realize any other formatting or add other controls. The behavior of this page is the same as an ASPX traditional page.
Figure 5. Choosing the Master Page for the content page
To carry on with our example, create other content pages. In this example, we are creating the following pages: Soccer.aspx, Real.aspx, Inter.aspx, Barcelona.aspx, Formula1.aspx, Ferrari.aspx, Willians.aspx and Tennis.aspx. Add a text to each of these pages only to differentiate one from another, if you prefer you can add controls, images etc. At last, in Solution Explorer click with the right click over the Start.aspx page and choose Set As Start Page.
ASP.NET 2.0 brought us a new object called Site Map, which is used to store and organize the hierarchical structure of the pages in a site. To create a site map, go to the Add New Item option, choose the Site Map template and click Add. A XML file, called Web.sitemap will be created. Note that it has some elements called siteMapNode. It’s using this XML that we will define the site structure. Modify the site map so it will be like List 1.
List 1. Defining the site structure
xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Start.aspx" title="Home" description="Start Page" >
<siteMapNode url="Soccer.aspx" title="Soccer">
<siteMapNode url="Real.aspx" title="Real"/>
<siteMapNode url="Inter.aspx" title="Inter"/>
<siteMapNode url="Barcelona.aspx" title="Barcelona"/>
<siteMapNode url="Formula1.aspx" title="Formula1">
<siteMapNode url="Ferrari.aspx" title="Ferrari"/>
<siteMapNode url="Willians.aspx" title="Willians"/>
<siteMapNode url="Tennis.aspx" title="Tennis" description="" />
In a siteMapNode we need to define the page URL, a title and optionally we can define a description. Note that we put soccer teams inside the node Soccer, and Formula1 teams inside the Formula1 node. This way we are creating a hierarchical structure of the site. We can define a structure with many levels we desire.
ASP.NET 2.0 also brought a set of controls meant for navigation. See in Figure 6 the navigation controls that are in the Navigation section of the ToolBox.
Figure 6. Navigation controls
SiteMapPath is a control that shows, in a hierarchic structure, which is the actual page. Let’s add a SiteMapPath in our master page. For such add a line above the table title, and at this line drag a SiteMapPath (Figure 7).
Figure 7. Adding a SiteMapPath in the master page
As many ASP.NET controls, SiteMapPath has the Auto Format option in your Tasks menu. Include the formatting of your choice in the control; here we will be using the Classic format.
Let us add a Menu control to the Master Page. Drag a Menu control in the left cell of the table and, through the Tasks, change the formatting to Classic. Expand the list of the Choose Data Source option and click new data source. The definition window the Data Source (Figure 8) will appear. In this window, choose the Site Map option. The Data Source will point automatically to the Site Map object we created (web.sitemap), and that should be in the site root. Next, click OK and run your project. See the results as shown in Figure 9. Select the options and see that the content of the site is modified due to our choice. See as well that the SiteMapPath is modified automatically when we navigate, showing the complete path of the actual page.
Figure 8. Defining the Site Map as Data Source of the menu
Figure 9. Result of the Menu control
At last let’s include a TreeView right above the Menu control. Change the formatting of the TreeView control, in this example I’m using Simple 2. In the Choose Data Source option, select SiteMapDataSource1. As we already have a Data Source configured for the Menu control, we can reuse it in TreeView. Run the project and check the result, as shown in Figure 10.
Figure 10. Adding TreeView control to the Master Page
Try to navigate in the site through the TreeView. Note that as we choose an option through TreeView, automatically the respective selected option of the Menu is modified. The SiteMapPath is also modified independently of which control we use to navigate.
How many code lines do we use? Absolutely none. With the use of a master page, three controls and a site map file, we create a complete navigation structure. Surely, on your applications you will opt to use or the Menu or the TreeView. To list the options in this example we include both controls so that you can verify the behavior of each one. As for the formatting options we demonstrated, they were the templates offered to us by Visual Studio 2005 .Through the control properties we can make more advanced layout modifications. The important matter is that we can create and customize a navigation user interface simpler and faster, with no need of additional code.