ASP.NET Web Forms - Navigation

ASP.NET has built-in navigation controls.

Website Navigation

Maintaining menus for large websites is difficult and time-consuming.

In ASP.NET, menus can be stored in files, making them easy to maintain. The file is usually namedweb.sitemap, and is placed in the root directory of the website.

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

  • Dynamic menus
  • TreeViews
  • Site Map Path

Sitemap Files

In this tutorial, the following sitemap file is used:

<?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 a sitemap file:

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

lampNote:The sitemap file must be located in the site root directory, and the URL attributes must be relative to that root directory.

Dynamic Menus

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 example above, the<asp:Menu>control is a placeholder for the server to create a navigation menu.

The data source of the control is defined by theDataSourceIdattribute.id="nav1"Connect the data source to the<asp:SiteMapDataSource>control.

<asp:SiteMapDataSource>The control automatically connects to the default sitemap file (web.sitemap）。

TreeView

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

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

Code example:

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

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

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

The data source of the control is defined by theDataSourceIdattribute.id="nav1"Connect the data source to the<asp:SiteMapDataSource>control.

<asp:SiteMapDataSource>The control automatically connects to the default sitemap file (web.sitemap）。

SiteMapPath

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

Unlike the TreeView and Menu controls, the SiteMapPath controldoes not useSiteMapDataSource. The SiteMapPath control uses the web.sitemap file by default.

lampTip: If SiteMapPath does not display correctly, it may be due to URL errors (typos) in the web.sitemap file.

Code example:

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

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

Other Extensions