0

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

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

但也许这真的很简单，我只是不知道怎么做。感谢任何可以帮助我的人。

4

3 回答 3

1

有很多方法可以解决这个问题。

我喜欢使用的一种是编写 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.ascx.cs

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

MyUserControl.js

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

其他地方（页面，父控件，...）

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="MyUserControl.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <my:UserControl runat="server" ID="control1" />
        <my:UserControl runat="server" ID="control2" />
        <my:UserControl runat="server" ID="control3" />
        <my:UserControl runat="server" ID="control4" />
        <my:UserControl runat="server" ID="control5" />
    </div>
</form>
</body>

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

当然，最好使用 jQuery 的on()函数（或类似的机制，具体取决于您使用的框架）将函数绑定到事件，而不是使用 OnClientClick，这样标记最终会尽可能地没有 JS。

于 2013-03-13T13:21:02.030 回答
0

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

例子：

文字控制：

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

按钮控制：

ID="btnEcho01" runat="server" ClientIDMode="Static"
于 2013-03-13T12:47:47.843 回答
0

解决方案之一是将单击事件侦听器附加到父元素，然后在函数回调中侦听元素。通过这种方式，您根本不必担心 ID，您可以仅基于类或事件源类型进行工作。检查此链接

检查以下伪代码

<div class="portion" >

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

<div/>


//jquery psudo code
$(".portion").live(function(e){
if (e.target == input){
//do action
}
});
于 2013-03-13T13:38:22.053 回答