Question

I’m attempting to do something which should be relatively simple. I’m using a ListView to show a number of items, using the ItemTemplate. Inside the ItemTemplate I have a div surrounding the full item, so that I can highlight on a hover event, (being handled already by jQuery).

What I would like to do is have the click event on the div fire a button to open a details view for that specific item. The problem I’m having is pulling back the ClientID for that button while using jQuery. I’ve tried the:

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

route, but that doesn’t work, as the Button doesn’t exist when the page loads.

The basic code is as follows:

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

Any suggestions or help are much appreciated!

Answer 1

Wire up a method to the ItemDataBound event of your ListView. In there, you can use FindControl method on the Item property of the ListViewItemEventArgs parameter to get a reference to that LinkButton for each item in your list. From that reference, you can get the ClientID, and do with it whatever you need to do.

UPDATE
In terms of what you can do with the reference to the button, the easiest is probably to just assign your click event in the ItemDataBound event, maybe something like this

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

If you need to wire it up on the client side, maybe you could maintain a dictionary mapping ClientIDs to Item IDs, and send that dictionary down to the client, where you could iterate over it and wire the events up.