Retrieve the ClientID for a specific repeater-restricted user control

Question

iv'e got a list of user controls that I associate with the repeater.

user control: (Example) "AppProduct"

<div> <asp:Button ID="btn_details" runat="server" Text="Trigger" /> <asp:HiddenField ID="pid" runat="server" value="5"/> </div> 

repeater:

  <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <App:Product ID="P1" runat="server" /> </ItemTemplate> </asp:Repeater> 

problem:

when I click on certain “btn_details” on a specific user control, I need to call a javascript or jQuery function that does something according to the “pid” value, but this is a server-side identifier how can I get the ClientID for these user-specific controls the control I clicked on.

Answer 1

I found a job for this problem

I installed the ClientIDMode repeater first:

  <asp:Repeater ID="Repeater1" runat="server" ClientIDMode="Predictable"> <ItemTemplate> <App:Product ID="prd1" runat="server" /> </ItemTemplate> </asp:Repeater> 

Secondly, I added a function to btn_details on clientClick

  <asp:Button ID="btn_details" runat="server" Text="פרטים נוספים" OnClientClick="Get_Product_Details(this);" /> 

in this function, I extract the client identifier for the button and resolve the client identifier for the hidden pid field

  <asp:HiddenField ID="pid" runat="server" Value="5"/> 

function that will retrieve the client identifier // ContentPlaceHolder 1_Repeater1_Prd_2_pid_2:

  function Get_Product_Details(btn) { //ContentPlaceHolder1_Repeater1_Prd_2_btn_details_2 var s = btn.id; var start = s.indexOf("btn_details"); var end = s.lastIndexOf("_"); sub = s.substring(start, end); s = s.replace(sub, "pid"); var hidden = document.getElementById(s); var id = hidden.value; 

Answer 2

.NET 4.0 Suite

  ClientIDMode = "Static" 

For older .NET applications

  '<%= Control.ClientID %>' 

For your case

  function Get_Product_Details(uc) { var hidden_pid = uc.getElementById('<%= pid.ClientID %>'); } 

Answer 3

Since the repeater can include multiple instances of your control, it will add a number to the identifier to uniquely identify it. Use jQuery to find another element relative to the button. . siblings () should do the trick.

Answer 4

instead of using the hidden element for the pid on the button, you can instead add a value via jquery.data:

  private StringBuilder builder; public void Page_Load(object sender, EventArgs e) { Repeater1.ItemDataBound += generateData; Repeater1.DataBound += outputGeneratedData; if (!Postback) { List<Product> products = new List<Product>(); // generate our data to bind Repeater1.DataSource = products; Repeater1.DataBind(); } } // it is possible to do this inside the user control as well on page_load which would simplify it. public void generateData(objectSender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { // presumes your custom control is the first control in the repeater.. if not you can use FindControl to get the relevent controly MyUserControl ctl = (MyUserControl)e.item.Controls[0]; // you could expose the buttons id in a property on the control but if prefered just use FindControl. builder.AppendFormat("$('{0}').data('PID','{1}');", ctl.FindControl('btn_details').ClientID ,((Product)e.item.DataItem).ProductID); } } public void outputGeneratedData(object sender,Eventargs e) { Response.Write(@"<script type='text/javascript'> + builder.ToString() + "</script>"); } 

access it like this though js client element:

  function Get_Product_Details(item) { var productId = $(item).data('ProductID'); }