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:
<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>
- 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: 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:
< 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:
< 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.
Tip: 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:
<asp:SiteMapPath runat="server" />
</form>
The <asp:SiteMapPath> control in the above example is a placeholder for the server to create a navigation menu.