ASP.NET中带隐藏字段的自动补全用户控件多实例冲突问题

算力阿峰

2026-5-21

Hey, I see you're running into conflicts when using two instances of your UCLocations user control on the same page—let's break down why this is happening and fix it!

Why the Conflict Happens

Looking at your snippet, the main issues are:

Broad selector matching: Your $([id$=txtLocation]) selector targets all elements on the page whose ID ends with txtLocation. When you have two controls, this picks up both input boxes, causing the autocomplete logic to interfere with both.
Global function overlap: The GetLocations() function is declared globally. When the second control loads, it overwrites the first control's version of the function, leading to inconsistent behavior.
Duplicate event binding: Each control instance binds to the endRequest event of Sys.WebForms.PageRequestManager, so the autocomplete initialization runs multiple times unnecessarily.

Fixes to Make the Control Instance-Safe

Here's how to modify your user control to work seamlessly multiple times on the same page:

Step 1: Wrap JS in an Isolated Scope

Use an Immediately Invoked Function Expression (IIFE) to create a private scope for each control's JS code. This prevents global variable/function collisions.

Step 2: Target the Exact Control Element

Use the control's ClientID to get a unique selector for its txtLocation textbox, instead of relying on a suffix match.

Updated ASCX code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCLocations.ascx.cs" Inherits="UCLocations" EnableTheming="true" %>
<script type="text/javascript">
    // Isolate each control's JS logic in its own scope
    (function() {
        // Get the unique ID of this control's textbox
        var $locationInput = $('#<%= txtLocation.ClientID %>');

        // Private initialization function for this control's autocomplete
        function initLocationAutocomplete() {
            $locationInput.autocomplete({
                // Add your existing autocomplete config here (source, select handlers, etc.)
                source: function(request, response) {
                    // Your existing source logic—now it only affects this control's input
                }
            });
        }

        // Initialize on page load
        $(function() {
            initLocationAutocomplete();
        });

        // Re-initialize after UpdatePanel partial postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function() {
            initLocationAutocomplete();
        });
    })();
</script>

<!-- Your control's HTML (example) -->
<asp:TextBox ID="txtLocation" runat="server" ClientIDMode="AutoID"></asp:TextBox>

Step 3: Verify Backend Logic (If Applicable)

If your code-behind (UCLocations.ascx.cs) has logic that handles autocomplete data or postbacks, make sure it uses the control's UniqueID to distinguish itself from other instances. Avoid global state that could bleed between controls.

Quick Debug Tip

Open your browser's developer tools (F12) and check the Console tab for JS errors—this will help you catch any remaining conflicts or initialization issues.

内容的提问来源于stack exchange，提问作者Prasanth Kumar Vinakota