Skip to main content

Bread Crumbs in ASP.NET 2.0

Introduction:

Bread Crumbs are not considered a good appetizer but it is a valuable feature introduced in ASP.NET 2.0. Bread Crumbs allows you to view your current location in the website. This means if you are in the horror movies section of the website then it will indicate that you are indeed in the horror movies section by presenting the hierarchical view of your position. By using Bread Crumbs you can navigate back and forth in the categories. In this article I will demonstrate that how you can use a Bread Crumb in your web application.

Understanding the Scenario:

Let's first understand the scenario before talking about the implementation of the application. Suppose you are building a website that will contain information about movies and books. Each of the category can have sub categories. Movies can be comedy or horror and books can be fiction or horror. In your application you might have different folders for each of the category. Take a look at the screen shot below which shows the folders layout for the application.

As, you can see that the books folder (Books) contains the fiction and horror folders. Similarly the Movies folder contains the comedy and horror folder and each of the category has its own web form. This hierarchy is reflected in the Web.sitemap file.

Web.SiteMap File:

Take a look at the Web.sitemap file which shows the hierarchy of the files and folders.

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/Fiction/FictionBooks.aspx" title="Fiction" />

<siteMapNode url="~/Books/Horror/HorrorBooks.aspx" title="Horror" />

siteMapNode>

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

<siteMapNode url="~/Movies/Comedy/ComedyMovies.aspx" title="Comedy Movies" />

<siteMapNode url="~/Movies/Horror/HorrorMovies.aspx" title="Horror Movies" />

siteMapNode>

siteMapNode>

siteMap>

Once, you have the sitemap file ready you need to create a navigation system for the user. ASP.NET 2.0 provides three new navigation controls namely TreeView, Menu and SiteMapPath. The SiteMapPath navigation works in a different way since you need to be on the page in order to see the previous pages. I will use the TreeView in this article and populate it using the Web.sitemap file.

Populating the TreeView Control with Web.SiteMap:

Since, the navigation will be displayed on most of the pages of the application it is a good idea to place it inside the Master Page. Take a look at the code below which shows how to populate the TreeView control with the data from the Web.sitemap.

<asp:TreeView ID="tvMenu" DataSourceID="SiteMapDataSource1" runat="server" BackColor="PeachPuff" BorderColor="#C0C000" ImageSet="Arrows">

<ParentNodeStyle Font-Bold="False" />

<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />

<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"

VerticalPadding="0px" />

<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"

NodeSpacing="0px" VerticalPadding="0px" />

asp:TreeView>

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

Displaying the Bread Crumbs Using SiteMapPath Control:

Finally, we need to display the Bread Crumbs on the page. Displaying Bread Crumbs is pretty simple if you use the SiteMapPath control. Simply, place a SiteMapPath control on the master page and set its properties as follows:

<asp:SiteMapPath ID="SiteMapPath1" runat="server">

<RootNodeTemplate>

<asp:HyperLink ID="hlRoot" runat="server" Text='<%# Eval("title") %>' NavigateUrl='<%# Eval("url") %>' />

RootNodeTemplate>

<CurrentNodeTemplate>

<asp:HyperLink ID="hlCurrentNodeTemplate" runat="server" Text='<%# Eval("title") %>' NavigateUrl='<%# Eval("url") %>' />

CurrentNodeTemplate>

asp:SiteMapPath>

There are different types of templates available for the SiteMapPath control. I have demonstrated the RootNodeTemplate and the CurrentNodeTemplate. The RootNodeTemplate allows you to define the root of the Bread Crumb and the CurrentNodeTemplate allows you to define the currently active node of the Bread Crumb.

Take a look at the effect of the Bread Crumbs in the screen shots below:

Comments

Post a Comment

Popular posts from this blog

Athouk & Mohinga

Atho or Athouk . These consist of boiled noodles cooked with spices, shredded cabbage, onions, chili flakes, roasted channa dal powder, tamarind juice, bejo, garlic oil, coriander leaves and etc are the ingredients of Athouk. To give the dish a crunchy feel. This food also eaten with the accompaniment of Mohinga,a soup made with fish broth & plantain stem, onion, ginger, garlic, chili, turmeric and rice flour. It is an awesome combination. Mohinga , which is considered the unofficial Burmese national food. It is essentially rice noodles served in fish broth with fried onions, garlic, ginger and sliced tender core of plantain stem. If you ask for it, it will also be served with boiled eggs. It is essentially a soup meal and a delightful one at that. History: Many Tamils were settled in Burma then and slowly emigrated back here after Independence.Burmese people started migrating to India. Most of them arrived at the Chennai Port and used to leave for other smaller cities by
3 comments
Read more

World Environment Day

This entry is in response to the Conserve, Recycle and Discover contest organised by blogadda.com in association with Pringoo ! World Environment Day, commemorated on 5 June since 1972, is one of the ways focuses world attention on the environment and encourages political action. People from countries all over the world have mobilized for individual and organized environmental action. Activities involve all sectors of society, governments, non- and inter-governmental organizations, businesses, industries, civil society, media and schools. Please take the following Pledge to save our environment. 1, I pledge to Recycle more, use less water and electricity. 2, I pledge to smoke less in 2010. 3, I pledge to send more electronic documents instead of using paper. 4, I pledge to continue using my bicycle to go to work (instead of my motorbike). 5, wash with full loads it is more energy efficient than doing several smaller ones. 6, Incite of dryer I will use hang dry for energy sav
1 comment
Read more

GridView Alphabet Paging

Introduction: GridView paging feature allow us to display fixed number of records on the page and browse to the next page of records. Although paging is a great feature but sometimes we need to view all the items alphabetically. The idea behind this article is to provide a user with a list of all the alphabets and when the user clicks on a certain alphabet then all the records starting with that alphabet will be populated in the GridView control. Populating the GridView Control: The first task is to populate the GridView control. I will be using the Northwind database in my article which, is installed by default for SQL SERVER 2000 and SQL SERVER 7 databases. The code below is used to populate the GridView control. private void BindData() { string connectionString = "Server=localhost;Database=Northwind;Trusted_Connection=true"; SqlConnection myConnection = new SqlConnection(connectionString); SqlDataAdapter ad = new SqlDataAdapter("SELECT P
1 comment
Read more