如何在同一网页上多次使用 WebUserControl答案

【问题标题】：How to use WebUserControl multiple times on same web page如何在同一网页上多次使用 WebUserControl
【发布时间】：2015-03-15 17:45:49
【问题描述】：

在 Asp.net 网页应用程序上工作。我有一个用户 WebUserControl，它包含两个文本框和几个 javascript 语法，我的控件将一个文本框信息复制到另一个文本框中。当我多次使用我的用户控件时出现问题在同一页上。多次使用后，我的用户控件无法正常工作，如何解决此问题

我的用户控件语法：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="transferControl.ascx.cs" Inherits="testControl.transferControl" %>


    <script type="text/javascript">
        function IsAccNumberValid(txtAccountNumber) {
            debugger;
            document.getElementById("<%= txtTo.ClientID %>").value = txtAccountNumber.value;
        }
</script>


<asp:TextBox runat="server" ID="txtFrom" onblur="Javascript:IsAccNumberValid(this);" />

<asp:TextBox ID="txtTo" runat="server"></asp:TextBox>

我使用的页面语法：

<%@ Register src="transferControl.ascx" tagname="transferControl" tagprefix="uc1" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">


    <uc1:transferControl ID="transferControl1" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <uc1:transferControl ID="transferControl2" runat="server" />


</asp:Content>

【问题讨论】：

同一网页上同一用户控件的多个副本也会在网页上创建多个 java 脚本代码副本。在您的情况下， IsAccNumberValid() 将在您的网页上定义两次，并且会为此引发 JavaScript 错误。

标签： javascript asp.net .net webusercontrol

【解决方案1】：

像这样更改您的用户控制代码。以下代码将 IsAccNumberValid() 函数替换为直接的 Javascript 语句。所以不会有任何重复的函数定义。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="transferControl.ascx.cs" Inherits="testControl.transferControl" %>

<asp:TextBox runat="server" ID="txtFrom"  />
<asp:TextBox ID="txtTo" runat="server"  ></asp:TextBox>
<script type="text/javascript">
        var txtFrom = document.getElementById("<%= txtFrom.ClientID %>");
        var txtTo = document.getElementById("<%= txtTo.ClientID %>");

        txtFrom.onblur = function () {
            txtTo.value = txtFrom.value;
        }
</script>

【讨论】：

Kiran Varsani，感谢您的回复。您的语法不起作用。请检查一下。
我改变了脚本标签和文本框的顺序。这解决了这个问题。需要首先定义文本框，因为在这种情况下，页面会尝试立即运行 JavaScript 函数。请试试这个代码。

【解决方案2】：

一般的解决方案是使用唯一的密钥。

在后台代码 (C#) 中生成唯一键：

protected string uniqueKey;
protected void Page_Load(object sender, EventArgs e)
{
    this.uniqueKey = Guid.NewGuid().ToString("N");
}

使用 javascript 函数名称或 html 元素 ID 的键使其唯一：

<script type="text/javascript">
function DisplayMessage_<%=uniqueKey %>() {
    var message = document.getElementById("<%=TextBox1.ClientID %>").value;
    alert(message);
    return false;
}
</script>
<div id="myDiv_<%=uniqueKey %>">Test</div>

查看link了解更多详情。

【讨论】：