Microsoft.NET

……………………………………………….Expertise in .NET Technologies

Site Navigation Controls – Part 3

Posted by Ravi Varma Thumati on February 2, 2012

When you run Visual Studio 2008 and look in the designer’s Toolbox, you’ll see that ASP.NET includes three controls categorized under the navigation category: the Menu, the TreeView, and the SiteMapPath control. Let’s look at each in a bit more detail before diving into an example.

The Menu and TreeView Controls

The Menu and TreeView controls can bind to hierarchical data source implementing IHierarchicalDataSource or IHierarchicalEnumerable. Although they’re tailor-made to support site maps, they work with other data sources. Figure 1 shows the Menu control in action, and Figure 2 shows the TreeView in action. Both are reading the data from the site map data source to populate themselves.

 

FIGURE: 1 The Menu in action

 

FIGURE 2 The TreeView in action

Defining the Site Map

A site map is made up of a series of related SiteMapNode objects. The SiteMapNodes are related in such a way as to form a hierarchy. The hierarchy contains a single root node, which is the sole node in the hierarchy that does not have a parent node. Each node in the hierarchy represents a logical section of the website. Each section can have a title, URL, description, and so on, which are modeled by the SiteMapNodes class’s properties (TitleUrlDescription, and so on).

The hierarchy of SiteMapNodes objects is how the site map is represented in memory when it’s examined through ASP.NET 2.0’s site navigation API. This site map, however, must be physically serialized in some manner, such as an XML file or in a database table. By default, ASP.NET 2.0 provides a default implementation of serializing the site map using an XML formatted file. To use this technique, you’ll need to create an XML file in your web application’s root directory named Web.sitemap that has the following structure:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <siteMapNode attributes>
    <siteMapNode attributes>
      <siteMapNode attributes>
      ...
    </siteMapNode>
    <siteMapNode attributes />
    ...    
    <siteMapNode attributes />
  </siteMapNode>
</siteMap>

The <siteMapNode> element’s can have a number of attributes. The most common ones are:

  • title – specifies the title of the section
  • url – specifies the URL of the section; optional, but if provided, each URL in the site map must be unique
  • description – the optional description of the section; used in the alt attribute of the rendered navigation controls

The <siteMapNode> elements can be arbitrarily nested to any depth; however, the site map must contain a root <siteMapNode> element. That is, the <siteMap> node must have one and only one <siteMapNode> element child.

Site Map Configuration

Setting up the XML site map happens through the configuration file. Adding a site map file to the Web application automatically updates the web.config file to include the XML site map provider. Listing 1 shows the configuration information that is added to web.config.

Listing 1 Configuring the Site Map Data

<configuration><!– default config –>

        <system.web>

     <siteMap defaultProvider=”XmlSiteMapProvider”>

<providers>

<add name=”XmlSiteMapProvider” type=”System.Web.XmlSiteMapProvider,

System.Web, Version=2.0.3600.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a” siteMapFile=”web.sitemap”/>

</providers>

    </siteMap>

       </system.web>

</configuration>

In addition to adding the confi guration information to web.confi g, Visual Studio 2008 adds a blank top-level node in the site map, as shown in Listing 2.

Listing 2 the Default Site Map That Is Added by Visual Studio 2008

<? xml version=”1.0″ encoding=”utf-8″ ?>

<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0&#8243; >

<siteMapNode url=”” title=”” description=””>

<siteMapNode url=”” title=”” description=”” />

<siteMapNode url=”” title=”” description=”” />

</siteMapNode>

</siteMap>

Once the site map is added, it’s easy to update—for example, to add a few new nodes to the site map, simply edit the fi le as (XML) text. Listing 3 shows an XML site map fi le with a few extra nodes added.

LISTING 3 Site Map Data in XML

<?xml version=”1.0″ encoding=”utf-8″ ?>

<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0&#8243; >

      <siteMapNode url=”” title=”Navigation Menu” description=””>

<siteMapNode url=”Default.aspx” title=”Home” description=”” />

<siteMapNode url=”Products.aspx” title=”Products” description=”” />

<siteMapNode url=”Support.aspx” title=”Support” description=”” />

<siteMapNode url=”Contact.aspx” title=”Contacts” description=”” />

      </siteMapNode>

</siteMap>

Building a Navigable Web Site

Adding navigation support to a Web site is pretty straightforward. Once you establish the hierarchical layout of the site, use the site map XML fi le to describe the structure. Once that’s done, just point any navigation controls you put on the page to the new XML site map file. The navigation controls will populate themselves and render a navigable Web site. The following example shows how to add navigation support to a Web site and use the ASP.NET navigation controls within the application.

Creating a site map

1.    Start Visual Studio and create a new ASP.NET Web site project. Make it a fi le system–based Web site. The example here is called NavigateMeSite.

2.    Remove the “Default” page from the application. In the next step you’ll add a master page, and removing the “Default” page makes it easier to apply the master page to the “Default” page. To remove the page, select it in Solution Explorer and press the Delete key. Visual Studio will ask if you really want to delete the page (as it will be deleted permanently). Click Yes.

3.    Create a master page for the Web site. Click the right mouse button on the project node in the solution and select Add New Item. Choose Master Page from the templates. The default name will be fi ne. Click Add.

