有没有一种优雅的方式来实现 ASP.net 中的可选选项卡/菜单答案

【问题标题】：Is there a elegant way to implement selectable tabs/menus in ASP.net有没有一种优雅的方式来实现 ASP.net 中的可选选项卡/菜单
【发布时间】：2009-06-29 21:07:40
【问题描述】：

我正在努力寻找在 ASP.net 中实现选项卡样式菜单系统的方法。从 HTML/CSS 的角度来看，这些选项卡看起来很棒，并且在母版页中实现，因此我无法从内容页面访问 body 标记。我想要解决的是如何根据用户正在访问的页面来改变“活动标签”。

我能想到几种方法：

在每次页面加载时动态生成 HTML
在 Page_Load 中操作列表项
使用 jQuery 操作选中的选项卡类

我还有一个问题似乎使某些解决方案不合适；一个选项卡可能包含多个不同的页面名称，例如，应该为 Default.aspx 和 CourseDetail.aspx 选择“课程”选项卡。

这些似乎都不是特别优雅，我觉得在 ASP.net 中有更好的方法来做到这一点，但我不知道我在寻找（或搜索）什么。

HTML：

<div id="tabs">
    <ul>
        <li class="selectedtab"><a href="/">Courses</a></li>
        <li><a href="#">My Courses</a></li>
        <li><a href="#">Administration</a></li>
    </ul>
</div>

CSS：

#head ul 
{
    list-style: none;
    padding:0;
    margin:0;
}

#head li 
{
    display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
    background: #EEE;
    font-size: large;
    font-weight: bold;
    padding-top: 0.3em;
}

#head li a 
{
    padding: 0 1em;
    text-decoration: none;
    color: Black;
}

#head .selectedtab
{
    padding-bottom: 1px; 
    background: white;
    border-bottom: 1px solid white;
}

#tabs
{
    text-align: right;
    width: 100%;
    border-bottom: 1px solid;
}

【问题讨论】：

标签： asp.net css menu

【解决方案1】：

我过去一直这样做的方法是给 body 一个类，然后给每个选项卡一个类（或 id），然后在 CSS 中使用它们。

<!-- the tabs now have a class you can use -->
<div id="tabs">
    <ul>
        <li class="tabone"><a href="/">Courses</a></li>
        <li class="tabtwo"><a href="#">My Courses</a></li>
        <li class="tabtre"><a href="#">Administration</a></li>
    </ul>
</div>

首页

<body class="tabonepage">...

第二页

<body class="tabtwopage">...

css - 这有点冗长，但它被本地化到一个地方。只要你没有 493 个标签，你就会成为黄金

.tabonepage .tabone,
.tabtwopage .tabtwo,
.tabtrepage .tabtre,
{
    padding-bottom: 1px; 
    background: white;
    border-bottom: 1px solid white;
}

编辑至于我是如何上课的......

这就是我羞愧地低下头的地方。我通常在我的主 master 上放置一个名为 BodyClass 的属性，然后在 OnPreRender 中放置一些设置该属性的代码，并在主 master 中放置一个表达式孔。这不是真正的漂亮，但我接受它，拥有身体课程的好处远远超过我眼中的代码隐藏:-) 可能有一种方法不涉及代码隐藏，我从未真正完全调查过它。我觉得 MVC 会有所帮助。

MainMaster.Master：

<body class='<%=BodyClass%>'>

MainMaster.Master.cs

public string BodyClass{ get; set; }

everyotherpage.aspx（我不记得是否需要这样做，我认为是因为您对代码隐藏中的 BodyClass 属性具有强类型访问权限）

<%@ MasterType VirtualPath="~/MasterPages/MainMaster.Master" %>

其他页面.aspx.cs

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        this.Master.BodyClass = "areamydetails";
    }

【讨论】：

好的，我喜欢这样 - 知道如何在 ASP.net 中实现它。我正在使用母版页，所以我似乎无权更改 body 元素的 CssClass。

【解决方案2】：

我认为根据当前位置切换 DIV 或控件的 CSS 类是一种相当优雅的方式。如果您将正在访问的当前页面链接到 ASP.NET 导航 API（使用站点地图），您应该做得很好！

【讨论】：