asp:Menu stops working after a different control performs partial AJAX postback

Question

This issue occurs in ASP.NET 4.6 and I've seen a few similar posts, but they usually referred not to the same control (built-in here) or ended up with a conclusion "just use a different/external control here: html link", which is not really an option for me.

First, some code

Site.Master

 <div id="HeaderProper">
    <div id="HeaderProperTitle">
        <asp:Menu ID="HeaderProperMenu" runat="server" DataSourceID="HeaderProperSiteMap" Orientation="Horizontal"  
            BackColor="#ff2400" 
            RenderingMode="List"
            StaticEnableDefaultPopOutImage="false"
            StaticDisplayLevels="2"
            StaticHoverStyle-BackColor="#000000"
            StaticMenuItemStyle-HorizontalPadding="15px"
            StaticMenuItemStyle-Height="42px"
            DynamicHoverStyle-BackColor="#000000" 
            DynamicMenuItemStyle-HorizontalPadding="5px"
            DynamicMenuItemStyle-BackColor="#ff2400"
            DynamicMenuItemStyle-Font-Size="24px"/>
<asp:SiteMapDataSource ID="HeaderProperSiteMap" runat="server" />
</div>

SomePage.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h1>Complete List</h1>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="SortOrderSelection">
                    Sort by
                    <asp:DropDownList ID="cbxSortBy" runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="cbxSortBy_SelectedIndexChanged" />
                </div>
                <asp:Panel ID="SortedList" CssClass="top-margin five-columns" runat="server" />
                <asp:Panel ID="Summary" CssClass="top-margin" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

How to reproduce: Choose an item in the DropDownList, which causes partial postback. The menu then stops working, that is - the drop down/hover menu doesn't open, but the first level links seem to be functional. Refreshing the whole page fixes the problems (duh?).

And, contrary to what I've found: 1) Menu is NOT inside an UpdatePanel, which I acknowledge is unsupported solution 2) Menu works fine when RenderingMode is set to Table, but generates a very ugly html code, which I would like to avoid. Not mentioning additional quirks in margins that have to be adjusted with ugly fixes. 3) I tried setting z-index: 1000...0 !important as suggested by some sources (on most menu related styles), but to no avail.

I would be grateful for any suggestions how this can be resolved while still using asp:Menu control in List rendering mode, possibly with as least intervention as possible. My point here is to use built-in functionality and keep the code clean from unnecessary JS, jQuery (if possible at all; otherwise I'd rather open a Connect case for this issue). Thank you in advance.

Ant Ant · Accepted Answer · 2015-12-08T15:02:52

Putting your menu into an update panel should work because it will indicate to the server to update it after the postback. Without this, any repost can create the risk of losing some events in your element. Refreshing works because you are refreshing the whole page and not only some element of it.

asp:Menu stops working after a different control performs partial AJAX postback

First, some code

1 Answers