In my previous tutorials, I’d explained asp.net menu control example, how to show alert message from code-behind, how to call javascript function from code-behind and more cracking tutorials on Asp.net, JavaScript and jQuery here.
Now here in this tutorial, I’ll explain how you can use asp.net sitemappath navigation control in web pages with example demo code.
Asp.net SiteMapPath Navigation Control feature provides a consistent way for your website users to navigate your website. It also let you know the current location or path of the webpage, that visible path acts as clickable links to previous pages. If you want to use sitemap control in your website, then follow these easy steps.
Note: If you have existing project or website, ignore first two steps.
- Create new website or project
- To test example, create one .master page plus four or five .aspx pages. Here I’m using Default.aspx, HTML.aspx, HtmlTagList.aspx, CSS.aspx, CssSelectors.aspx these 5 pages inherited by Site.master page for this demo but you can use as many as you want to show up in breadcrumb or site-navigation
- Now add the sitemap by right clicking on your project or website > Add New Item > SiteMap > OK
- Give name as Web.sitemap
Once Web.sitemap file is added to your project or website, then open sitemap and write the following code:
<siteMap xmlns=“http://schemas.microsoft.com/AspNet/SiteMap-File-1.0“ >
<siteMapNode url=“Default.aspx” title=“Home“description=“Home“>
<siteMapNode url=“HTML.aspx” title=“HTML“description=“HTML“>
<siteMapNode url=“HtmlTagList.aspx” title=“HtmlTagList” description=“HtmlTagList“ />
</siteMapNode>
<siteMapNode url=“CSS.aspx” title=“CSS“description=“CSS“>
<siteMapNode url=“CssSelectors.aspx” title=“CssSelectors” description=“CssSelectors“ />
</siteMapNode>
</siteMapNode>
</siteMap>
From above sitemap, I added HTML.aspx and CSS.aspx pages under Default.aspx page and likewise added HtmlTagList.aspx under HTML.aspx page and CssSelectors.aspx under CSS.aspx page as per demo sitemap requirements.
If you open HtmlTagList.aspx page, you’ll see sitemap like this:
Here first two links (that is “Home” and “HTML”) are clickable to navigate to the specific page, whereas “HtmlTagList” is the current active page.
Likewise, If you open CssSelectors.aspx page, you’ll see sitemap like this:
Here first two links (that is “Home” and “CSS”) are clickable to navigate to the specific page, whereas “CssSelectors” is the current active page.
BreadCrumb: Asp.net SiteMapPath Navigation Control – [.master]
Here is the code for SiteMapPath control that I used in .master page:
<head id=”Head1″ runat=”server”>
<title></title>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>
</head>
<body style=”width: 600px; margin: 20px auto; border: 1px solid #222;”>
<form id=”form1″ runat=”server”>
<div style=”width: 30%; margin: 20px auto;”>
<asp:Menu ID=”Menu1″ runat=”server” Orientation=”Horizontal”>
<Items>
<asp:MenuItem Text=”HOME” NavigateUrl=”~/Default.aspx” Selected=”true” />
<asp:MenuItem Text=”HTML” NavigateUrl=”~/HTML.aspx”>
<asp:MenuItem Text=”HtmlTagList” NavigateUrl=”~/HtmlTagList.aspx” />
</asp:MenuItem>
<asp:MenuItem Text=”CSS” NavigateUrl=”~/CSS.aspx”>
<asp:MenuItem Text=”CssSelectors” NavigateUrl=”~/CssSelectors.aspx” />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
<div style=”width: 90%; height: 300px; margin: 10px auto;”>
<hr />
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Now add the following two lines on each of your webpage.
<asp:SiteMapPath ID=”SiteMap1″ runat=”server” />
BreadCrumb: Asp.net SiteMapPath Navigation Control – [.aspx]
For example, here is my Default.aspx page which includes asp.net sitemappath navigation control:
CodeBehind=”Default.aspx.vb” Inherits=”SiteMapPathExample._Default” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”server”>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”server”>
<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” />
<asp:SiteMapPath ID=”SiteMap1″ runat=”server” />
<h4>
Home Page Content</h4>
</asp:Content>
Example Result
we have follow your steps but still i cannot get navigation path .