如何快速加载ASP.NET Web Forms中的下拉列表？

Got it, let's tackle this head-on—21,500+ records in a standard DropDownList is a recipe for the slow load and janky scrolling you're seeing. Browsers struggle to render that many <option> elements, and transferring all that data over the wire takes forever. Here are the most practical, battle-tested solutions I’ve used to fix this exact problem:

1. Implement Server-Side Search + Pagination (Best First Step) #

Instead of loading every record upfront, let users search for what they need and only load a small batch of matching results. This cuts initial load time to near-zero and eliminates scroll lag entirely.

How to do it: #

• Replace the DropDownList with a TextBox (for search input) and a lightweight ListBox or dynamic dropdown container.
• Create a WebMethod (or ASHX handler) in your code-behind to fetch matching records. Use SQL TOP to limit results to 50-100 at a time, and add a WHERE clause to filter by the user’s search term.
• Use jQuery AJAX to call the WebMethod when the user types, then populate the dropdown with the results.

Example Code:

Frontend (ASPX):

<asp:TextBox ID="txtItemSearch" runat="server" placeholder="Search for an item..."></asp:TextBox>
<asp:ListBox ID="lstMatchingItems" runat="server" Height="200px" Width="300px"></asp:ListBox>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("#<%= txtItemSearch.ClientID %>").on("input", function() {
            var keyword = $(this).val().trim();
            if (keyword.length >= 2) { // Wait for 2+ characters to reduce unnecessary calls
                $.ajax({
                    url: "<%= ResolveUrl("~/YourPage.aspx/GetMatchingItems") %>",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ keyword: keyword }),
                    dataType: "json",
                    success: function(response) {
                        var listBox = $("#<%= lstMatchingItems.ClientID %>");
                        listBox.empty();
                        $.each(response.d, function(index, item) {
                            listBox.append($("<option>").val(item.ID).text(item.DisplayName));
                        });
                    }
                });
            } else {
                $("#<%= lstMatchingItems.ClientID %>").empty();
            }
        });
    });
</script>

Backend (Code-Behind):

using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;
using System.Configuration;

public partial class YourPage : System.Web.UI.Page
{
    [WebMethod]
    public static List<ItemViewModel> GetMatchingItems(string keyword)
    {
        var items = new List<ItemViewModel>();
        var connString = ConfigurationManager.ConnectionStrings["YourDbConnection"].ConnectionString;

        using (var conn = new SqlConnection(connString))
        {
            conn.Open();
            // Parameterized query to avoid SQL injection
            var cmd = new SqlCommand(@"
                SELECT TOP 50 ID, DisplayName 
                FROM YourTable 
                WHERE DisplayName LIKE @Keyword 
                ORDER BY DisplayName
            ", conn);
            cmd.Parameters.AddWithValue("@Keyword", $"%{keyword}%");

            using (var reader = cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    items.Add(new ItemViewModel
                    {
                        ID = reader.GetInt32(0),
                        DisplayName = reader.GetString(1)
                    });
                }
            }
        }
        return items;
    }
}

public class ItemViewModel
{
    public int ID { get; set; }
    public string DisplayName { get; set; }
}

2. Add Virtual Scrolling to the Dropdown #

If you need to keep "browse all" functionality, virtual scrolling lets you load records in batches as the user scrolls. This avoids rendering thousands of <option> elements at once.

Options: #

• Third-Party Controls: Tools like Telerik RadComboBox or DevExpress ASPxComboBox have built-in virtual scrolling—they handle AJAX calls and DOM rendering automatically.
• Custom Implementation: Use jQuery to listen for scroll events on a styled dropdown container. When the user nears the bottom, call your WebMethod to fetch the next batch of records and append them to the list.

3. Optimize Data Retrieval #

Even with partial loads, make sure your database query is as efficient as possible:

• Avoid SELECT *: Only fetch the columns you need (e.g., ID and DisplayName) to reduce data transfer size.
• Add Indexes: Create a non-clustered index on the field you’re filtering/sorting by (like DisplayName) to speed up SQL queries.
• Use SET NOCOUNT ON: Add this to your SQL stored procedure to eliminate extra metadata being sent back from the server.
• Async Data Fetching: If using .NET 4.5+, use async/await in your WebMethod to avoid blocking the server thread while waiting for the database.

4. Replace the DropDownList with a More Efficient Control #

The standard ASP.NET DropDownList isn’t built for large datasets. Consider these alternatives:

• ListBox with Virtualization: A fixed-height ListBox can be modified to only render visible items, drastically reducing DOM elements.
• Autocomplete/Typeahead: As mentioned in step 1, this shifts work to user input, so you never load more than a small set of records at once.

5. Disable ViewState (If Possible) #

The standard DropDownList stores all its items in ViewState, which adds massive overhead for 21k records. If you don’t need to retain the full list across postbacks (e.g., store the selected ID in a hidden field), set EnableViewState="false" on the control to cut down page size.

Final Note: The search + pagination approach is almost always the best choice—it improves both performance and user experience (no one wants to scroll through 20k items!). Virtual scrolling is a solid backup if browse functionality is required.

内容的提问来源于stack exchange，提问作者mbcharney