ASP.NET用户控件的多个实例与查询自动完成同一页上 [英] Multiple Instances of ASP.NET UserControl with query Autocomplete on same page

问题描述

我是很新的jQuery和一般的Javascript编程所以请耐心等待。

I'm quite new to jquery and javascript programming in general so please be patient.

我有一个包含了jQuery自动完成插件的一个实例的ASP.NET Web用户控件（region.ascx）。 jQuery的code（我有断开后的code为简便起见）是这样的：

I have an ASP.NET web user control (region.ascx) that contains an instance of the jquery autocomplete plugin. The jquery code (i have cutoff the code for brevity) is this:

$(function () {
    initializerRegion();
});

var prmInstance = Sys.WebForms.PageRequestManager.getInstance();

prmInstance.add_endRequest(function () {
    //you need to re-bind your jquery events here 
    initializerRegion();
});

function initializerRegion() {

    $($get('<%= autoRegion.ClientID %>')).autocomplete({
        source: function (request, response) {..........................

的控制工作正常时，只有一个一个asp.net页上的控制的实例。我有一个情况我有两个单独的用户控件（Org.ascx和Place.ascx），每个是一个asp.net页面上region.ascx的一个实例，为此我结束了上述$的两个实例C $℃。如果这仅仅是最后一个实例（place.ascx）的情况下正确初始化工作。另一个实例（org.ascx）不会做任何事情。

The control works fine when there is only one instance of the control on an asp.net page. I have a situation where I have two separate user controls (Org.ascx and Place.ascx) that each have an instance of region.ascx that are on a single asp.net page, therefor i end up with 2 instances of the above code. When this is the case only the last instance (for place.ascx) is initialized correctly and works. The other instance (org.ascx) doesn't do anything.

我想我可以通过将初始化code以上到每个需要它的控制，从根本上摆脱我region.ascx的控制来解决这个问题。我有一种感觉，如果我这样做，使独特的初始化函数的名称它可能工作。

I think I may be able to get around this by putting the Initializer code above into each of the controls that needs it, essentially getting rid of my region.ascx control. I have a feeling that if I do this and make the names of the initializer functions unique it may work.

我的问题是：我是做正确吗？有没有办法解决？

My question is: Am I doing this correctly? Is there a way around this?

推荐答案

在您的code的问题是， prmInstance 变量和 initializerRegion 函数在全球执行上下文声明。所以最后的控制覆盖 initializerRegion 函数定义。为了解决这个问题，你可以换你所有的code自调用的函数如下图所示：

The problem in your code is that prmInstance variable and initializerRegion function declared in global execution context. So the last control overrides initializerRegion function definition. To fix this you may wrap all your code in self called function like below:

(function () {
    var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
    prmInstance.add_endRequest(function () {
        //you need to re-bind your jquery events here 
        initializerRegion();
    });

    var initializerRegion = function () {
        $('#<%= autoRegion.ClientID %>').autocomplete({
            source: function (request, response) {
                //......
            },
            //......
        });

        $(function () {
            initializerRegion();
        });
    })();

这code很适合我：

ASCX：

<script type="text/javascript">
    (function () {
        var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
        prmInstance.add_endRequest(function () {
            initialize();
        });

        var initialize = function () {
            $("#<%= TextBox1.ClientID %>").on("keyup", function () {
                alert(this.value);
            });
        };

        $(function () {
            initialize();
        });
    })();
</script>
<asp:TextBox runat="server" ID="TextBox1" />

ASPX：

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <uc:WebUserControl2 runat="server" ID="ucWebUserControl2" />
        <asp:Button Text="Click Me" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <uc:WebUserControl2 runat="server" ID="WebUserControl1" />
        <asp:Button Text="Click Me" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

这篇关于ASP.NET用户控件的多个实例与查询自动完成同一页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！