同一JavaScript代码用于多个用户控件实例时无效

Question

我在我的网站上使用了一个用户控件，它实现了自动完成文本框的功能。我使用了JavaScript来处理keydown和onfocus客户端事件。以下是代码：

<script language="JavaScript" type="text/javascript">
function TriggeredKey(e) {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    if (keycode == 9) {
        document.getElementById("<%=pnlSearch.ClientID %>").style.visibility = 'hidden';
        document.getElementById("<%=pnlSearch.ClientID %>").style.display = 'none';
    }
    else {
        document.getElementById("<%=hdfkey.ClientID %>").value = keycode;
    }
    _dopostback();
}


function pasteIntoInput(el) {
    var text = document.getElementById("<%=txtSearch.ClientID %>").value;
    if (typeof text != "undefined" && text != "") {
        el.focus();
        el.value = el.value;
        if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
            var val = el.value;
            var selStart = el.selectionStart;
            el.value = val.slice(0, selStart) + val.slice(el.selectionEnd);
            el.selectionEnd = el.selectionStart = selStart + text.length;
        }
        else if (typeof document.selection != "undefined") {
            el.focus();
        }
    }
}

当我在aspx页面中使用一个此控件的实例时，它能正常工作，但是当我在同一页面上使用多个实例时，所有控件的JavaScript都被最后一个控件实例覆盖，其他控件都无法工作。

- raina

Answer 1

以下是我过去处理类似问题的方法...

像这样的块会放在一个外部 js 文件中，该文件在控件 ascx 中被引用。

    function UserControl() {
    }

    UserControl.prototype = {       
        DoStuff : function() {
                var x = this.clientID; 
                window.alert(this.pnlSearchClientID);
            },
        TriggeredKey : function(e) {
                var keycode;
                if (window.event) keycode = window.event.keyCode;
                if (keycode == 9) {
                    document.getElementById(this.pnlSearchClientID).style.visibility = 'hidden';
                    document.getElementById(this.pnlSearchClientID).style.display = 'none';
                }
                _dopostback();
            },
        pasteIntoInput : function() {
            var text = document.getElementById(this.txtSearchClientID).value;
        }
    };

这样的块会放在ascx文件中:

这是ASCX文件中的一个块：

<script type="text/javascript">
    function UserControl<%=this.ClientID%>() {
        this.pnlSearchClientID = <%=pnlSearch.ClientID%>;
        this.txtSearchClientID = <%=txtSearch.ClientID%>;
    }
    UserControl<%=this.ClientID%> = UserControl.prototype;

</script>

接下来，在包含用户控件的页面中：

<script type="text/javascript">
    var inst1 = new UserControl<%=instance.ClientID %>();  
    inst1.DoStuff();
</script>

这个想法是，您拥有一个基类，其中包含所有用户控件实例共享的功能。然后每个用户控件实例都有一个派生类，具有为该实例特定数据设置属性的新构造函数（即组成用户控件的控件的ID）。基类引用这些属性。派生类使用用户控件的ClientID命名，使其在页面上唯一。由于我目前没有访问asp.net，因此这里可能存在错误...

- Japple

---

谢谢回复。但请告诉我何时调用父页面的 JavaScript 代码。 - raina

你可以将页面JavaScript中所需的任何引用传递给用户控件JavaScript对象-在用户控件JavaScript对象中设置属性，将某些内容传递到构造函数中，或者将参数传递给在用户控件JavaScript对象上定义的方法。如果您为父页面定义了类似的JavaScript对象，则可以在实例化用户控件时将该对象传递给用户控件...有很多选择。 - Japple

我尝试按照上述方法进行，但没有成功。有人可以帮我吗： http://stackoverflow.com/questions/42156131/asp-net-with-javascript-using-multiple-instances-of-a-control-in-a-webform - user2561997

Answer 2

首先，我建议您将JavaScript函数定义在一个地方，例如父页面或全局引用文件中。这样，当您在单个页面上使用多个用户控件实例时，就不会重复呈现相同的函数。

然后，我建议您在调用函数时将pnlSearch和txtSearch控件的客户端ID传递到函数中，而不是将它们嵌入JavaScript函数中。

按照您的设置方式，最后呈现的用户控件实例上的JavaScript函数将在每次调用时被调用，这将导致以前呈现的用户控件实例中的函数被忽略。

- KodeKreachor

---

谢谢回复...我的JavaScript现在有点工作了，但还有一些问题。1）我将pnlsearch id传递给函数，但根据我的代码，在按下标签时面板应该隐藏，但现在不起作用。2）我在我的用户控件中使用了AJAX PopupControl。多个实例之间也存在冲突。请告诉我如何解决这些问题。非常感谢您的帮助。 - raina

嗨Raina，我很乐意帮忙，请您发布更新后的代码以及包含AJAX PopupControl的用户控件示例，谢谢。 - KodeKreachor