2010-06-17 10 views
26

Je suis en train de migrer des sites Web vers ASP.NET 4.0, ayant des problèmes avec le nouveau rendu des commandes de menu. Mes sites utilisent beaucoup les menus imbriqués. Les effets Hover sont utilisés et la mise en page est définie par une combinaison de thèmes et d'habillages avec des CSS liés.ASP.NET 4.0 Problèmes de rendu avec le contrôle de menu après la suppression de controlRenderingCompatibilityVersion = "3.5"

Si je supprime l'attribut controlRenderingCompatibilityVersion des pages, elles ne sont plus affichées en tant que tables imbriquées, mais en tant que tags ul/li. Cela casse ma disposition de plusieurs façons. Toutes les recommandations pour la migration d'une mise en page de menu ASP.NET complexe sont les bienvenues.

Modifié: Balisage et les détails CSS comme réponse au commentaire

section pertinente du fichier de la peau

<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> 

Stylesheet

.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%; 
} 
+0

J'ai le même problème sur un menu assez simple. La couleur d'arrière-plan CSS semble être ignorée pour les éléments de menu qui ont des enfants, et mon remplissage (j'ai le jeu d'orientation horizontal) est également ignoré pour les éléments du menu principal sauf pour les deux premiers. –

+0

Est-ce que cela se produit également pour .net 3.5 lorsque cet attribut est supprimé? sinon, alors .net 4.0 peut adopter une approche différente (plus saine) de HTML/CSS. En règle générale, ne faites pas confiance à ASP.NET lors de la génération de votre balisage. Assumez un contrôle total sur celui-ci et connaissez votre chemin. Si vous pouviez juste réécrire ce que vous avez comme un simple XHTML/CSS, je recommanderais ce chemin au lieu de pirater les contrôles .net. – synhershko

+0

@synhershko: Que voulez-vous dire par "Est-ce que cela arrive aussi pour .net 3.5?" En .net 3.5 cet attribut est insensé et n'existe pas! Hacking contrôles .net est l'intention de personne ici. Tim et moi avons suivi les meilleures pratiques d'hier (Construis ton design en utilisant des thèmes, des skins et CSS). Il devrait y avoir un chemin de migration facile vers les meilleures pratiques d'aujourd'hui. –

Répondre

32

Si vous supprimez l'attribut controlRenderingCompatibilityVersion du web. config le mode par défaut pour le rendu du menu change implicitement de Table à List. Si vous voulez toujours avoir votre menu rendu avec des balises de table que vous devez spécifier explicitement dans votre asp: commande de menu en ajoutant l'attribut RenderingMode: (. S aussi la section remarques ici dans MSDN: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.renderingmode.aspx)

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

3

J'ai eu des problèmes où un menu publié rendu bizarrement. Ajouter RenderingMode = "List" au balisage du menu a résolu mes problèmes.

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