ASP.NET web控件中的JavaScript冲突

伙计们。 我在谷歌上搜索了我的问题的答案，但我能找到的只是关于asp.net web控件生成的HTML元素的唯一ID的解决方案但这不是我想要的。我需要的是一种编程web控件的javascript的方法，使其在同一页面中有多个实例时不会发生冲突。 例如，考虑下面的简单用户控件，WIKE有一个文本框和一个按钮，并且当用户单击按钮时，它显示一个带有THEXT框的值的警报：

现在假设我们有两个或更多这样的用户控件实例。我如何确保javascript将显示正确文本框的消息，因为它们的ID将动态生成，并且彼此都不同？我知道如何在运行时发现这些ID，这不是问题。但问题是如何对用户控件进行编程，以便javascrip只引用实例的元素，就像我的简单用户控件示例中的按钮一样。如果有十个用户控件，那么它将是十个按钮，当然还有十个文本框。我认为，这里简单的警告信息开始变得有点不太简单

---

但也许真的很简单，我只是不知道怎么做。感谢所有能够帮助我的人。

使用ClientMode并将click事件处理程序（javascript）附加到每个按钮。然后使用javascrpt/jquery获取按钮id并获取最后两位数字，通过将从按钮id获取的最后两位数字附加到静态文本“txtEcho”来获取相应的文本id

例如：

文本控件：

 ID="txtEcho01" runat="server" ClientIDMode="Static"

按钮控制：

ID="btnEcho01" runat="server" ClientIDMode="Static"

---

有很多方法可以做到这一点

我喜欢使用的方法是编写JS函数，这样它们就不会显式引用任何元素，而是将元素（或元素ID）作为参数接收。然后在（用户）控件的代码隐藏中，构建一小段JS，它只设置OnClientClick或调用jQuery（或其他）将元素绑定在一起

举一个例子可以更清楚地说明：

MyUserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyUserControl.ascx.cs" Inherits="MyUserControl" %>
<div style="border: 1px solid gray; margin: 1em;">
    My ID = "<%= ID%>"<br />
    <asp:TextBox runat="server" ID="tbx" />
    <asp:Button runat="server" ID="btn" Text="Alert!" />
</div>

MyUserControl.js

protected void Page_Load(object sender, EventArgs e)
{
    var script = string.Format("ShowAlert('{0}'); return false;", tbx.ClientID);
    btn.OnClientClick = script;
}

function ShowAlert(textboxId)
{
    var textbox = jQuery("#" + textboxId);
    alert(textbox.val());
}

其他位置（页面、父控件等）

这样，只包含一次执行工作的实际JS，所有必要的控件ID都作为参数传递

---

当然，与使用OnClientClick相比，最好使用jQuery的

on（）

函数（或类似机制，具体取决于您使用的框架）将函数绑定到事件，因此，标记最终尽可能不使用JS。

解决方案之一是将click事件侦听器附加到父元素，然后在函数回调中侦听元素。通过这种方式，您根本不必担心ID，只需基于类或事件源类型即可

检查以下psudo代码

<div class="portion" >

...
<input type="button"...>

<div/>


//jquery psudo code
$(".portion").live(function(e){
if (e.target == input){
//do action
}
});

...
//jquery psudo代码
$（“.partment”）.live（功能（e）{
如果（例如，目标==输入）{
//行动
}
});

<div class="portion" >

...
<input type="button"...>

<div/>


//jquery psudo code
$(".portion").live(function(e){
if (e.target == input){
//do action
}
});