使用 javascript ASP.Net:在 Web 窗体中使用控件的多个实例

我有一个用户控件，我想在页面上多次使用。因此，我尝试了将控件的JS移动到文件中并为其创建原型的方法，以便它在页面上顺利运行。但在运行解决方案时，它会给出以下错误：未捕获的类型错误： 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>

像这样加载所有脚本后进行变量初始化(使用 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;
        }
};

相关内容

最新更新

热门标签：