Question

我有一个带有2个按钮的用户控件（Button1，Button2）＆amp; 1个文本框（TextBox1）。在Button1 Clientclick上，我尝试获取button1的ControlID。

在主页面中，我有两个相同用户控件的实例。当点击第一个用户控制按钮1时，单击我得到最后一个用户控件ID（这里我有两个控件）

UserControl1.Button1click给出：MyUserControl2_Button1（假设显示MyUserControl1_Button1），请说明问题所在。我感谢您的帮助。谢谢 enter image description here

＆＃13;

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs" Inherits="UserControlProject.UserControl.MyUserControl" %>

<script type="text/javascript">
    function button1client(ctrl) {
        alert(document.getElementById("<%= Button1.ClientID %>").id);
    }
    function button2client(ctrl) {
        alert(document.getElementById("<%= Button2.ClientID %>").id);
    }
</script>

<table width="100" border="1" runat="server">
    <tr>
        <td>
            <table width="100%" align="right" runat="server">
                <tr>
                    <td>
                        <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" OnClientClick="button1client(this);return false;" />
                        <asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" OnClientClick="button2client(this);return false;" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </td>
    </tr>
</table>

  
 MainPage.aspx
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestUserControl.aspx.cs" Inherits="UserControlProject.TestUserControl" %>

<%@ Register Src="~/UserControl/MyUserControl.ascx" TagPrefix="uc1" TagName="MyUserControl" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        
        <div>
            <table width="100%">
                <tr>
                    <td>
                        <uc1:MyUserControl runat="server" ID="MyUserControl1" />
                    </td>
                    <td>
                        <uc1:MyUserControl runat="server" ID="MyUserControl2" />
                    </td>
                </tr>
            </table>
        </div>

    </form>
</body>
</html>

＆＃13;

PageSource显示：

＆＃13;

<script type="text/javascript">
    function button1client(ctrl) {
        alert(document.getElementById("MyUserControl1_Button1").id);
    }
    function button2client(ctrl) {
        alert(document.getElementById("MyUserControl1_Button2").id);
    }
</script>

<table width="100" border="1">
	<tr>
		<td>
            <table width="100%" align="right">
			<tr>
				<td>
                        <input type="submit" name="MyUserControl1$Button1" value="Button1" onclick="button1client(this);return false;" id="MyUserControl1_Button1" />
                        <input type="submit" name="MyUserControl1$Button2" value="Button2" onclick="button2client(this);return false;" id="MyUserControl1_Button2" />
                    </td>
			</tr>
		</table>
		
        </td>
	</tr>
	<tr>
		<td>
            <input name="MyUserControl1$TextBox1" type="text" id="MyUserControl1_TextBox1" />
        </td>
	</tr>
</table>


                    </td>
                    <td>
                        



<script type="text/javascript">
    function button1client(ctrl) {
        alert(document.getElementById("MyUserControl2_Button1").id);
    }
    function button2client(ctrl) {
        alert(document.getElementById("MyUserControl2_Button2").id);
    }
</script>

<table width="100" border="1">
	<tr>
		<td>
            <table width="100%" align="right">
			<tr>
				<td>
                        <input type="submit" name="MyUserControl2$Button1" value="Button1" onclick="button1client(this);return false;" id="MyUserControl2_Button1" />
                        <input type="submit" name="MyUserControl2$Button2" value="Button2" onclick="button2client(this);return false;" id="MyUserControl2_Button2" />
                    </td>
			</tr>
		</table>
		
        </td>
	</tr>
	<tr>
		<td>
            <input name="MyUserControl2$TextBox1" type="text" id="MyUserControl2_TextBox1" />
        </td>
	</tr>
</table>


                    </td>
                </tr>
            </table>
        </div>

＆＃13;

Answer 1

这是吊装的结果。基本上这就是javascript的工作方式。要了解它，请在运行时更好地检查页面源。我会尽力在这里解释一下。

当您运行ASP.NET应用程序时，它会加载两个用户控件（因为您在主页中都有它们）。

两个控件都有相同名称的javascript方法。

First Control加载：

function button1client(ctrl) {
        alert(document.getElementById("MyUserControl1_Button1").id);
    }
function button2client(ctrl) {
        alert(document.getElementById("MyUserControl1_Button2").id);
    }

加载的第二个用户控件具有相同的功能名称。

function button1client(ctrl) {
            alert(document.getElementById("MyUserControl2_Button1").id);
        }
function button2client(ctrl) {
            alert(document.getElementById("MyUserControl2_Button2").id);
        }

由于提升而导致的Javascript覆盖旧功能。它们不再存在于javascript环境中。因此，当单击任何按钮时，将调用第二个控件的方法。

我希望它有所帮助。

Answer 2

@chrana解决方案将顺利运行。如果您准备在页面中使用jQuery，此解决方案也可以正常工作。

用户控制代码

<table id="Table2" width="100%" align="right" runat="server">
                <tr>
                    <td>
                        <asp:Button ID="Button1" runat="server" CssClass="btn" Text="Button1" OnClick="Button1_Click" />
                        <asp:Button ID="Button2" runat="server" CssClass="btn" Text="Button2" OnClick="Button2_Click" />
                    </td>
                </tr>
            </table>

脚本代码

<script type="text/javascript">
        $(".btn").on("click", function () {
            alert($(this).attr('id'));
        });
    </script>

当我们在asp.net?

2 个答案: