none
ASP.NET 4 - asp:menu RenderingMode Table ou List RRS feed

  • Question

  • Bonjour,

    En ASP.NET 2, j'avais utilisé le control asp:menu. A l'époque le code HTML généré etait 'enorme' (plein de table,tr,td et de javascript). C'est pour celà que j'avais opté pour un design avec des frames plutot que des masterpages afin d'eviter de récupérer le code HTML du menu à chaque postback. Le menu etait donc dans une des frames et le target des menu items etait la deuxieme frame.

    Avec ASP.NET 4, le contrôle menu permet d'utiliser les CSS ( avec RenderingMode=list ) et le code HTML généré est beacoup plus light ( lu, li au lieu de tr, td et plus de javascript onmouseover,onmouseout). Tout marche à merveille sauf à un petit detail prêt.

    Avant quand l'utilisateur clickait sur une entrée du menu, la popup disparaissait au moment du click, alors que maintenant la popup ne disparait plus tant l'utilisateur ne bouge pas la souris en dehors de la zone de popup !

    Y a t'il moyen de corriger celà ?

    Merci.

     

    mardi 6 septembre 2011 20:34

Toutes les réponses

  • Bonjour,

    Pouvez-vous svp nous montrer le code que vous utilisez ? En plus, est-il possible d’être plus précis avec le problème avec le popup ? Est-ce que vous utilisez le control asp:menu dans un popup et quand vous cliquez sur un de ses entrées le popup ne disparait pas ?

    Cordialement,

    Cipri


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    vendredi 9 septembre 2011 06:44
  • Voici le code source de la page menu.aspx

     

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Menu.aspx.vb" Inherits="TestMenu.Menu" %>
    
    <html>
    <head runat="server">
        <title>Test Menu</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
    
        <table width="100%">
        <tr>
        <td align="left">
         
        <asp:menu ID="Menu1" runat="server" Orientation="Horizontal"  RenderingMode="List" 
                BackColor="#B5C7DE" DynamicHorizontalOffset="2" Font-Names="Verdana" 
                Font-Size="0.8em" ForeColor="#284E98" StaticSubMenuIndent="10px" >
            <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicMenuStyle BackColor="#B5C7DE" />
            <DynamicSelectedStyle BackColor="#507CD1" />
        <Items>
            <asp:MenuItem Text="Operating System" Value="Operating System" >
                <asp:MenuItem Text="Windows" Value="Windows" Target="content"  NavigateUrl="http://www.microsoft.com/windows"></asp:MenuItem>
                <asp:MenuItem Text="QNX" Value="QNX" Target="content" NavigateUrl="http://www.qnx.com"></asp:MenuItem>
                <asp:MenuItem Text="AIX" Value="AIX" Target="content" NavigateUrl="http://www-03.ibm.com/systems/power/software/aix/index.html"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Database" Value="Database">
                <asp:MenuItem Text="Oracle" Value="Oracle" Target="content" NavigateUrl="http://www.oracle.com"></asp:MenuItem>
                <asp:MenuItem Text="SQL Server" Value="SQL Server" Target="content" NavigateUrl="http://www.microsoft.com/sql"></asp:MenuItem>
                <asp:MenuItem Text="Raima" Value="Raima" Target="content" NavigateUrl="http://www.raima.com"></asp:MenuItem>
            </asp:MenuItem>
        </Items>
            <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticSelectedStyle BackColor="#507CD1" />
        </asp:menu>
        
        </td>
        <td align="right">    
    
        <asp:menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="Table" 
                BackColor="#B5C7DE" DynamicHorizontalOffset="2" Font-Names="Verdana" 
                Font-Size="0.8em" ForeColor="#284E98" StaticSubMenuIndent="10px">
            <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicMenuStyle BackColor="#B5C7DE" />
            <DynamicSelectedStyle BackColor="#507CD1" />
        <Items>
            <asp:MenuItem Text="Operating System" Value="Operating System" >
                <asp:MenuItem Text="Windows" Value="Windows" Target="content"  NavigateUrl="http://www.microsoft.com/windows"></asp:MenuItem>
                <asp:MenuItem Text="QNX" Value="QNX" Target="content" NavigateUrl="http://www.qnx.com"></asp:MenuItem>
                <asp:MenuItem Text="AIX" Value="AIX" Target="content" NavigateUrl="http://www-03.ibm.com/systems/power/software/aix/index.html"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Database" Value="Database">
                <asp:MenuItem Text="Oracle" Value="Oracle" Target="content" NavigateUrl="http://www.oracle.com"></asp:MenuItem>
                <asp:MenuItem Text="SQL Server" Value="SQL Server" Target="content" NavigateUrl="http://www.microsoft.com/sql"></asp:MenuItem>
                <asp:MenuItem Text="Raima" Value="Raima" Target="content" NavigateUrl="http://www.raima.com"></asp:MenuItem>
            </asp:MenuItem>
        </Items>
            <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticSelectedStyle BackColor="#507CD1" />
        </asp:menu>  
    
        </td>
    
        </tr>
        </table> 
    
        <br /><br /><br /><br />
        <iframe id="content" name="content" width="100%" height="100%"></iframe>
       
        </div>
        </form>
    </body>
    </html>
    
    

    Quand je selectionne 'Operating System', une popup avec windows, QNX et AIX apparait dans le 2 cas.

    Dans le menu list, la popup ne disparait pas au moment de selectionner QNX, mais en mode table elle disparait.

     

    /Pascal

    vendredi 9 septembre 2011 18:40
  • Bonjour,

    J’ai analysé votre problème et j’ai le même comportement dans le popup du Menu1, tandis que le popup de Menu2 fonctionne comme vous voulez. J’ai analysé aussi la source HTML et la différence que j’ai observé entre les deux situations est que si on utilise RenderingMode=”Table” pour chaque MenuItem on a les scripts suivants ajoutés onmouseover=”Menu_HoverStatic(this)” onmouseout=”Menu_Unhover(this)” onkeyup=”Menu_Key(this)” id=”customeMenun0″ , mais avec RenderingMode=”List” on n’a pas des scripts similaires (voir cet exemple).

    Puis, j’ai essayé à trouver une solution pour cette situation et j’ai parcouru toutes les propriétés de la classe Menu pour voir si je peux changer l’affichage si je gère l’évènement Menu_MenuItemClick, mais sans succès. J’ai cru que peut-être la propriété Menu.DisappearAfter peut nous aider, mais rien de nouveau. J’ai même essayé à trouver une solution avec JavaScript comme dans cet exemple (en changent l’attribut display), mais ça ne fonctionne n’en plus.

    Je suppose que vous voulez utiliser la méthode avec la List parce qu’ASP.NET utilise un control ul dans ce cas qu’on peut personnaliser plus facile qu’une table, mais d’autre côté on peut personnaliser aussi un control asp:Menu, donc ça ne devrait pas représenter une limitation pour vous.

    Je continuerai à analyser votre problème (il y a quelque chose que je ne vois pas dans tout cet ensemble) et si je trouve la cause de ce comportement, je la posterai.

    Cordialement,

    Cipri


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    lundi 12 septembre 2011 13:30