删除 controlRenderingCompatibilityVersion="3.5" 后 ASP.NET 4.0 菜单控件的呈现问题答案

【问题标题】：ASP.NET 4.0 Rendering problems with the menu control after removing of controlRenderingCompatibilityVersion="3.5"删除 controlRenderingCompatibilityVersion="3.5" 后 ASP.NET 4.0 菜单控件的呈现问题
【发布时间】：2014-01-10 08:08:04
【问题描述】：

我实际上正在将网站迁移到 ASP.NET 4.0，但菜单控件的新呈现存在问题。我的网站大量使用嵌套菜单。使用悬停效果，布局由主题和皮肤与链接 CSS 的组合定义。

如果我删除页面 controlRenderingCompatibilityVersion 属性，它们将不再呈现为嵌套表，而是呈现为 ul/li 标签。这在很多方面破坏了我的布局。非常欢迎任何有关迁移复杂 ASP.NET 菜单布局的建议。

已编辑：标记和 CSS 详细信息作为对评论的回应

皮肤文件的相关部分

<asp:Menu runat="server" DynamicHorizontalOffset="2" Orientation="Horizontal" SkipLinkText=""
    StaticPopOutImageUrl="~/App_Images/Themes/arrow_down.gif" DynamicPopOutImageUrl="~/App_Images/Themes/arrow_right.gif">
    <StaticMenuItemStyle CssClass="MenuDefaultMenuItemStyle" />
    <DynamicMenuItemStyle  CssClass="MenuDefaultMenuItemStyle" />

    <StaticSelectedStyle CssClass="MenuDefaultSelectedStyle" />
    <DynamicSelectedStyle CssClass="MenuDefaultSelectedStyle" />

    <StaticHoverStyle CssClass="MenuDefaultHoverStyle" />
    <DynamicHoverStyle CssClass="MenuDefaultHoverStyle" />
</asp:Menu>

<asp:Menu runat="server" SkinId="MenuVertical" DynamicHorizontalOffset="2" SkipLinkText=""
    StaticPopOutImageUrl="~/App_Images/Themes/arrow_right.gif" DynamicPopOutImageUrl="~/App_Images/Themes/arrow_right.gif">
    <StaticMenuItemStyle CssClass="MenuVerticalMenuItemStyle" />
    <DynamicMenuItemStyle  CssClass="MenuVerticalMenuItemStyle" />

    <StaticSelectedStyle CssClass="MenuVerticalSelectedStyle" />
    <DynamicSelectedStyle CssClass="MenuVerticalSelectedStyle" />

    <StaticHoverStyle CssClass="MenuVerticalHoverStyle" />
    <DynamicHoverStyle CssClass="MenuVerticalHoverStyle" />
</asp:Menu>

样式表

.MenuDefaultMenuItemStyle
{
    background-color: #D5DCE1;
    color: #234875;
    padding: 2px;
    width: 100%;
}

.MenuDefaultSelectedStyle
{
    background-color: #3C5778;
    color: #FFFFFF;
    padding: 2px;
    width: 100%;
}

.MenuDefaultHoverStyle
{
    background-color: #666666;
    color: #FFFFFF;
    padding: 2px;
    width: 100%;
}

.MenuVerticalMenuItemStyle
{
    background-color: #FFFFFF;
    border: 1px solid #D5DCE1;
    color: #234875;
    height: 30px;
    padding: 2px;
    width: 100%;
}

.MenuVerticalSelectedStyle
{
    background-color: #003366;
    border: 1px solid #D5DCE1;
    color: #FFFFFF;
    height: 30px;
    padding: 2px;
    width: 100%;
}

.MenuVerticalHoverStyle
{
    background-color: #EEEEEE;
    border: 1px solid #000000;
    color: #234875;
    height: 30px;
    padding: 2px;
    width: 100%;
}

【问题讨论】：

我在一个相当简单的菜单上遇到了同样的问题。 CSS background-color 似乎对于有孩子的菜单元素被忽略了，我的填充（我设置了水平方向）也被忽略了主菜单上的元素，除了前两个之间。
删除此属性后，.net 3.5 也会发生这种情况吗？如果不是，那么 .net 4.0 可能会对 HTML/CSS 采取不同的（更健康的）方法。作为一般规则，不要相信 ASP.NET 会生成您的标记。假设完全控制它，并知道你的方式。如果您可以将您所拥有的内容重写为简单的 XHTML/CSS，我建议您使用此路径而不是破解 .net 控件。
@synhershko：“.net 3.5 也会发生这种情况吗？”是什么意思？在 .net 3.5 中这个属性是没有意义的并且不存在！黑客 .net 控件在这里没有任何人的意图。 Tim 和我遵循了昨天的最佳实践（使用主题、皮肤和 CSS 构建您的设计）。应该有一条通往当今最佳实践的简单迁移路径。
我不熟悉这个属性，所以我想我会在评论中问这个。关于简单的迁移路径——嗯，它通常不存在于 ASP.net 世界中。 WebForms 是如此非标准并且产生如此丑陋的标记（至少在我更熟悉的 2.0 中），如果您找到一种简单的方法来做到这一点，我会感到惊讶。
您能否发布带有 controlRenderingCompatibilityVersion 属性集以及 css 的菜单标记..

标签： .net asp.net visual-studio-2010 asp.net-4.0

【解决方案1】：

如果您从 web.config 中删除 controlRenderingCompatibilityVersion 属性，则菜单呈现的默认模式会隐式地从 Table 更改为 List。如果您仍然希望使用表格标签呈现您的菜单，您需要通过添加 RenderingMode 属性在您的 asp:menu 控件中明确指定：

<asp:Menu runat="server" RenderingMode="Table" ... >
   ...
</asp:Menu>

（s. 也是 MSDN 中的备注部分：http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.renderingmode.aspx）

【讨论】：

【解决方案2】：

我遇到了发布的菜单呈现异常的问题。将 RenderingMode="List" 添加到菜单标记解决了我的问题。

<asp:Menu runat="server" RenderingMode="List" ... >
   ...
</asp:Menu>

【讨论】：