iv'e got a list of user controls which i bind to a repeater .
the user control : (Example) "AppProduct"
<div>
<asp:Button ID="btn_details" runat="server" Text="Trigger" />
<asp:HiddenField ID="pid" runat="server" value="5"/>
</div>
the repeater :
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<App:Product ID="P1" runat="server" />
</ItemTemplate>
</asp:Repeater>
the problem :
when i press a certain "btn_details" on a certain user control i need to call a javascript or Jquery function which does something according to the value of "pid" , but those are the Server Side id's how can i get the ClientID for these controls for the user control i clicked on.
iv'e got a list of user controls which i bind to a repeater .
the user control : (Example) "AppProduct"
<div>
<asp:Button ID="btn_details" runat="server" Text="Trigger" />
<asp:HiddenField ID="pid" runat="server" value="5"/>
</div>
the repeater :
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<App:Product ID="P1" runat="server" />
</ItemTemplate>
</asp:Repeater>
the problem :
when i press a certain "btn_details" on a certain user control i need to call a javascript or Jquery function which does something according to the value of "pid" , but those are the Server Side id's how can i get the ClientID for these controls for the user control i clicked on.
Share Improve this question edited Dec 31, 2011 at 0:01 eran otzap asked Dec 30, 2011 at 22:37 eran otzaperan otzap 12.5k21 gold badges88 silver badges146 bronze badges4 Answers
Reset to default 2.NET 4.0 set
ClientIDMode = "Static"
For older .NET use
'<%= Control.ClientID %>'
For your case
function Get_Product_Details(uc) {
var hidden_pid = uc.getElementById('<%= pid.ClientID %>');
}
i found a work around for this problem
first i set the repeater ClientIDMode:
<asp:Repeater ID="Repeater1" runat="server" ClientIDMode="Predictable">
<ItemTemplate>
<App:Product ID="prd1" runat="server" />
</ItemTemplate>
</asp:Repeater>
secondly i added a function to the btn_details on clientClick
<asp:Button ID="btn_details" runat="server" Text="פרטים נוספים" OnClientClick="Get_Product_Details(this);" />
in that function i extract the client id for the button and resolved the client id for the hidden field pid
<asp:HiddenField ID="pid" runat="server" Value="5"/>
the function which will extract the client id //ContentPlaceHolder1_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;
Since a repeater can include multiple instances of your control, it will append a number to the ID to uniquely identify it. Use jQuery to find the other element relative to the button. .siblings() should do the trick.
instead of using an hidden element for the pid on the button, you could instead attach the value via the 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>");
}
an access it like this on though the client js item:
function Get_Product_Details(item)
{
var productId = $(item).data('ProductID');
}