为什么在不相关的更新面板刷新中，ASP.NET菜单控件中出现随机的“事件”是未定义的错误？

Question

This has been plaguing me for a while.

I have a page in my app that is a content page. The asp.net master page has a Menu Control.

This Menu Control is a user control that contains an object, and all of the event handling to bind the menu to various sitemap files based on the user.

The content page has a form with various forms and grids with update panels for putting together a complicated object. When completed the user submits the form and it should create the new object.

The problem is when updating one of the gridviews or submitting the form, I get an 'Event' is undefined error from a ScriptResource.axd file and it looks like the code is from the ASP menu control. Here is the context in which the error occurs. It breaks right after Menu_ClearInterval():

function Menu_HideItems(items) {
if (document.body.__oldOnClick) {
    document.body.onclick = document.body.__oldOnClick;
    document.body.__oldOnClick = null;
}
Menu_ClearInterval();

it breaks on this line:

if (!items || ((typeof(items.tagName) == "undefined") && (items instanceof Event))) {

    items = __rootMenuItem;
}
var table = items;
if ((typeof(table) == "undefined") || (table == null) || !table.tagName || (table.tagName.toLowerCase() != "table")) {
    table = WebForm_GetElementByTagName(table, "TABLE");
}
if ((typeof(table) == "undefined") || (table == null) || !table.tagName || (table.tagName.toLowerCase() != "table")) {
    return;
}
... rest of function
}

The context for the function has an items variable which looks like it contains event data, eg:

{ type: "click", target: { id: "btnAddItem" }, Methods: stopPropagation() }

Not sure if it matters. All other locals are undefined at this time.

Has anyone had a problem like this before? Any help is appreciated. This is a production problem and short of rewriting this to use pure jquery and ajax (not a quick fix) I'm not sure what else to do.

Thanks in advance for your help!

EDIT: To be clear, I'm not sure if this is the menu control causing the error, just that the surrounding code in the ScriptResource.axd file looks like menu code.

EDIT2 (Reproducable!): Ok, more details. This error occurs if I hover over the menu control after the page loads. If I don't hover, it won't occur and everything works fine. If I hover, it will error on the next ajax post. This page helped me figure that much out. Thoughts?

Menu Markup:

  <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" OnMenuItemDataBound="mainMenu_MenuItemDataBound">
    <StaticMenuStyle CssClass="menu" />
    <StaticMenuItemStyle CssClass="menuItem" />
    <StaticSelectedStyle CssClass="menuSelected" />
    <StaticHoverStyle CssClass="menuHover" />     
    <DynamicMenuItemStyle CssClass="menuItem dMenuItem" />
    <DynamicSelectedStyle CssClass="menuSelected dMenuSelected" />
    <DynamicHoverStyle CssClass="menuHover dMenuHover" />            
    <LevelSubMenuStyles>
        <asp:SubMenuStyle CssClass="menu" />
        <asp:SubMenuStyle CssClass="subMenu" BackColor="#DDDDDD" />
    </LevelSubMenuStyles>
    <LevelMenuItemStyles>
        <asp:MenuItemStyle CssClass="menuItem" />
        <asp:MenuItemStyle CssClass="subMenuItem" />
    </LevelMenuItemStyles>
    <DataBindings> 
        <asp:MenuItemBinding DataMember="siteMapNode" 
             TextField="title" NavigateUrlField="url"  /> 
    </DataBindings> 
</asp:Menu>

Answer 1

Adding it to a page where a menu resides makes the javascript error go away.

var oldMenu_HideItems = Menu_HideItems;   
if(oldMenu_HideItems)
{
    Menu_HideItems = function(items)
    {
        try
          {
            return oldMenu_HideItems(items);
          }
        catch(err)
          {

          }
    }
} 

Source at http://forums.asp.net/t/1059668.aspx

Answer 2

I would try to contain each control in it's own UpdatePanel with UpdateMode=Conditional and explicitly Update specific content when needed. If you need the entire page reloaded, go ahead and do a hard refresh to get the state back in order.

Answer 3

I was not able to come up with a solution to this, so I ended up going with a different menu.

The Queness Drop Down Menu was the simplest to implement with similar functionality and style.

Answer 4

The solution is easy: the Event object from ScriptResource.axd file is overwritten by another object with the same name, somewhere in your javascript files. The same issue I had, and solve it with this solution.

Best regards.