Web Pages Tutor...login
Web Pages Tutorial
author:php.cn  update time:2022-04-11 14:20:28

Web Forms Navigation



ASP.NET comes with 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 easier to maintain. The file is usually named web.sitemap and is stored in the root directory of the website.

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

  • Dynamic menus
  • TreeViews
  • Site Map Path

Sitemap file

In this tutorial, use the following sitemap file:

##<?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 <siteMap> tags surrounding the content
  • <siteMap> tag can only have one <siteMapNode> child node ("home" page)
  • Each <siteMapNode> can have multiple child nodes (web pages)
  • Each <siteMapNode> has properties that define the page title and URL

Notes: lamp.gif The sitemap file must be located in the site root directory and the URL properties must be relative in the root directory.


Dynamic Menu

<asp:Menu> control displays a standard site navigation menu.

Code example:

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

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

The <asp:Menu> control in the above example is a placeholder for the server to create a navigation menu.

The data source of the control is defined by the DataSourceId property. 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

<asp:TreeView> control can display a multi-level navigation menu.

This menu looks like a tree with branches and leaves, and can be opened or closed with 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> The control is a placeholder for the server to create a navigation menu.

The data source of the control is defined by the DataSourceId property. 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 displays a pointer (navigation path) to the current page. The path appears as a clickable link to the parent page.

Unlike the TreeView and Menu controls, the SiteMapPath control does not use a SiteMapDataSource. The SiteMapPath control uses the web.sitemap file by default.

lamp.gifTip: If the SiteMapPath does not display correctly, it is most likely due to a URL error (printing error) in the web.sitemap file.

Code example:

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

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