ASP.NET Web控件中的JavaScript冲突

Question

folks. 乡亲 I have searched in google for answers for my question, but all I could found was solutions about unique IDs of the generated HTML elements of asp.net web contros. 我已经在google中搜索了有关我的问题的答案，但是我所能找到的只是关于asp.net网络控制生成的HTML元素的唯一ID的解决方案。 But that's not what I'm looking for. 但这不是我想要的。 What I need is a way to program the javascript of my web control in a way that it does not conflict when there are multiple instances of it in the same page. 我需要的是一种对Web控件的javascript进行编程的方式，以便在同一页面中有多个实例时，它不会发生冲突。 For example, consider the following simple user control, wiche has a text box and a button, and that when the user clicks the button it shows an alert with the value of the thext box: 例如，考虑以下简单的用户控件，wiche有一个文本框和一个按钮，当用户单击该按钮时，它会显示带有thext框值的警报：

Now imagine we have two or more instances of such user contol. 现在想象一下，我们有两个或更多这种用户控制的实例。 How can I make sure that the javascript will show the message of the proper text box, since their IDs will be generated dynamically and will be all be all different of each other? 我如何确定javascript将显示正确文本框的消息，因为它们的ID会动态生成，并且彼此之间会有所不同？ I know how to discover these IDs at runtime, that's not a problem. 我知道如何在运行时发现这些ID，这不是问题。 But the problem is how to program the user control so that the javascrip references only the elements of the instance to wich it makes part, just like the button in my simple user control example. 但是问题是如何对用户控件进行编程，以便javascrip仅引用实例的元素以使其成为实例，就像我的简单用户控件示例中的按钮一样。 If there are ten user controls, then it will be ten buttons, and of course ten text boxes. 如果有十个用户控件，那么它将是十个按钮，当然还有十个文本框。 The simple alert message here begins to became a bit not very simple, I think. 我认为，这里的简单警报消息开始变得不太简单。

But maybe it's really simple, I just don't know how. 但是也许真的很简单，我只是不知道怎么做。 Thanks anyone who can help me with this. 感谢任何可以帮助我的人。

Answer 1

There are many ways you can approach this. 有很多方法可以解决此问题。

The one I like to use is to write the JS functions so that they don't refer explicitly to any element, but receive the element (or element ID) as a parameter. 我喜欢使用的是编写JS函数，这样它们就不会显式引用任何元素，而是将元素（或元素ID）作为参数接收。 Then in the code behind of your (user) control, build a small piece of JS which just sets OnClientClick or calls jQuery (or whatever) to bind the elements together. 然后，在（用户）控件后面的代码中，构建一小段JS，该JS只需设置OnClientClick或调用jQuery（或任何其他方式）即可将元素绑定在一起。

An example should make it clearer: 一个例子应该更清楚：

MyUserControl.ascx 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 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 MyUserControl.js

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

elsewhere (page, parent control, ...) 其他地方（页面，父控件等）

<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>

This way the actual JS which does the work is included only once and all necessary control ID's are passed as parameters. 这样，实际工作的JS仅包含一次，并且所有必需的控件ID都作为参数传递。

Of course it is preferred to bind the functions to events using jQuery's on() function (or a similar mechanism depending on what frameworks you use) than to use OnClientClick, so that the markup ends up as free of JS as possible. 当然，与使用OnClientClick相比，最好使用jQuery的on()函数（或类似的机制，取决于所使用的框架on()将函数绑定到事件，以使标记最终尽可能摆脱JS。

Answer 2

Use Clientidmode and attach click event handler(javascript) to each button. 使用Clientidmode并将click事件处理程序（javascript）附加到每个按钮。 Then by using javascrpt/jquery get button id and get last two digits and get corresponding text id by appending the last two digits got from button id to static text "txtEcho" 然后通过使用javascrpt / jquery获取按钮ID并获取最后两位数字，并通过将从按钮ID获得的最后两位数字附加到静态文本“ txtEcho”来获取对应的文本ID。

Example: 例：

Text control: 文字控制：

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

Button control: 按钮控制：

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

Answer 3

One of the solution is to attach click event listener to the parent element and then in function callback listen for element. 解决方案之一是将click事件侦听器附加到父元素，然后在函数回调中侦听元素。 In this way you dont have to worry about IDs at all you can simply work based on the classes or event source type only. 这样，您完全不必担心ID，您仅可以仅基于类或事件源类型来工作。 Check this link 检查此链接

Check following psudo code 检查以下伪代码

<div class="portion" >

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

<div/>


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

ASP.NET Web控件中的JavaScript冲突

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-03-13 13:21:02

解决方案2
0 2013-03-13 12:47:47

解决方案3
0 2013-03-13 13:38:22

ASP.NET Web控件中的JavaScript冲突

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-03-13 13:21:02

解决方案2 0 2013-03-13 12:47:47

解决方案3 0 2013-03-13 13:38:22

解决方案1
1 已采纳 2013-03-13 13:21:02

解决方案2
0 2013-03-13 12:47:47

解决方案3
0 2013-03-13 13:38:22