javascript 获取中继器中特定用户控件的 ClientID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8684737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get ClientID for a specific user control bounded in a repeater
提问by eran otzap
iv'e got a list of user controls which i bind to a repeater .
我得到了一个用户控件列表，我将其绑定到一个中继器。
the user control : (Example) "AppProduct"
用户控件：（示例）“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.
当我在某个用户控件上按下某个“btn_details”时，我需要调用一个 javascript 或 Jquery 函数，该函数根据“pid”的值执行某些操作，但这些是服务器端 ID，我如何获取这些控件的 ClientID对于我点击的用户控件。
采纳答案by eran otzap
i found a work around for this problem
我找到了解决这个问题的方法
first i set the repeater ClientIDMode:
首先我设置中继器 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
其次，我在 clientClick 上的 btn_details 中添加了一个函数
<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
在该函数中，我提取按钮的客户端 ID 并解析隐藏字段 pid 的客户端 ID
<asp:HiddenField ID="pid" runat="server" Value="5"/>
the function which will extract the client id //ContentPlaceHolder1_Repeater1_Prd_2_pid_2:
将提取客户端 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;
回答by Emmanuel N
.NET 4.0 set
.NET 4.0 集
ClientIDMode = "Static"
For older .NET use
对于较旧的 .NET 使用
'<%= Control.ClientID %>'
For your case
对于您的情况
function Get_Product_Details(uc) {
var hidden_pid = uc.getElementById('<%= pid.ClientID %>');
}
回答by Kat
instead of using an hidden element for the pid on the button, you could instead attach the value via the jquery .data:
您可以通过 jquery .data 附加值，而不是为按钮上的 pid 使用隐藏元素：
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:
通过客户端js项目像这样访问它：
function Get_Product_Details(item)
{
var productId = $(item).data('ProductID');
}
回答by Keith Walton
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.
由于转发器可以包含控件的多个实例，因此它将在 ID 后附加一个数字以唯一标识它。使用 jQuery 查找与按钮相关的其他元素。.siblings()应该可以解决问题。
