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几乎不可能。

有没有人知道如何获取menuitem的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>元素上的单击事件，因为您现在拥有可预测的客户端ID。

编辑：您还可以在模板中使用以下内容，让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;
    }
}

编辑：在渲染过程中你可以使用条件来查看新的menuitem是否是你要找的那个？

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

Answer 4

你会看到这样的菜单项：

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

由于你没有发布任何代码，我不能告诉你如何专门挑选第三个代码（在上面的例子中）....但这应该有效。

您需要使用FindControl，因为MenuItem是Menu的子项，而不是Page或User Control的子项。

Answer 5

绑定菜单（OnMenuItemDataBound）时，您可以添加带有ID的自定义属性，以后可以在JavaScript中使用。

更新：MenuItem没有Attributes属性，所以它是死路一条。此外，由于MenuItem是密封的，因此没有改变的余地。但菜单是公共课，所以也许可以在那里完成。整个Menu / MenuItem不是修改友好的，所以我认为你必须编写很多自定义代码。

或者使用Adapters。

如果由我决定，我会删除asp.net菜单并将其完全自定义。

Answer 6

Asp：menu提供了一组CSS属性，例如hoverCss / SelectCss。

如果选择（mouseOver / click）一个菜单项，cssclass会在html控件上添加（a）吗？

如果答案为“是”，则使用

$（ 'thecssclassuspecified '）。住（' 点击'，函数（）{

                                $(this)....

                              });

或'不'，我担心你必须使用类似下面代码的东西，在VS 2010之前的caz asp控件不适合js和jquery。

$（'menu＆gt; a'）。live（'click'，function（）{
                       $(this)... 

               });

Answer 7

这些答案中的大多数为定位某个链接并使用它做一些事情提供了很好的主意。问题是您不知道数据库将生成哪些链接，并且它们没有设置客户端ID以供选择。

您可能不喜欢这个答案，但最终您需要实现一些能够识别链接的内容，无论它是class还是id属性最终都无关紧要。

粗略思考的想法可能是：

客户端编号/命名约定。例如，在页面就绪时，使用jQuery来解析锚点，可能是它们的类或href值，并使用此数据来按常规设置客户端ID。
更改数据库架构以允许使用链接详细信息存储客户端ID。这可能需要最多的工作，因为这意味着更改架构，对象和方法等......但它不应该太难，并且可能是您最安全，最干净的解决方案。

我确定还有其他选择，但关键是您需要在脚本完全帮助之前以某种方式识别您的链接。

MenuItem的ClientID

7 个答案: