MenuItem的ClientID

Question

我在一个页面上有一个项目，它有一系列的MenuItems (从数据库动态生成)作为菜单项。

每个MenuItem将其自身呈现为

<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">

然而，我想得到这个链接的ClientID (我们使用外部Javascript库在模式灯箱样式框架中弹出页面)。这样做的一个要求是，我们需要识别“可点击对象ID”，以便我们可以将其设置为能够在单击时触发事件。

我们网站上的其他地方都有

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

但是，由于某些原因，菜单项似乎没有分配给它的ClientID属性。这使得在JavaScript中设置客户端id几乎是不可能的。

有人知道如何获取菜单项的ClientID吗(只是为了说明一下，菜单项的类型是System.Web.UI.WebControls.MenuItem

提前感谢！

Answer 1

如果要更改控件中项的呈现方式，可以使用StaticMenuItemTemplate和DynamicMenuItemTemplate属性。我将只在我的示例中使用第一个(静态，用于顶级项)：

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

StaticMenuItemTemplate属性属于ITemplate类型，并且像通常的模板属性一样，它由TemplateContainer属性修饰。这指定了要在其中实例化模板的容器，通常该容器提供对呈现时可能需要的一些上下文的访问。在本例中，它的类型是MenuItemTemplateContainer，它实现了IDataContainer，因此提供了对数据项的访问。

因此，我们将这个容器传递回页面中的一个方法，并在该方法中构造一个我们认为合适的ID。我们可以使用数据项来表示深度，使用容器来表示索引，例如：

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

我的猜测是，现在可以调整JavaScript以绑定到<a id="menuItem-2-4">Text</a>元素上的单击事件，因为您现在有了可预测的客户端in。

编辑:您还可以在模板中使用以下内容，并让ASP.NET负责创建唯一的客户端ID，但这是不可预测的……

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

Answer 2

尝试此操作，更改selector $("menu > a").bind('click',function(){}));

Answer 3

如何获得DOM中每个锚标记的列表并遍历它们，查找.class直到找到class=="whatever_Nav_ID_or_flag_you_entered_or_somehow_can_tell_this_element_apart“，然后使用.id为其分配id呢？类似于:未经测试

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

编辑:在渲染过程中，你可以使用一个条件来查看新的菜单项是否是你正在寻找的菜单项？

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