1

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

我有一个包含 jquery 自动完成插件实例的 ASP.NET Web 用户控件 (region.ascx)。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），每个控件都有一个 region.ascx 实例，它们位于单个 asp.net 页面上，因此我最终得到了上述代码的 2 个实例. 在这种情况下，只有最后一个实例（对于 place.ascx）被正确初始化并工作。另一个实例（org.ascx）不做任何事情。

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

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

4

3 回答 3

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>
于 2013-02-20T07:56:18.193 回答
0

编码

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

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

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

让我知道这是否适合您。

于 2013-02-21T06:54:28.643 回答
0

您可以使用 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>

这是一个很好的例子
使用 jquery 自动完成和 asp.net 的三种不同方式

于 2013-02-21T07:02:51.150 回答