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

标签 javascript asp.net user-interface

我正在尝试在单个页面上使用 ascx 控件的多个实例。只有页面上的最后一个控件有效。我从这篇文章中了解到[Asp.Net User Control does not work correctly when multiple are added to one form该问题与 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);"

关于javascript - 如何在页面上引用多个相同的用户控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27205875/

相关文章:

javascript - 缓存 jQuery 变量

JavaScript 枚举

asp.net - 通过 ASP.NET 应用程序启用 process.start 需要哪些权限?

ruby - 如何禁用 edit_line

javascript - 使用 jquery 动态添加字幕内容

javascript - 如何使用api修改bigcommerce前端(在应用程序中添加js代码)

javascript - 如何从代码隐藏中的用户控件中提取所有 javascript 代码

asp.net - 如何为 ValidateAntiForgeryToken 选择盐值

jquery - 如何在 jquery ui 主题风格中显示工具提示

python - 为 matplotlib 安装 GUI 后端的最简单方法?