带有 javascript 的 ASP.Net：在 Web 窗体中使用控件的多个实例答案

【问题标题】：ASP.Net with javascript: Using multiple instances of a control in a Webform带有 javascript 的 ASP.Net：在 Web 窗体中使用控件的多个实例
【发布时间】：2017-06-28 14:37:56
【问题描述】：

我有一个用户控件，我想在一个页面上多次使用它。所以我尝试了将控件的 JS 移动到一个文件中并为其创建一个原型的方法，以便它在页面上顺利运行。但是在运行解决方案时，会出现以下错误： 未捕获的 TypeError：CtrlNameCtrlName1 不是构造函数

我无法找到我在哪里犯了错误。任何帮助将不胜感激。

谢谢。

带有标记的用户控件：

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CtrlName.ascx.vb" Inherits="MultiInstanceControl.CtrlName" %>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<br />
<asp:Panel ID="pnlSearch" runat="server" Style="background-color: yellow;width: 30px;height: 30px;"></asp:Panel>
<br />
<input id="txtInput" type="text" />

<script  type="text/javascript" src="CtrlNameJS.js"></script>

<script type="text/javascript">

    function CtrlName<%=me.ClientID%>() {
        this.pnlSearchClientID = <%=pnlSearch.ClientID%>;
              this.txtSearchClientID = <%=txtSearch.ClientID%>;
              this.txtInputControl = document.getElementById('txtInput'); 
              this.Category = <%=Category%>; 
    }

    CtrlName<%=me.ClientID%> = CtrlName.prototype;  

</script>

这是它使用的 JS 文件内容：

function CtrlName() {
}

CtrlName.prototype = {
    HidePanel: function () {
        if (Category == '1') {
            pnlSearchClientID.style.backGroundColor = 'Red';
        }
        else {
            pnlSearchClientID.style.backGroundColor = 'Blue';
        }
    },
    GetSearchedText: function () {
        alert($find(txtSearchClientID).get_value());
    },
    GetInputText: function () {
        alert(txtInputControl.value);
    }
};

最后是使用带有多个实例的上述控件的页面：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="MultiInstanceControl._default" %>
<%@ Register Src="~/CtrlName.ascx" TagPrefix="uc1" TagName="CtrlName" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div> 1. First Instance <br /><br />
          <uc1:CtrlName ID="CtrlName1" IsMultipleFile="false" Category="1" runat="server" />
    <asp:Button runat="server" ID="btnTest1" Text="Get Value" OnClientClick="return btnTest_ClientClick('1');" />
        <br /><br />
<br />
         <br /><br /> <br /><br />
        2. Second Instance <br /><br />
             <uc1:CtrlName ID="CtrlName2" IsMultipleFile="false" Category="2" runat="server" />
  <asp:Button runat="server" ID="Button2" Text="Get Value" OnClientClick="return btnTest_ClientClick('2');" />

    </div>

        <script type="text/javascript">

            var inst1 = new CtrlName<%=CtrlName1.ClientID %>();
            var inst2 = new CtrlName<%=CtrlName2.ClientID%>();

            function btnTest_ClientClick(strVal) {
                if (strVal == '1') {
                    inst1.HidePanel();
                    inst1.GetSearchedText();
                    inst1.GetInputText();

                }
                else {
                    inst2.HidePanel();
                    inst2.GetSearchedText();
                    inst2.GetInputText();
                }
                return false;
            }


</script>
    </form>
</body>
</html>

【问题讨论】：

标签： javascript asp.net webforms user-controls

【解决方案1】：

在所有像这样加载的脚本之后初始化变量（使用 JQuery）：

$(document).ready(function()){
        var inst1 = new CtrlName<%=CtrlName1.ClientID %>();
        var inst2 = new CtrlName<%=CtrlName2.ClientID%>();

        function btnTest_ClientClick(strVal) {
            if (strVal == '1') {
                inst1.HidePanel();
                inst1.GetSearchedText();
                inst1.GetInputText();

            }
            else {
                inst2.HidePanel();
                inst2.GetSearchedText();
                inst2.GetInputText();
            }
            return false;
        }
};

【讨论】：

即使这会引发错误：Uncaught TypeError: CtrlNameCtrlName1 is not a constructor at HTMLDocument. (default.aspx:86) at j (jquery.min.js:2) at k (jquery. min.js:2)