Dot-Net

刪除 controlRenderingCompatibilityVersion=‘3.5’ 後,ASP.NET 4.0 呈現菜單控制項的問題

  • June 17, 2010

我實際上正在將網站遷移到 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%;
}

如果您controlRenderingCompatibilityVersion從 web.config 中刪除該屬性,則菜單呈現的預設模式會隱式地從 更改TableList。如果您仍然希望使用表格標籤呈現菜單,則需要通過添加RenderingMode屬性在您的 asp:menu 控制項中明確指定:

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

(還有 MSDN 中的備註部分:http: //msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.renderingmode.aspx

引用自:https://stackoverflow.com/questions/3063156