母版页中的 ASP.NET 自定义导航答案

【问题标题】：ASP.NET Custom Navigation in Master Page母版页中的 ASP.NET 自定义导航
【发布时间】：2011-08-19 09:42:36
【问题描述】：

全部，

我正在尝试确定将我当前的 asp.net 页面转换为母版页的最佳方式。我遇到的这个问题与导航有关。我有 3 个 aspx 页面，它们本质上是 html，目前还没有任何 Flash 内容。它们是：

首页
报告
管理员

在我当前的页面中，使用静态html构建的菜单如下：

<div id="nav">
    <ul>            
        <li><a href="Default.aspx" class="tab-unselected" title="Home">Home</a></li>            
        <li><a href="reports.aspx" class="tab-unselected" title="Reports">Reports</a></li>
        <li><a href="administration.aspx" class="tab-selected" title="Admin">Admin</a>
        </li>
    </ul>
</div>

每个 li 的类当前在实际的 html 源中确定。因此，在 Default.aspx 中，li a href="Default.aspx" ... 的类将指向我的 css 中选定的选项卡类，即选项卡选择。其余 li a 的其他类将被制表符取消选中。

同样在reports.aspx 中，li a href="reports.aspx" ... 的类将指向我的css 中选定的选项卡类，选项卡选择。其余 li a 的其他类将被制表符取消选中。

我的 CSS 完美地显示了上面的菜单。

然后我想我会尝试转到母版页。所以我将上面的内容复制到母版页中。这看起来不错，但问题是导航在母版页中，如何更改导航中当前页面的突出显示。

然后我想我会尝试使用控件并将上述导航项放入其中。当我运行导航时，导航被渲染为表格，因此完全破坏了我的 css。我认为表格在布置菜单等内容方面很糟糕，您应该使用无序列表吗？

问题是，用 ASP.NET 实现导航的最佳方式是什么？

谢谢

安德斯

【问题讨论】：

标签： asp.net menu navigation

【解决方案1】：

如果您想使用 html 列表来显示导航但使用 CSS 设置列表项的样式，那么您可以使用此技术。

使用内联代码块，例如（假设是 VB）

<% If Page.Request.Path.Contains("Default.aspx") Then %>
  <li class="selected">
<% Else %>
  <li>
<%End If%>
  <a href="Default.aspx" class="tab-unselected" title="Home">Home</a></li>

每个页面都需要一个 IF 语句，代码看起来有点杂乱无章。我并不是说这是最好的方法，但基本上，如果您为菜单使用单个 html（但它在 Masterpage 或控件中），您将需要在某处使用一些逻辑代码以使每个 html 都不同页。您也可以在代码隐藏中执行此操作，但添加一些内联代码块可能是最简单/最快的方法。您可以变得更时髦，并编写一个帮助类，将其全部包装在一个 select 语句中，然后调用

MenuHelper.RenderLink("Default.aspx")

但这需要更多的工作 - 如果想尝试这种方法，请大声告诉我。

至于为什么你的桌子坏了我不知道。我的意见是，如果您想使用表格并且您的网站/用户不会因此受到影响，那就继续吧 - 但如果您必须考虑移动设备和屏幕阅读器等，那么我的理解是表格将更难导航。这真的取决于你！

干杯

【讨论】：

【解决方案2】：

看到以下链接：

http://forums.asp.net/t/1626206.aspx

.NET Framework 4.0 版对 asp:Menu 控件进行了一些不错的更改。其中之一是呈现为列表。耶！所以现在我已经从 VS2008 迁移到 VS2010 Express。

经过一番摆弄后，我现在正在使用带有 asp:Menu 的站点地图，如下所示：

网站地图

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title=""  description="">
        <siteMapNode url="Default.aspx" title="Home"  description="" />
        <siteMapNode url="reports.aspx" title="Reports"  description="" />
        <siteMapNode url="administration.aspx" title="Administration"  description="" />
        <siteMapNode url="ChildPage.aspx" title="Master Template"  description="" />
    </siteMapNode>
</siteMap>

Site.master

...
<head runat="server">
    <link rel="stylesheet" type="text/css" href="styles/mystyle.css" />
</head>
<body>
    <form id="Form1" runat="server">
    <div id="header">
        <div id="nav">
            <asp:SiteMapDataSource id="nav1" runat="server" /> 
            <asp:Menu ID="main-menu" runat="server" DataSourceID="nav1" 
                Orientation="Horizontal" StaticSelectedStyle-CssClass="tab-selected" 
                CssClass="nav" 
                StaticDisplayLevels="2" IncludeStyleBlock="False" RenderingMode="List"     >                
            </asp:Menu>
        </div>
    </div>    
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </form>
</body>

站点地图的问题是您需要有 1 个顶级 siteMapNode，我将其留空。在asp:Menu中StaticDisplayLevels设置为2，所以列表呈现如下：

<ul class="level1">
    <li><a></a></li>
    <li><a class="level2 selected" href="/Web%20Portal/Default.aspx">Home</a></li>
    <li><a class="level2" href="/Web%20Portal/reports.aspx">Reports</a></li>
    <li><a class="level2" href="/Web%20Portal/administration.aspx">Administration</a></li>
    <li><a class="level2" href="/Web%20Portal/ChildPage.aspx">Master Template</a></li>
</ul>

如您所见，它将顶级 siteMapNode 作为列表中的第一项。这是我不想要的。为了解决这个问题，我使用以下 CSS 隐藏元素。

#nav li:first-child a
{
    display: none;
}

现在一切看起来都很好，与静态 html 页面非常相似。

安德斯

【讨论】：

啊，SiteMaps 当然，非常棒 - 很高兴它对你有用！
对不起，大卫。只是赶上帖子。忙碌了三年！站点地图不好吗？

【解决方案3】：

可能是我试图提供的解决方案没有经过优化，但对我有用。

在母版页的静态 HTML 菜单中，所有“li”标签的 ID 都与页面名称相同。

<ul>
   <li ID="home"><a href="home.aspx">Home</li>
   <li ID="About"><a href="about.aspx">About</li>
<ul>

然后在 Master Page 中使用 JQuery 获取页面名称。有点像

$(function () {
     var filePath = window.location.pathname;
     var fileName = filePath.substr(filePath.lastIndexOf("/") + 1);
     var name = fileName.split('.');
     var page_name = name[0];
     $('#' + page_name).addClass("active"); // Add the CSS class which sets the active Menu
     });

在 CSS 中做类似的事情

.active { 背景=#000; 颜色=#fff; }

我希望这会有所帮助..

【讨论】：