如何在页面上引用多个相同的用户控件

How to reference multiple identical user controls on a page

本文关键字：控件 用户 引用      更新时间：2023-09-26

我正在尝试在单个页面上使用ascx控件的多个实例。只有页面上的最后一个控件有效。 我从这篇文章中了解到 [Asp.Net 当多个添加到一个表单时，用户控件无法正常工作，问题与 ID 有关;不知何故，我正在尝试重用 ID，并且正在编辑的特定控件未正确引用。但是，该页面上的代码很复杂，我不明白答案。 我创建了一个我的问题的小例子来演示。

这是我的用户控件：

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="testControl.ascx.vb" Inherits="Tempusforms.testControl" %>
    <script type="text/javascript">
        function getValue() {
            document.getElementById("<%=Label1.ClientID %>").innerHTML = getIndex();
        }
        function getIndex() {
            return document.getElementById("<%=droppit.ClientID %>").selectedIndex;
        }
    </script>
    <span>
 		    <asp:DropDownList ID="droppit" runat="server"  OnChange="getValue();" >
                <asp:ListItem Value="Select a Value"></asp:ListItem>              
                <asp:ListItem Value="one"></asp:ListItem>
                <asp:ListItem Value="two"></asp:ListItem>
                <asp:ListItem Value="three"></asp:ListItem> 
            </asp:DropDownList>
        
    </span>&nbsp;Index Value = 
    <span>
        <asp:label ID="Label1" runat="server" Text="mylabel" ></asp:label>        
    </span>

以下是使用这些控件的页面：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="userControlTest.aspx.vb" Inherits="Tempusforms.userControlTest" %>
<%@ Register src="../Common/testControl.ascx" tagname="testControl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:testControl ID="testControl1" runat="server" />
            <br /><br />
        <uc1:testControl ID="testControl2" runat="server" />
    </div>
    </form>
</body>
</html>

你能告诉我如何做到这一点吗？

感谢您的帮助。

ASP.NET 生成不同的ID，其中包括UserControl ID，因此ID不是这里的问题。

但是，问题出在您包含在用户控件中的 JS 代码上。这被重复，显然因此发生了不好的事情。

您应该将这些脚本置于用户控件之外，并将它们更改为使用参数。

像这样：

<script type="text/javascript">
    function getValue(ctrlID) {
        document.getElementById(ctrlID).innerHTML = getIndex(ctrlID);
    }
    function getIndex(ctrlID) {
        return document.getElementById(ctrlID).selectedIndex;
    }
</script>

您可以从用户控件调用这些函数，如下所示：OnChange="getValue(this.id);"

相关文章：