5

My folder hierarchy for the pages are (They are all in the same folder):

Site.Master
Default.aspx
find_provider.aspx
provider.aspx

I have a Web.sitemap page set up:

<?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="Homepage">
        <siteMapNode url="~/find_provider.aspx" title="Provider" description="Search for provider">
            <siteMapNode url="~/provider.aspx" title="Profile" description="Shows each provider profile" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

I am calling in my MasterPage:

<div id="navigation">
    <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>

        <asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
            <ItemTemplate>
                <li>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>

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

So Default.aspx is my landing page. User can click on find_provider.aspx to search for a provider of their choice. For each provider search result, the user can click on PROFILE link to view information for each individual provider, which is the provider.aspx page.

So:

  • If I am on the home page my breadcrumb should be: Home
  • If I am on the find a provider page my breadcrumb should be: Home Provider
  • If I am on the profile page my breadcrumb should be: Home Provider Profile

Instead, I see this on my page (no matter what page I am in):

Please help me modify the code so that breadcrumb is shown for each sitenode and subsitenode.

Sample of what I want to achieve:

HTML:

<div class="bcHolder brClear"> <!-- BC MAIN -->
    <div class="innerBreadCrumb"> <!-- INNER BC -->
        <ul id="breadcrumb">
            <li><a href="default.aspx" title="Home"><img src="theImages/homeIcon.gif" alt="Home" title="Home" class="home" /></a></li>
            <li id="bc_fp"><a href="find_provider.aspx" title="Find a Provider">Find a Provider</a></li>
            <!--<li>{ON THE CURRENT PAGE TEXT/URL</li>-->
        </ul>
    </div> <!-- INNER BC -->
</div> <!-- BC MAIN -->

Output:

enter image description here

Si8
  • 9,141
  • 22
  • 109
  • 221
  • 1
    This is actually not that difficult and here is a tutorial on how to do this.. I personally have created my own using MasterPage and tracked what page I was on + what Page I had navigated to all code was done at the MasterPage Level ..there are many ways to skin this cat.. [Asp.NET BreadCrub](http://www.codeproject.com/Articles/4836/Breadcrumbs-in-ASP-NET) – MethodMan Nov 12 '14 at 17:21
  • Thanks. I already checked out the page. Customization is very limited. I am looking to do it like the way I show in my question (updated it) – Si8 Nov 12 '14 at 17:36
  • 1
    you can create a label on the master page and from there like i've stated earlier show it that way all from the masterpage. you will need to write 1 or 2 methods to do it as well as some Switch case statements to check the current page name I have something like this working already I will look to post what I can to help get you started.. – MethodMan Nov 12 '14 at 17:39
  • I had something like that using JQuery but the third node gets complicated and if I have lot of pages then it becomes very cumbersome to manage. But sure I will take a look at yours :) – Si8 Nov 12 '14 at 17:43

2 Answers2

4

In reference to your question here: How to use Bootstrap style of BreadCrumb with my ASP.NET menu?

The SiteMapPath acts as the <ul/> tag in the HTML rendering. So to use the method there, your structure would likely be something like this:

<div class="bcHolder brClear"> <!-- BC MAIN -->
    <div class="innerBreadCrumb"> <!-- INNER BC -->
        <asp:SiteMapPath ID="SiteMap1" 
        runat="server"
        PathSeparator=" / " 
        ParentLevelsDisplayed="1" 
        PathDirection="RootToCurrent"
        ShowToolTips="true">
        <CurrentNodeStyle CssClass="current-node"></CurrentNodeStyle>
        <NodeTemplate>
            <li><a href="default.aspx" title="Home"><img src="theImages/homeIcon.gif" alt="Home" title="Home" class="home" /></a></li>
            <li id="bc_fp"><a href="find_provider.aspx" title="Find a Provider">Find a Provider</a></li>
            <!--<li>{ON THE CURRENT PAGE TEXT/URL</li>-->
            </NodeTemplate>
        </asp:SiteMapPath>
    </div> <!-- INNER BC -->
</div> <!-- BC MAIN -->

And then add the javascript you need to resolve the hyperlink of CurrentNode.

Hope this helps.

Community
  • 1
  • 1
nallan
  • 93
  • 2
  • 5
1

This currently works for me.. I have lots more code in my Page_Load but this is the important piece

in my current MasterPages Pre-Render Event I have a method called

 protected void Page_PreRender(object sender, EventArgs e)
 {
     SetNavigationLabel();
 }

Then I setup this inside of the Page_Load()

protected void Page_Load(object sender, EventArgs e)
{   
    var pageUrl = GetCurrentPageName();
}

private void SetNavigationLabel()
{
    RadMenu NavigationMenu = (RadMenu)this.FindControl("RadMenu1");
    foreach (RadMenuItem m in NavigationMenu.Items)
    {
        if (Request.Url.AbsoluteUri.ToLower() == Server.MapPath(Request.Url.AbsolutePath.ToLower()) || m.Selected)
        {
            string sPagePath = System.Web.HttpContext.Current.Request.Url.AbsolutePath;
            System.IO.FileInfo oFileInfo = new System.IO.FileInfo(sPagePath);
            string sPageName = "~/" + oFileInfo.Name;
            oFileInfo = null;
            var navName1 = NavigationMenu.FindItemByUrl(Request.RawUrl);
            var navName = navName1.Text;
            lblNavTitle.Text = navName;
            ((IDisposable)NavigationMenu).Dispose();
            break;
        }
    }
}

public string GetCurrentPageName()
{
     var sPath = System.Web.HttpContext.Current.Request.Url.AbsolutePath;
     FileInfo oInfo = new FileInfo(sPath);
     var sReturn = oInfo.Name;
     oInfo = null;
     return sReturn;
}
MethodMan
  • 18,625
  • 6
  • 34
  • 52
  • Thanks! What is a RadMenu? – Si8 Nov 12 '14 at 17:57
  • 1
    oh that's from Telerik you can ignore that.. sorry about that if you are using menus use that menu's control in place of where i use Telerik – MethodMan Nov 12 '14 at 17:58
  • So if I want to add an LI for each page link to an UL like in my question, I can find that control and add it? The look&feel is being done all using CSS. I just have to add the controls. – Si8 Nov 12 '14 at 17:59
  • 1
    in theory that should work if it's a control I am use to doing it with menu items.. hope this helps in regards to giving you some ideas – MethodMan Nov 12 '14 at 18:01
  • 1
    Definitely will help me along. Thank you :) – Si8 Nov 12 '14 at 18:03
  • I used a much simpler approach and used the same CSS. Thanks. – Si8 Nov 12 '14 at 20:44
  • Glad I could help lead you to the idea of your approach I would be interested in seeing what you did in your original post and or answer so that this may help others that may run into the same issue.. glad I could help out – MethodMan Nov 13 '14 at 15:26