Home Asp.net BreadCrumb: Asp.net SiteMapPath Navigation Control Example

BreadCrumb: Asp.net SiteMapPath Navigation Control Example

49
1
BreadCrumb Example: Asp.net SiteMapPath Navigation Control Example
BreadCrumb Example: Asp.net SiteMapPath Navigation Control Example

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:

<?xml version="1.0" encoding="utf-8" ?>
<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:

Home > HTML > HtmlTagList

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:

Home > CSS > CssSelectors

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:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>BreadCrumb Example</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:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<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 in vb.net page:

<%@ Page Title="Home" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"
    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

BreadCrumb Example: Asp.net SiteMapPath Navigation Control Example
BreadCrumb Example: Asp.net SiteMapPath Navigation Control Example

Download Example

Previous articleDropDownList Country-State-City Cascading using Ajax
Next articleAsp.Net Menu Control Example
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

1 × three =