Question

我在我的网站中使用了一个用户控件，它执行自动完成文本框的功能。我已经使用javascript进行keydown和onfocus客户端事件。这是javascript的代码

<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页面中使用此控件的单个实例时它工作正常但是当我在我的aspx页面中使用多个实例时，所有控件的javascript都会被我页面中控件的最后一个实例覆盖没有其他控制措施。

如果有人对我的问题有任何解决办法，请告诉我..

我已经搜索过了，没有找到任何解决方案。

Plz帮帮我。对我来说很紧急。

感谢任何帮助。提前谢谢....

Answer 1

以下是我过去如何处理这类问题......

这样的块进入控件ascx中引用的外部js文件。

    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文件中：

<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 ATM，因此这里可能存在错误...

Answer 2

首先，我会在一个地方定义你的javascript功能，可能是父页面，甚至是全局引用的文件。这样，当您在单个页面上使用多个用户控件实例时，您不会反复渲染相同的函数。

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

在渲染的用户控件的最后一个实例上设置JavaScript函数的方式将是每次都会调用的函数，这将导致先前渲染的用户控件实例中的函数被忽略

Answer 3

以下链接中的文章可能有所帮助： http://simpledotnetsolutions.wordpress.com/2011/07/03/multiple-usercontrol-instances-in-a-page-and-jquery/

多个用户控件实例的相同javascript无法正常工作

3 个答案: