Hide or disable asp menu item using Javascript

Question

I have one ASP Menu in which it has some menu items. See below code:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
    EnableViewState="false" IncludeStyleBlock="false"
    Orientation="Horizontal">
                        <Items>
          <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"/>
          <asp:MenuItem NavigateUrl="~/AboutUs.aspx" Text="About"/>
          <asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin"/>
          <asp:MenuItem NavigateUrl="~/UserAccount.aspx" Text="User"/> 
                        </Items>
                    </asp:Menu>

I want to hide or disable third menu item based on login session. I know how to handle session but I am not right with how to hide one asp:menu item. I can't apply CSS to single Menu Item. So lease tell me what to do.

dove · Answer 1 · 2012-10-03T08:38:23.703

If it was the Admin area you wanted to hide you could use jquery after page loads:

    $('asp:MenutItem[Text="Admin"]').hide();             

    //note you will need to replace selector with generated html
    //something like
    $('#NavigationMenu a[title="Admin"]').hide();

Better would be to limit the list on the server side if you can so the limited menu is fixed there, something like this:

        if (!Roles.IsUserInRole("Admin"))
        {
            MenuItemCollection menuItems = NavigationMenu.Items;
            MenuItem adminItem = new MenuItem();
            foreach (MenuItem menuItem in menuItems)
            {
                if (menuItem.Text == "Admin")
                    adminItem = menuItem;
            }
            menuItems.Remove(adminItem);
        }

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

Why do you want to use javascript? It runs on the rendered html by the asp.net framework where you won't have access to the session.

This question is probably what you are looking for : Can I hide/show asp:Menu items based on role?

edited May 23 '17 at 11:56

Community

1
1

answered Oct 03 '12 at 08:32

Peter

14,221
15
70
110

score 0 · Answer 3 · answered Jun 30 '14 at 15:08

"How can I hide or disable asp menu item using javascript"

If you do need to use JavaScript, here's some code to do it:

//  Hide one of the top-level ASP.Net menu items

var menuItemToHide = "Rating";

var menuItems = $(".AspNet-Menu-Horizontal > ul > li > a");
$.each(menuItems, function () {
    var menuText = $(this).text().trim();
    if (menuText == menuItemToHide) {
        $(this).parent().hide();
    }  
});

(We have an ASP.Net app where the user's role doesn't come from Active Directory, so I couldn't just stick something into Web.sitemap or web.config. This code uses JQuery to iterate through the top-level menu items in my ASP.Net asp:Menu control, and removes the "Rating" menu.)

Hide or disable asp menu item using Javascript

3 Answers3