Question

我有一个用户控件，我想在页面上多次使用。所以我尝试了将Control的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);
    }
};

最后使用带有多个实例的Above Control的页面：

<%@ 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>

Answer 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;
        }
};

使用javascript的ASP.Net：在Webform中使用控件的多个实例

1 个答案: