ClientID menu MenuItem

Question

I have an element on a page with a series of MenuItems (dynamically generated from a database) as menu items.

Each MenuItem is displayed as

<a class="ctl00_cphContent_cphMainContentTitle_uxHeaderMenu_menuPageNav_1 button ctl00_cphContent_cphMainContentTitle_uxHeaderMenu_menuPageNav_3" style="border-style:none;font-size:1em;" href="SomeURLHere.aspx"> 

However, I would like to get the ClientID of this link (we use an external Javascript library for pop-up pages in modal paint frames). One of the requirements of this is that we need to identify the “clickable object ID” so that we can configure it to be able to fire the event by clicking.

Everywhere on our site we have

 OurSite.SetupDialogueBoxForOpen('<%= HyperLink.ClientID =>'); 

However, for some reason, the menu item does not have the ClientID property assigned to it. This makes it impossible to set the client identifier in JavaScript.

Does anyone know how to get the ClientID of a menu item (just to clarify the menu item, it is of type System.Web.UI.WebControls.MenuItem

Thanks in advance!

Answer 1

If you want to change the way items are displayed in the control, you can use the StaticMenuItemTemplate and DynamicMenuItemTemplate . I will use only the first in my example (static, for top-level elements):

 <asp:Menu runat="server" ...> <StaticMenuItemTemplate> <a id="<%# GetSuitableClientId(Container) %>"><%# Eval("Text") %></a> </StaticMenuItemTemplate> </asp:Menu> 

The StaticMenuItemTemplate property is of type ITemplate and, as is often the case with such template properties, it is decorated with the TemplateContainer attribute. This indicates the container into which the template should be created, usually the container provides access to some context that may be needed during rendering. In this case, it is of type MenuItemTemplateContainer , which implements IDataContainer and thus gives access to the data item.

So, we pass this container back to the method on our page, and in this method we create the identifier that we consider necessary. We could use a data element for depth and a container for an index, for example:

 protected string GetSuitableClientId(MenuItemTemplateContainer container) { MenuItem item = (MenuItem)container.DataItem; return String.Format("menuItem-{0}-{1}", item.Depth, container.ItemIndex); } 

My guess in constructing this answer is that you can now configure JavaScript to bind to click events on the <a id="menuItem-2-4">Text</a> element, since now you have predictable identifiers on client side.

Edit: you can also use the following inside your template and let ASP.NET take care of creating a unique identifier on the client side, but this is less predictable ...

 <asp:HyperLink ID="MenuItem" runat="server" NavigateUrl='<%# Eval("NavigateUrl") %>' /> 

Answer 2

Try this, change selector $("menu > a").bind('click',function(){}));

Answer 3

How to get a list of all anchor tags in the DOM and iterate through them, looking at .class until you find class == "whatever_Nav_ID_or_flag_you_entered_or_somehow_can_tell_this_element_apart" and then using .id to assign it an identifier? Something like: untested

 var anchors = document.getElementsByTagName("a"); for(int i = 0; i < anchors.length()){ if(anchors[i].class=="testClass"){ anchors[i].id = "targetThisAnchor"; break; } } 

EDIT: during rendering, you can use a conditional expression to see if the new menu item is the one you are looking for?

 <% if (MenuItem.flag == menuItemToTarget) { //set MenuItem id } %> 

Answer 4

You can go to the menu item as follows:

 OurSite.SetupDialogueBoxForOpen('<%= uxHeaderMenu.FindControl("menuPageNav_3").ClientID %>'); 

Since you did not post any code, I cannot tell you how to specifically choose the third (in the above case) .... but this should work.

You need to use FindControl because MenuItem is a child of Menu, not a child of the page or User Control.

Answer 5

When binding the menu (OnMenuItemDataBound), you can add a custom attribute with some identifier, which can later be used in JavaScript.

Update : MenuItem does not have an Attributes property, so it is a dead end. In addition, since the MenuItem is sealed, there is no room for change. But the menu is publicly available, so perhaps it can be done. All of these menus are Menu / MenuItem independent of modification, so I think you should write a lot of custom code.

Or use the adapters for this.

If it depended on me, I would drop the asp.net menu and write it completely.

Answer 6

Asp: the menu provides a set of CSS properties, for example. hoverCss / SelectCss.

if you select (mouseOver / click) one menu item, will cssclass add the html (a) control?

if the answer is yes, then use

$ ('thecssclassuspecified'). Live ('click', function () {

  $(this).... }); 

or No, I'm afraid you need to use something like the code below, cas asp controls before VS 2010 is not perfect for js and jquery.

$ ('menu> a'). live ('click', function () {

  $(this)... }); 

Answer 7

Most of these answers give a great idea for targeting a specific link and doing something with it. The problem is that you do not know which links will be created in the database, and they do not have the client identifier set for selection.

You may not like the answer, but in the end you need to implement something that will allow you to identify the links, whether this class or id property ultimately does not matter.

Rough thoughts can be:

• Approval for numbering / naming on the client side. For example, the page is ready to use jQuery to parse anchors, possibly their class values ​​or href, and use this data to set the client identifier conditionally.

• Change the database schema so that you can save the client ID with link information. This will require more work, because it means changing the schema, objects and methods, etc., But it should not be too complicated and will probably be your safest and cleanest solution.

I'm sure there are other options, but the key is you need to somehow identify your links before the script helps you at all.