How to create breadcrumbs in ASP.Net/C# OR Show Navigations for each pages in ASP.Net/C# OR How to implement Sitemap in ASP.Net

DOWNLOAD SOURCE CODE FOR BREADCRUMB EXAMPLE IN ASP.NET

What is breadcrumbs and what is the use of it?

Breadcrumbs typically appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or-in hierarchical site structures-the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs <http://en.wikipedia.org/wiki/Glyph>  (such as » or >), as well as various graphical treatments.

Typical breadcrumbs look like this:

 Home page > Section page > Subsection page

How to implement breadcrumbs in ASP.Net/C# pages

In order to implement breadcrumbs in ASPX pages, we can use new pages called sitemaps. In ASP.NET the menu can be stored in a file to make it easier to maintain. This file is normally calledweb.sitemap, and is stored in the root directory of the web.

BREADCRUMB EXAMPLE IN ASP.NET

Example for implementing sitemaps in ASP.Net/C# pages

We are going to demonstrate sample ASP.Net application for implementing Breadcrumbs in ASPX pages. First of all create a new ASP.Net project and create three pages home.aspx, aboutus.aspx  and contactus.aspx.  Then create a sitemap file by “Add New item > SiteMap” and mention the hierarchy of the pages in the sitemaps as follows

<?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 Page">
    <siteMapNode url="ContactUs.aspx" title="Contact US" 
                 description="Contact US Page" />
    <siteMapNode url="About.aspx" title="About"  description="About " >
      <siteMapNode url="AboutCompany.aspx" title="About Company" 
                   description="About Our Company" />
      <siteMapNode url="AboutService.aspx" title="About Service" 
                   description="About Our Services" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

Once we created sitemap and mentioned the hierarchy of the pages we need to map this sitemaps into all pages that we need to show navigation as follows.

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    <asp:SiteMapPath ID="SiteMap1" runat="server">
    </asp:SiteMapPath>

Sample Application of Navigation Menu/Bread Crumbs  

web.sitemap

<?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 Page">
    <siteMapNode url="ContactUs.aspx" title="Contact US" 
                 description="Contact US Page" />
    <siteMapNode url="About.aspx" title="About"  description="About " >
      <siteMapNode url="AboutCompany.aspx" title="About Company" 
                   description="About Our Company" />
      <siteMapNode url="AboutService.aspx" title="About Service" 
                   description="About Our Services" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

 About.aspx

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="About.aspx.cs" Inherits="BreadCrumb.About" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    <asp:SiteMapPath ID="SiteMap1" runat="server">
    </asp:SiteMapPath>
    <h2>
        Welcome TO About US Page
    </h2>
    <br />
    <a href="AboutCompany.aspx" runat="server">About Our Company</a>
    <br />
    <a id="A1" href="AboutService.aspx" runat="server">About Our Services</a>
</asp:Content>

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="BreadCrumb._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:SiteMapPath ID="SiteMap1" runat="server">
    </asp:SiteMapPath>
    <h2>
        Welcome to HOME PAGE
    </h2> 
</asp:Content>

 

 

AboutCompany.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="AboutCompany.aspx.cs" Inherits="BreadCrumb.AboutCompany" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    <asp:SiteMapPath ID="SiteMap1" runat="server">
    </asp:SiteMapPath>
    <h2>
        This is the Page showing about our Company
    </h2>
</asp:Content>

AboutService.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="AboutService.aspx.cs" Inherits="BreadCrumb.AboutService" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    <asp:SiteMapPath ID="SiteMap1" runat="server">
    </asp:SiteMapPath>
    <h2>
        This is the Page showing about our Service
    </h2>
</asp:Content>
-


            DOWNLOAD SOURCE CODE FOR BREADCRUMB EXAMPLE IN ASP.NET

Advertisements