在 aspx 页面中使用 aspx 用户控件的多个实例答案

【问题标题】：Using multiple instances of an aspx user control in a aspx page在 aspx 页面中使用 aspx 用户控件的多个实例
【发布时间】：2014-02-13 17:37:28
【问题描述】：

我在一个 aspx 页面中使用多个 aspx 用户控件实例时遇到了问题。当我尝试通过 Java 脚本获取用户控件元素值时会发生这种情况。

用户控制代码：

<script type="text/javascript">
    function ucFun()
    {
        var a = document.getElementById("<%=tbName.ClientID%>");
        alert(a.value);
        return false;
    }
</script>
<asp:Label Text="Name" runat="server" ID="lblname"></asp:Label>
<asp:TextBox ID="tbName" runat="server" ></asp:TextBox>
<asp:Button ID="btSubmit" runat="server" Text="Go" OnClientClick="ucFun()" />

网页表单代码

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
            <uc:cont runat="server" ID="ucID" />
                <uc:cont runat="server" ID="Cont1" />
                <uc:cont runat="server" ID="Cont2" />
            </div>
        </form>
    </body>
</html>

单击“执行”按钮时，它会在警报框中显示 null，因为该元素未定义。但是，当我在表单中有一个用户控件实例时，它会正确显示文本框的值。

有什么办法可以写这个吗..

【问题讨论】：

由于您的函数名称没有改变，当您添加第二个控件时，ucFun 的第一个版本将被覆盖。
感谢鲁本斯的回复。如果我需要验证 UC 字段，那么我必须在 UC 上编写 JS 获取字段值。使用多个 UC 实例将失败。我们怎样才能实现它

标签： javascript asp.net webusercontrol

【解决方案1】：

参考帖子中的类似问题

Javascript functions inside ASP.NET User Control

您需要使用ClientScriptManager，如下例所示

 <%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  public void Page_Load(Object sender, EventArgs e)
  {
    // Define the name and type of the client scripts on the page.
    String csname1 = "PopupScript";
    String csname2 = "ButtonClickScript";
    Type cstype = this.GetType();

    // Get a ClientScriptManager reference from the Page class.
    ClientScriptManager cs = Page.ClientScript;

    // Check to see if the startup script is already registered.
    if (!cs.IsStartupScriptRegistered(cstype, csname1))
    {
      String cstext1 = "alert('Hello World');";
      cs.RegisterStartupScript(cstype, csname1, cstext1, true);
    }

    // Check to see if the client script is already registered.
    if (!cs.IsClientScriptBlockRegistered(cstype, csname2))
    {
      StringBuilder cstext2 = new StringBuilder();
      cstext2.Append("<script type=\"text/javascript\"> function DoClick() {");
      cstext2.Append("Form1.Message.value='Text from client script.'} </");
      cstext2.Append("script>");
      cs.RegisterClientScriptBlock(cstype, csname2, cstext2.ToString(), false);
    }
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>ClientScriptManager Example</title>
  </head>
  <body>
     <form id="Form1"
         runat="server">
        <input type="text" id="Message" /> <input type="button" value="ClickMe" onclick="DoClick()" />
     </form>
  </body>
</html>

【讨论】：

我知道我们可以通过从服务器端注册脚本来限制脚本注册。但是，我们无法获取实例的适当字段值，因为我们只是为一个实例注册了一个脚本。我的意思是显示返回用户控件实例的适当字段值。
这并没有解决问题中指定的问题，它是一个完全独立的主题。

【解决方案2】：

经过一番搜索，找到了不同的解决方案。

http://www.aspsnippets.com/Articles/Issue-JavaScript-in-WebUserControl-not-working-when-used-multiple-times-on-same-page.aspx

这里他们在 javascript 名称后附加了一个 uniqueID，因此与 javascript 没有冲突。

UserControl.CS

protected string uniqueKey;
protected void Page_Load(object sender, EventArgs e)
{
    this.uniqueKey = Guid.NewGuid().ToString("N");
    this.Button1.Attributes["onclick"] = "return DisplayMessage_" + uniqueKey + "();";
}

UserControl.aspx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UC_TestCS.ascx.cs" Inherits="UC_TestCS" %>
<script type ="text/javascript">
function DisplayMessage_<%=uniqueKey %>() {
    var message = document.getElementById("<%=TextBox1.ClientID %>").value;
    alert(message);
    return false;
}
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Show Message" />

【讨论】：

这行得通，但是当内容页面有回发时，这行不通，因为 uniqueKey 已更改
这对我帮助很大。谢谢。
感谢您的提示，@Muthukumar。我使用“this.ClientID”（用户控件的 ClientID）而不是您建议的 uniqueKey 得到了相同的结果。毕竟，它是独一无二的，并且已经为您生成了。