如何在 ASP.net 页面中设置面包屑导航

Posted 2023-03-31

【中文标题】如何在 ASP.net 页面中设置面包屑导航

【英文标题】：How to set up a breadcrumb in an ASP.net page

【发布时间】：2015-01-09 15:15:40

【问题描述】：

我的页面文件夹层次结构是（它们都在同一个文件夹中）：

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

我设置了一个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="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>

我正在调用我的 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>

所以Default.aspx 是我的登陆页面。用户可以点击find_provider.aspx 搜索他们选择的提供商。对于每个供应商的搜索结果，用户可以点击 PROFILE 链接来查看每个供应商的信息，即provider.aspx 页面。

所以：

如果我在主页上，我的面包屑应该是：Home 如果我在查找提供商页面上，我的面包屑应该是：Home Provider 如果我在个人资料页面上，我的面包屑应该是：Home Provider Profile

相反，我在我的页面上看到了这个（无论我在哪个页面）：

请帮我修改代码，以便为每个站点节点和子站点节点显示面包屑。

我想要实现的示例：

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"  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 -->

输出：

【问题讨论】：

这实际上并不难，这里有一个关于如何做到这一点的教程。我个人使用 MasterPage 创建了我自己的页面，并跟踪了我所在的页面 + 我导航到所有代码的页面是在 MasterPage 级别完成的..有很多方法可以给这只猫剥皮..Asp.NET BreadCrub

谢谢。我已经检查了页面。定制非常有限。我希望按照我在问题中显示的方式进行操作（已更新）

您可以在母版页上创建一个标签，然后像我之前所说的那样从母版页中以这种方式显示它。您将需要编写 1 或 2 个方法来执行此操作以及一些 Switch case 语句来检查当前页面名称我已经有类似的工作我会寻找发布我能帮助您入门的内容..

我使用 JQuery 有过类似的事情，但第三个节点变得复杂，如果我有很多页面，那么管理起来会非常麻烦。但我肯定会看看你的:)

【参考方案1】：

在这里参考您的问题：How to use Bootstrap style of BreadCrumb with my ASP.NET menu?

SiteMapPath 在 HTML 呈现中充当 <ul/> 标记。因此，要在那里使用该方法，您的结构可能是这样的：

<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"  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 -->

然后添加解析CurrentNode超链接所需的javascript。

希望这会有所帮助。

【参考方案2】：

目前这对我有用。我的 Page_Load 中有更多代码，但这是重要的部分

在我当前的 MasterPages 预渲染事件中，我有一个名为

的方法

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

然后我在 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;

【讨论】：

谢谢！什么是 RadMenu？

哦，那是 Telerik 的，你可以忽略它.. 抱歉，如果您使用菜单，请使用该菜单的控件代替我使用 Telerik 的位置

因此，如果我想为每个页面链接添加一个 LI，就像我的问题一样，我可以找到该控件并添加它吗？外观和感觉都是使用 CSS 完成的。我只需要添加控件。

理论上如果它是一个控件应该可以工作，我习惯用菜单项来做这件事。希望这有助于给你一些想法

肯定会帮助我。谢谢你:)