如何在使用jQuery时从asp:listview内的asp:button中获取clientID？

Question

我将尝试做一些相对简单的事情。我正在使用ListView来显示多个项目，使用ItemTemplate。在ItemTemplate中，我有一个div包围整个项目，以便我可以在悬停事件上进行突出显示（已经由jQuery处理）。

我想要做的是，在div上的点击事件触发一个按钮，以打开该特定项目的详细视图。我遇到的问题是在使用jQuery时获取该按钮的ClientID。我已经尝试过：

$('#<%= Button1.ClientID %>')

路由，但是这样做行不通，因为当页面加载时，按钮不存在。

基本代码如下：

<asp:listview>
 <itemtemplate>
  <td runat="server">
   <div class="container">
    <asp:linkbutton id="Button1" runat="server" text="View Details" />
     fun and exciting stuff here...
   </div>
  </td>
 </itemtemplate>
</asp:listview>

任何建议或帮助都非常感激！

- riceboyler

Answer 1

为什么不给这些链接按钮分配一个特定的CSS类呢？

<asp:linkbutton id="Button1" runat="server" text="View Details" CssClass="detailsButtons" />

然后在jquery中只需选择类来一次性分配它们。

$(".detailsButtons").click( function() { .... } );

如果由于对象在那个时间点未被创建而无法使用，你可以在jquery中使用新的live()方法。它将为任何动态添加的元素分配事件。

希望这有所帮助。

- Jesse Brown

---

非常有趣的想法，使用live()方法。我可能会尝试一下。使用类的问题是我需要在特定按钮上触发click()事件，因此一次性分配所有按钮不会达到我的目的。然而，live可能有效，所以我要试一试！ - riceboyler

+1 如果项目属于逻辑类，则应该按照这样的方式进行引用。这正是正确的解决方案（其中bdukes给出了实际答案）。 - annakata

Answer 2

使用脚本语句的替代方法:

$('#<%= Button1.ClientID %>')

使用绑定表达式：

$('#<%# Button1.ClientID %>')

注意区别在于#而不是=。

绑定表达式在数据绑定时进行评估，因此您的表达式将在当前数据项的上下文中进行评估。脚本块在页面呈现时（在页面生命周期的最后）进行评估，并在页面的上下文中进行评估，而不是特定的数据项。

- Trent

---

我已经尝试在ItemTemplate中使用<%#btnAdd.ClientID %>，但对于ListView无效。 - Nickz

Answer 3

你可以使用CSS类来触发点击事件。

<a class="confirm" id="alert" onmouseover="got('<%# Eval("Gift_ID") %>','<%= Session["member_id"] %>')">Redeem Now</a> 

使用jQuery来基于这个类触发点击事件。

$(function() {
        $(".confirm").easyconfirm();
        $(".confirm").click(function() {
            var id = document.getElementById("test").value;
            var mem_id = document.getElementById("test1").value;
            document.getElementById("test").setAttribute("value", "");
            document.getElementById("test1").setAttribute("value", "");
            var param = "{'id':'" + id + "','mem_id':'" + mem_id + "'}"
            $.ajax({

                type: "POST",
                url: "Offer.aspx/Hello_World",
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success: function(msg) {
                    alert("hello");
                    $('#myDiv').text(msg.d);

                }
            });

        });

    });

- Karthik

Answer 4

将ListView的ItemDataBound事件绑定到一个方法上。在该方法中，可以使用FindControl方法获取每个列表项的LinkButton的引用，方法参数为ListViewItemEventArgs，其Item属性代表该列表项。通过该引用，可以获取ClientID，并进行必要的操作。 更新
关于如何处理该按钮的引用，最简单的方式可能是在ItemDataBound事件中分配单击事件，例如：

var button = (Button)e.Item.FindControl("Button1");
button.OnClientClick = "ShowEditDialog(" + Eval("ItemId") + ")";

如果您需要在客户端上连接它，也许您可以维护一个将ClientIDs映射到Item IDs的字典，并将该字典发送到客户端，在那里您可以遍历它并连接事件。

- bdukes

---

虽然您的解决方案乍一看似乎可以运行，但问题在于注入ClientID回页面，以便我可以在客户端使用jQuery引用它。也许我没有理解您的意思？ - riceboyler

Answer 5

你可以使用以下语法选择按钮（假设Button1是按钮的服务器ID）：

$("[id$=Button1]")

这将选择所有id以“Button1”结尾的DOM元素。

这是必要的，因为元素的结果客户端id反映了服务器控件结构。

- tanathos

Answer 6

如果你想要点击事件，你不能使用 linkbutton 的 OnClientClick 属性吗？还是在 3.5 中移除了它？

- Al W