Question

我对jquery和javascript编程很新，所以请耐心等待。

我有一个ASP.NET Web用户控件（region.ascx），其中包含jquery autocomplete插件的实例。 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实例，因此我最终得到了上述代码的2个实例。在这种情况下，只有最后一个实例（对于place.ascx）被正确初始化并且有效。另一个实例（org.ascx）没有做任何事情。

我想我可以通过将Initializer代码放在需要它的每个控件中来解决这个问题，基本上摆脱了我的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

ASP.NET UserControl的多个实例，在同一页面上具有查询自动完成功能

3 个答案: