Question

我正在使用Visual Studio 2010和ASP.NET 4.0将Menu控件呈现为HTML列表，因此我可以使用CSS来设置它。这是我在下面使用的代码

<asp:Menu ID="navlist" runat="server" Orientation="Horizontal"
SkipLinkText="" ClientIDMode="Static" DataSourceID="MenuSource" 
MaximumDynamicDisplayLevels="0" IncludeStyleBlock="False" 
StaticDisplayLevels="2">
</asp:Menu>

这会生成以下HTML

<!-- URL shortened -->
<script src="/WebResource.axd?...t=634066906994188146"type="text/javascript"></script>

<div id="navlist">
    <ul>
        <li><a href="link1.html">Link 1</a></li>
        <li><a href="link2.html">Link 2</a></li>
    </ul>
</div>

乍一看，这看起来就像我想要的那样。但是，如果我打开WebResource.axd，则会有一大堆与菜单相关的JavaScript代码。此代码的一部分是将自己的内联样式应用于列表。使用FireBug我可以在javascript执行后查看HTML标记，它看起来像这样：

<div id="navlist" style="float: left;">
    <ul class="level1 static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">
        <li role="menuitem" class="static" style="position: relative; float: left;">
            <a href="link1.html" class="level2 static" tabindex="-1">Link 1</a>
        </li><li role="menuitem" class="static" style="position: relative; float: left;">
            <a href="link2.html" class="level2 static" tabindex="-1">Link 2</a></li>
    </ul>
</div>

这些内联样式最终会影响我的页面布局。我不需要WebResource.axd中的任何脚本。如何防止在页面的最终标记中呈现此脚本？

Answer 1

如果您只想使用IncludeStyleBlock属性，可以告诉菜单不要自己设置样式

默认情况下，它启用“true”

<asp:Menu IncludeStyleBlock="False" />

Answer 2

在你的CSS上使用！important

Answer 3

我创建了一个自定义菜单（派生自System.Web.UI.WebControls.Menu）并替换了OnPreRender：

public class MyCustomMenu : System.Web.UI.WebControls.Menu
{
    protected override void OnPreRender(EventArgs e)
    {
        // Don't call base OnPreRender
        //base.OnPreRender(e);
    }
}

这就是诀窍。

Answer 4

更改Menu控件的开箱即用功能无法做多少工作。但是，您可以创建自己的控件，也可以使用CSS Control Adapter Toolkit。

Answer 5

我通过删除内联样式并通过jQuery更改一些类名来实现此目的。当然，您可以重新设置每个元素的样式，但它只会产生大量不必要的CSS代码。

如果要从li，a，ul和div：

中删除这些内联样式，请使用此选项

$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');

其次，您可以更改这些类名，例如：

$("#from-this-element").removeClass(.remove-me).addClass('.new-class');

我认为这是在页面加载后使用此脚本的最佳方式。

Answer 6

我尝试使用自定义类覆盖asp:menu，但仍然没有学会如何简单地删除ul，li和{{1}中的所有属性标签，以便我可以将自己的css代码应用于干净的列表。

我也尝试过jQuery方法：

Imports Microsoft.VisualBasic
Namespace MCO

Public Class MyCustomMenu
    Inherits Menu

        Protected Overrides Sub OnPreRender(e As EventArgs)
            ' don't use this:
            ' MyBase.OnPreRender(e)

            ' but leaving this blank produces NO rendered menu
        End Sub
    End Class
End Namespace

但是因为.net webresource是 last 要运行的东西，我发现jQuery行没有用。应，但不是。 $("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');

如何在javascript中禁用Menu控件的样式？

6 个答案: