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

timekeeper 发表于 Dev

timeKeeper

我正在尝试在单个页面上使用多个ascx控件实例。仅页面上的最后一个控件有效。我从这篇文章中了解到[将多个添加到一种表单中该问题与ID有关时，Asp.Net用户控件无法正常工作；我以某种方式试图重用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>

您能告诉我如何进行这项工作吗？

谢谢你的帮助。

米海·丁库列斯库（Mihai Dinculescu）

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);"

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。