Bread Crumbs in ASP.NET 2.0

ASP.NET 2.0 provides a great feature of creating Bread Crumbs. Bread Crumbs appears as links or images and shows the user his current position in the website. This means if you are in horror books section under books so you can see a link something like:

Home -> Books -> Horror Books

Creating the Bread Crumbs is also very easy. All you need to do is to set up your Web.sitemap file correctly and use the SiteMapPath control to display the Bread Crumbs. It is wise to use the SiteMapPath control in a master page so that you can display the path in all the pages that inherit from the master page.

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="">
    <siteMapNode url="~/Books/Default.aspx" title="Books"  description="">
      <siteMapNode url="~/Books/RomanceBooks.aspx" title="Romance Books" />
      <siteMapNode url="~/Books/HorrorBooks.aspx" title="Horror Books" />   
    </siteMapNode>

    <siteMapNode url="~/Movies/Default.aspx" title="Movies">    
     
    </siteMapNode>
   
   
    </siteMapNode>
</siteMap>

Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
               
          <asp:SiteMapPath ID="SiteMapPath1" runat="server">
         
          <RootNodeTemplate>
         
          <asp:HyperLink ID="HyperLink1" runat="server"
          Text='<%# Eval("title") %>' NavigateUrl='<%# Eval("url") %>' />
         
          </RootNodeTemplate>
                   
          <NodeTemplate>
            <asp:HyperLink ID="HyperLink2" runat="server"
            Text='<%# Eval("title") %>' NavigateUrl='<%# Eval("url") %>' />
          </NodeTemplate>
         
          </asp:SiteMapPath>
               
        </asp:contentplaceholder>
       
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
       
        </asp:ContentPlaceHolder>
       
       
       
    </div>
    </form>
</body>
</html>

And that is pretty much it. Now, you will see a Bread Crumb displayed on your ASP.NET pages that inherit from the master page.

powered by IMHO 1.3

Print | posted @ Wednesday, August 16, 2006 10:07 PM

Twitter