4.    Add several pages based on the master page. The example here uses four—a Default page, a products page, a support page, and a contact page. For each page you add, click the right mouse button on the project and select Add New Item. Choose Web Page from the templates. Make sure the Select Master Page check box is checked as you select the template (so the master page will be applied automatically). Populate the pages with some content so you know what you’re looking at when you run the site (simple text placed directly on the page will be fi ne).

5.    Add a new site map to the project. Click the right mouse button on the project within the solution explorer. Select Site Map from the templates. Keep the name Web.sitemap. The following graphic shows the Visual Studio templates with the site navigation template highlighted:

 6.    Add the following data to the site map (you can change the URLs if the names of the page files are different). Simply edit (or overwrite) the two blank nodes Visual Studio inserted for you:

<?xml version=”1.0″ encoding=”utf-8″ ?>

<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0&#8243; >

     <siteMapNode url=”” title=”Navigation Menu” description=””>

<siteMapNode url=”Default.aspx” title=”Home” description=”This is the home page” />

<siteMapNode url=”Products.aspx” title=”Products” description=”This is the products page” />

<siteMapNode url=”Support.aspx” title=”Support” description=”This is the support page” />

<siteMapNode url=”Contact.aspx” title=”Contacts” description=”This is the contacts page” />

     </siteMapNode>

</siteMap>

7.    To see how the site map data work with the site, add some navigation controls to the master page. Start by adding a Menu. Go to the toolbox and pick up a Menu control and drop it onto the master page. When adding the Menu, one of the tasks you can perform is to set the data source. Select New Data Source. . . from the Menu Tasks window. Set the Menu’s data source to the default site map file and click OK. The following graphic shows how to select a site map data source for the Menu control:

 

8.    Run the site so that you can see the Menu in action. Select some pages from the Menuand notice that the selections navigate you to the correct places.

9.    Next add a TreeView to the master page. Pick one up from the Toolbox and place it on the master page. Point the TreeView to the default site map data source. Run the application and see what happens.

10. Now add a SiteMapPath control to the master page. Apply the XML site map data source to the DataSource property of the SiteMapPath control.

11. Now add two more pages to the project in order to display two ways to contact the business running this site—perhaps one for displaying the physical address of a business and the other for displaying other contact information such as e-mail addresses and phone numbers. First, create two new folders—one for each page. Name the folders ContactAddress and ContactEmailPhone. Add the new pages—one per folder. Name the pages ContactAddress.aspx and ContactEmailPhone.aspx. Be sure to have these pages use the master page. Add labels or text as before describing the page to each of these pages so you may identify them as the Web application runs.

12. Now add two more elements to the site map XML fi le (web.sitemap) to reflect these new pages. Nest them so their parent node is the Contact node.

<?xml version=”1.0″ encoding=”utf-8″ ?>

<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0&#8243; >

     <siteMapNode url=”” title=”Navigation Menu” description=””>

      <siteMapNode url=”Default.aspx” title=”Home” description=”This is the home page” />

      <siteMapNode url=”Products.aspx” title=”Products” description=”This is the products page” />

      <siteMapNode url=”Support.aspx” title=”Support” description=”This is the support page”

        ImageURL=”supportimage.jpg”/>

         <siteMapNode url=”Contact.aspx” title=”Contacts” description=”This is the contacts page” >

 <siteMapNode url=”~/ContactAddress/ContactAddress.aspx” title=”Contact using physical address”    description=”This is the first contact page” />

<siteMapNode url=”!/ContactPhone/ContactEmailPhone.aspx” title=”Contact by email or phone”

 description=”This is the second contact page” />

         </siteMapNode>

</siteMapNode>

</siteMap>

13. Now run the Web site and see what effect the changes have had. You should see new navigation options appear in the Menu and the TreeView, and the new pages should also be reflected in the SiteMapPath control.

14. Experiment with the SiteMapDataSource properties to see how the Menu and TreeView are affected. For example, SiteMapDataSource.ShowStartingNode turns off the root node (often the “home” page node). SiteMapDataSource.StartFromCurrentNode determines the hierarchical position at which the data source begins producing data.

15. Experiment with the Menu properties to see how the Menu is affected. For example, the Menu.StaticDisplayLevels and MaximumDynamicDisplayLevels determine how much of the data from SiteMapDataSource the Menu displays.

16. Notice how easy it is to add navigation capability to your Web site. By using the site map fi le (and underlying provider-based architecture), you limit the number of places you need to modify to update site navigation.

Conclusion

In this article we examined the basics of the site navigation, which involves two steps: defining the site’s structure using a site map and implementing the site map through the use of navigation controls. Fortunately, ASP.NET 2.0 makes both of these processes very simple.

While we’ve covered the basics of the site map, we’ve still yet to explore more advanced functionality. For example, using ASP.NET 2.0’s roles feature, you can limit the site’s sections so that the sections displayed in the navigation controls are dependent upon the visiting user’s role and the roles defined for the section in the site map file. Additionally, the site map includes properties to support localization, making it easy to have section titles and descriptions unique for each language supported by your site. These, as well as a look at how to create a custom site navigation provider, are all topics we’ll cover in future articles!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: