ASP.NET UserControl的多个实例在同一页上查询自动完成

Question

我对jquery和javascript编程一般都很陌生，所以请耐心等待。

我有一个ASP.NET web用户控件（region.ascx），它包含jquery自动完成插件的一个实例。 jQuery代码（我有截止为简洁的代码）是这样的：

$(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实例，因此我最终得到了上述代码的两个实例。当这种情况下，只有最后一个实例（for place.ascx）被正确初始化并工作。另一个实例（org.ascx）不做任何事情。

我想我可以通过将上面的初始化代码放到每个需要它的控件中来解决这个问题，基本上摆脱了我的region.ascx控件。我有一种感觉，如果我这样做，并使初始化函数的名称独特，它可能会工作。

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

Answer 1

代码中的问题是在全局执行上下文中声明的prmInstance变量和initializerRegion函数。所以最后一个控件覆盖了initializerRegion函数定义。为了解决这个问题，你可以换所有的代码中自行调用的函数象下面这样：

(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(); 
     }); 
    })(); 

此代码的工作很适合我：

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> 

Answer 2

该代码

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

是你问题的根源。这转换为$ document.Ready（），它只能处理一次。因此，不要将此区域设置为用户控制级别，而应该总是处于页面级别。在上述场景中，您有两个相同用户控件的实例，但是如果您有两个具有相似初始化的单独用户控件，则代码将会失败。

将上面的代码放在添加用户控件的页面中，并且您的代码应该正常工作。

让我知道这是否适合你。

Answer 3

你可以使用jQuery而不是asp.nettoolkit自动完成，这将让你使用你想

<script type="text/javascript"> 
    $(function() { 
     $("#txtBoxWord").autocomplete({ 
      source: function (request, response) { 

       $.ajax({ 
        url: "AutoComplete.asmx/GetCompletionList", 
        data: "{ 'prefixText': '" + request.term + "','count':'10',contextKey:" + comboboxLang.GetSelectedIndex() + " }", 
        dataType: "json", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        dataFilter: function (data) { return data; }, 
        success: function (data) { 
         $(".ui-autocomplete").css("width", "340px"); 
         if (comboboxLang.GetSelectedIndex() == 0) { 
          $(".ui-autocomplete").css("direction", "ltr"); 
         } 
         if (comboboxLang.GetSelectedIndex() == 1) { 
          $(".ui-autocomplete").css("direction", "rtl"); 
         } 
         response($.map(data.d, function (item) { 
          return { 
           value: item 
          }; 
         })); 
        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert(textStatus); 
        } 
       }); 
      }, 
      minLength: 1 

     }); 
    }); 
</script> 

，这是一个很好的例子
Three different way of using jquery autocomplete with asp.net