Introduction:
In this article I will explain how to use sitemappath navigation control or create breadcrumb for web application with example in asp.net.
In this article I will explain how to use sitemappath navigation control or create breadcrumb for web application with example in asp.net.
Description:
In
previous post I explained how to pass table as parameter to stored procedure, Add Fade in effect to webpage using JQuery and many
articles relating to asp.net,
JQuery,
Ajax
etc. Now I will explain how to use sitemap navigation control or how to
implement breadcrumb in asp.net.
Sitemap
navigation is a control which allows users to know the current page location
with respect to home page. To implement this concept
First
create one new web application >>
Right click on application and select Add New Item >> Select Web Form >>
Give name as Careers.aspx >>
Click OK
Similar
way you can add two more pages and give names as Jobs.aspx and ContactUs.aspx
page
Once
pages added to website >>
Right click on website and select Add New Item >> Select SiteMap >> Click OK
Once
SiteMAP added to website 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 Page">
<siteMapNode url="Careers.aspx" title="Careers" description="Careers Page" >
<siteMapNode url="Jobs.aspx" title="Jobs" description="Jobs Page" />
</siteMapNode>
<siteMapNode url="ContactUs.aspx" title="Contact" description="ContacUs Page" />
</siteMapNode>
</siteMap>
|
If you observe above sitemap I added Career.aspx
page and ContactUs.aspx pages under Default.aspx page and I added
Jobs.aspx under Career.aspx page.
Now if we open Jobs.aspx page
we will get sitemap like this
Home >> Careers >> Jobs
For example if we open ContactUs.aspx
page we will get sitemap like this
Home >> Contact
Now write the following code in all
aspx pages (Default.aspx, Career.aspx, Jobs.aspx and ContactUs.aspx)
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Site Navigation or BreadCrumb Example in asp.net</title>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
/>
<asp:SiteMapPath ID="SiteMap1"
runat="server"></asp:SiteMapPath>
</div>
</form>
</body>
</html>
|
After completion of add above code in all pages open Jobs.aspx and run you will find site
navigation like this
 |
If you open ContactUs.aspx page
you will find site navigation output like this
 |
Download Sample Code Attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
9 comments :
Nice one!!!
+
To stop showing the root node add this in sitemappath --> ShowStartingNode="False"
easy way learning of the asp.net
Hi,
Great article.
Thanx..
But how to implement category ,sub category in e-commerce application
Is it possible to create a horizontal menu using the below sitemap file? The menu should display.....
home menu1 menu2 menu3 menu4>menusub1 etc.......
The problem with the current sitemap is that everything is under the top "Home" node. and i also set orientation=horizontal but still not getting.....i know this problem is nothing but annoying me....please help
Is it possible to create a horizontal menu using the below sitemap file? The menu should display.....
home menu1 menu2 menu3 menu4>menusub1 etc.......
?xml version="1.0" encoding="utf-8" ?>
The problem with the current sitemap is that everything is under the top "Home" node. and i also set orientation=horizontal but still not getting.....i know this problem is nothing but annoying me....please help
Is it possible to create a horizontal menu using the below sitemap file? The menu should display.....
home menu1 menu2 menu3 menu4>menusub1 etc....
The problem with the current sitemap is that everything is under the top "Home" node. and i also set orientation=horizontal but still not getting.....i know this problem is nothing but annoying me....please help
thanks