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

发布于 2024-11-30 12:49:04 字数 1166 浏览 1 评论 0原文

所有，

我正在尝试确定将当前的 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>

每个 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 实现导航的最佳方法是什么？

谢谢

安德斯

原文

All,

I am trying to decide the best way to convert my current asp.net page into a master page. This issue I have is with the navigation. I have 3 aspx pages which are essentially html with nothing flash in as yet. These are:

Home
Reports
Admin

In my current pages, the menu built using static html as follows:

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

The class for each li a class is currently determined in the actual html source. So in Default.aspx the class for li a href="Default.aspx" ... would point to the selected tab class in my css, tab-selected. The other classes for the rest of li a's would be tab-unselected.

Again in reports.aspx, the class for li a href="reports.aspx" ... would point to the selected tab class in my css, tab-selected. The other classes for the rest of li a's would be tab-unselected.

My CSS is displaying the menus perfectly with the above.

I then thought I would try moving to Master pages. So I copied the above into the master page. This looks ok but the problem is as the navigation is in the Master page, how can I change the highlight the current page in the navigation.

Then I thought I would try and use the control and put the above navigation items in it. When I ran the navigation was rendered as a table and so completely broke my css. I thought tables were bad in terms of laying out things like menus and you should use unordered lists?

Question is, what is the best way to implement my navigation with ASP.NET?

Thanks

Andez

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

菊凝晚露 2024-12-07 12:49:04

如果您想使用 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（但它在母版页或控件中），您将需要在某处使用一些逻辑代码，以使每个 html 都不同页。您也可以在代码隐藏中执行此操作，但添加一些内联代码块可能是最简单/最快的方法。您可以变得更时髦，编写一个辅助类，将其全部包装在一个 select 语句中，然后调用，

MenuHelper.RenderLink("Default.aspx")

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

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

干杯

If you want to use your html list to display your navigation but style your list items using CSS then you could use this technique.

Use inline code blocks such as (assuming 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>

You would need an IF statement for each page and the code will look a bit scrappy. I'm not saying it's the best way but basically if you are using a single piece of html for you menu (but it in the Masterpage or a Control) you will need to use some logic code somewhere for the html to be different on each page. You could do this in the code-behind as well but adding some inline code blocks is the perhaps the easiest/quickest way. You could get more funky and write a helper class that wraps it all up in a select statement and just call

MenuHelper.RenderLink("Default.aspx")

but that will take more work - give me a shout if fancy trying this approach instead.

As for why your tables broke I don't know. My opinion would be if you want to use tables and your site/users won't suffer from it then go ahead - but if you have to consider mobile devices and screen readers etc then it is my understanding that tables will be harder to navigate. It's really up to you!

Cheers

回复收藏 0 原文

只是在用心讲痛 2024-12-07 12:49:04

发现以下链接：

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>

带有站点地图的东西是你需要有 1 个顶级 siteMapNode，我将其保留为空。 StaticDisplayLevels 在 asp:Menu 中设置为 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 页面非常相似。

安德兹

Came across the following link:

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

Version 4.0 of the .NET Framework has some nice changes to the asp:Menu control. One of them is to render as a list. Yay! So for now I have moved from VS2008 to VS2010 Express.

After a little fiddling around I am now using a site map with an asp:Menu within a Master page as follows:

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>

The thing with the Site Map is that you are required to have 1 top level siteMapNode which I leave as empty. StaticDisplayLevels is set to 2 in the asp:Menu, so the list is rendered as follows:

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

As you can see it puts the top level siteMapNode as the first item in the list. Which I do not want. To work around this I hide the element using the following CSS.

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

Everything is now looking nice and very similar to the static html pages.

Andez

回复收藏 0 原文

终难遇 2024-12-07 12:49:04

可能我试图提供的解决方案尚未优化，但对我有用。

在母版页的静态 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 中做

类似.active 的事情
{
背景=#000；
颜色=#fff；
我希望

这有帮助..

May be the solution I am trying to provide is not optimized but worked for me.

In the static HTML Menu in the Master page, have all the "li" tag with the ID as of the Page Name.

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

Then in the Master Page use JQuery to get the Page Name. Some thing like

$(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
     });

In CSS do something like

.active
{
background=#000;
color=#fff;
}

I hope this helps..

回复收藏 0 原文

~没有更多了~