C# .NET网站 - 将CSS类添加到菜单元素

Question

我已经使用PHP约7年了，但今天我被迫在一个项目中使用.NET。只是为了提供一些见解：

该项目包括：

.NET4 Viewstate = false 现在我的问题是这样的。主要布局由主页面覆盖，这似乎很明显如何工作。它还包括导航菜单选项，例如：

<div id="menu">
    <ul>
        <li><a href="default.aspx" title="Home" >Home</a></li>
        <li><a href="products.aspx" title="Products">Products</a></li>
        <li><a href="prices.aspx" title="Size &amp; Price">Size &amp; Price</a></li>
        <li><a href="formats.aspx" title="File Formats">File Formats</a></li>
    </ul>
</div>

现在我想做的是根据我所在的页面添加CSS类属性，所以如果我在产品页面上，我将得到以下源代码:

<div id="menu">
    <ul>
        <li><a href="default.aspx" title="Home" >Home</a></li>
        <li><a href="products.aspx" class="active" title="Products">Products</a></li>
        <li><a href="prices.aspx" title="Size &amp; Price">Size &amp; Price</a></li>
        <li><a href="formats.aspx" title="File Formats">File Formats</a></li>
    </ul>
</div>

任何帮助都将不胜感激！祝好！ :)

- tripbrock

Answer 1

有很多种方法可以实现这个功能，其中一种方法是在“从属”页面中添加一个脚本，将相应的标签的类设置为所需的值。

<li><a href="default.aspx" title="Home" id="aHome" >Home</a></li>
<li><a href="products.aspx" title="Products" id="aProducts">Products</a></li>

在 products.aspx 中，您可以执行以下操作:

<SCRIPT>document.getElementById('aProducts').setAttribute('class', 'active');</SCRIPT>

- mikey

---

这是一个很好的解决方案，谢谢。我从来没有想过用JavaScript解决方案，因为我通常尽量避免使用它们，但这完全满足我的需求，虽然我更喜欢硬编码实现，但这也可以很好地工作。谢谢。 - tripbrock

没问题，这三个答案都可以。其他方法的好处是所有的魔法都在服务器端发生，它们不依赖于客户端脚本。 - mikey

Answer 2

这不是你问题的答案，但既然它在CSS类别中，我想至少发表一下评论 :)

我强烈建议您在每个列表项上设置静态类，并与CSS中的body类结合使用，例如：

<style type="text/css"><!--
    body.products #menu li.products a,
    body.otherpage1 #menu li.otherpage1 a,
    body.otherpage2 #menu li.otherpage2 a,
    body.otherpage3 #menu li.otherpage3 a,
    body.otherpage4 #menu li.otherpage4 a, { /* your styles here*/ }
--></style>

我认为仅仅为了设置一个类而使用C#有点过度设计了，仅此而已 :)

- InanisAtheos

---

是的，这很好，实际上我已经使用了这种方法，在使用主页面的“从属”页面中，我添加了另一个样式和选择器，只针对我想要不同外观的项目。它有效地“覆盖”了先前的样式。 - mikey

@mikey 是的，完全正确。只要覆盖样式在初始样式之后，就没有必要使用!important，这本身就是一种丑陋的写法 :) - InanisAtheos

Answer 3

我会从将链接转换为服务器控件开始。请参考MSDN页面<asp:HyperLink />。然后，我会为我的MasterPage创建一个接口，这样如果将来需要更改MasterPages，我可以实现相同的接口而不必担心破坏构建（在下一步中我们将公开一些属性，所以这将非常有用）。

public interface IMasterPage
{
    String LnkHomeClass { get; set; }
    String LnkProductsClass { get; set; }
    ...
} 

现在正如我之前提到的，在MasterPage的代码后台中公开HyperLinks的CssClass属性。

public string LnkProductsClass
{
    get 
    {
        return LnkProducts.CssClass;    
    }
    set
    {
        LnkProducts.CssClass = value;
    }
}

现在你可以在子页面上设置这些属性。

IMasterPage masterPage = Master as IMasterPage; if (masterPage != null) { masterPage.LnkProductsClass = "active"; }

另一个选择，但我不太熟悉的是使用 nested MasterPages。

- Jeremy Wiggins