Question

所有

我正在尝试确定将当前asp.net页面转换为母版页的最佳方法。我遇到的这个问题是导航。我有3个aspx页面，基本上是html，还没有闪存。这些是：

主页
报告
管理

在我当前的页面中，使用静态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>

目前在实际的html源中确定每个类的类。所以在Default.aspx中，li a href =“Default.aspx”...的类将指向我的css中选定的选项卡类，选项卡选中。其余li a的其他类将是tab-unselected。

再次在reports.aspx中，li a href =“reports.aspx”...的类将指向我的css中选定的选项卡类，选项卡选中。其余li a的其他类将是tab-unselected。

我的CSS正在完美地显示菜单。

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

然后我想我会尝试使用控件并将上面的导航项目放入其中。当我运行时，导航呈现为一个表格，因此完全打破了我的CSS。我认为在布置菜单之类的东西方面表格不好而你应该使用无序列表？

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

由于

Andez

Answer 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或Control中），你需要在某处使用一些逻辑代码，以便html在每个页。您也可以在代码隐藏中执行此操作，但添加一些内联代码块可能是最简单/最快捷的方式。你可以得到更多的时髦，并编写一个帮助类，将它包装在一个select语句中，然后调用

MenuHelper.RenderLink("Default.aspx")

但这需要更多的工作 - 如果想要尝试这种方法，请给我一个大喊。

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

干杯

Answer 2

遇到以下链接：

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

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

稍微摆弄一下我现在在主页面中使用asp：Menu的站点地图如下：

<强> Web.sitemap中

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

站点地图的内容是你需要有一个顶级的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页面。

Andez

Answer 3

可能是我试图提供的解决方案未经优化但为我工作。

在母版页的静态HTML菜单中，将所有“li”标记的ID作为页面名称。

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

然后在母版页中使用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中执行类似

的操作

。主动 { 背景=＃000; 颜色=＃FFF; }

我希望这有帮助..

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

3 个答案: