ASP.NET 2.0 - Navigation (Navigation)

ASP.NET 2.0 has built-in navigation controls.

Website Navigation

Maintaining the navigation menu of a large site is difficult and time-consuming.

In ASP.NET 2.0, menus can be stored in a file, making maintenance more convenient. This file is usually named web.sitemapstored in the root directory of the website.

In addition, ASP.NET 2.0 has three new navigation controls:

  • Dynamic menus
  • TreeViews
  • Site Map Path

Sitemap File

This tutorial uses the following sitemap file (site map):

<?xml version="1.0" encoding="ISO-8859-1" ?>
<siteMap>
  <siteMapNode title="Home" url="/aspnet/w3home.aspx">
  <siteMapNode title="Services" url="/aspnet/w3services.aspx">
    <siteMapNode title="Training" url="/aspnet/w3training.aspx"/>
    <siteMapNode title="Support" url="/aspnet/w3support.aspx"/>
  </siteMapNode>
  </siteMapNode>
</siteMap>

Rules for creating sitemap files:

  • The XML file must contain the <siteMap> tags surrounding the content
  • The <siteMap> tag can only have one <siteMapNode> child node ("home" page)
  • Each <siteMapNode> can have multiple child nodes (web pages)
  • Each <siteMapNode> has properties to define the page title and URL

Note:The sitemap file must be stored in the root directory of the site, and the URL attribute must be relative to this root directory.

Dynamic Menu

The <asp:Menu> control can display a standard site navigation menu.

Code Example:

<asp:SiteMapDataSource id="nav1" runat="server" />
<form runat="server">
<asp:Menu runat="server" DataSourceId="nav1" />
</form>

In the above example <asp:Menu> ControlIt is a placeholder for the server to create a navigation menu.

The data source of the control is DataSourceId Propertyfor definition.id="nav1" connect it to <asp:SiteMapDataSource> Control.

<asp:SiteMapDataSource> Controlwill automatically connect to the default sitemap file(web.sitemap)。

Click here to view the DEMO of Menu.

TreeView

The <asp:TreeView> control can display multi-level navigation menus.

This menu looks like a tree with branches and leaves, which can be opened or closed by the + or - symbols.

Code Example:

<asp:SiteMapDataSource id="nav1" runat="server" />
<form runat="server">
<asp:TreeView runat="server" DataSourceId="nav1" />
</form>

In the above example, <asp:TreeView> ControlIt is a placeholder for the server to create a navigation menu.

The data source of the control is DataSourceId Propertyfor definition.id="nav1" connect it to <asp:SiteMapDataSource> Control.

<asp:SiteMapDataSource> Controlwill automatically connect to the default sitemap file(web.sitemap)。

Click here to view the DEMO of TreeView.

SiteMapPath

The SiteMapPath control can display a pointer to the current page (navigation path). This path is displayed as a clickable link pointing to the parent page.

Different from TreeView and Menu controls, the SiteMapPath controlNot Using SiteMapDataSource. The SiteMapPath control defaults to the web.sitemap file.

Tip:If SiteMapPath does not display correctly, it is likely due to URL errors in the web.sitemap file.

Code Example:

<form runat="server">
<asp:SiteMapPath runat="server" />
</form>

In the above example, <asp:SiteMapPath> ControlIt is a placeholder for the server to create a navigation menu.

Click here to view the DEMO of SiteMapPath.