ASP.NET C#中带搜索功能的多选列表框实现求助

Hey there! Let's get that searchable multi-select list up and running for your ASP.NET C# project. I’ve got two solid approaches to share, depending on whether you’re working with traditional Web Forms or ASP.NET Core.

方法1：ASP.NET Web Forms + jQuery 实现 #

This approach works great for classic Web Forms projects, using a native ListBox paired with jQuery to add real-time search filtering.

Step 1: Front-end ASPX Page Code #

Add the search input and multi-select list to your ASPX file, plus the jQuery logic to filter options:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchableMultiSelect.aspx.cs" Inherits="YourProjectNamespace.SearchableMultiSelect" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Searchable Multi-Select List</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Listen for input in the search box
            $('#txtSearch').on('input', function () {
                const searchTerm = $(this).val().toLowerCase();
                // Loop through all list options to show/hide matches
                $('#lstMultiSelect option').each(function () {
                    const optionText = $(this).text().toLowerCase();
                    $(this).toggle(optionText.includes(searchTerm));
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="padding: 20px;">
            <h3>Search & Select Items</h3>
            <!-- Search Input -->
            <asp:TextBox ID="txtSearch" runat="server" PlaceHolder="Type to search..." CssClass="form-control mb-3" Width="300px"></asp:TextBox>
            <!-- Multi-Select ListBox -->
            <asp:ListBox ID="lstMultiSelect" runat="server" SelectionMode="Multiple" Width="300px" Height="200px" CssClass="form-control"></asp:ListBox>
            <br /><br />
            <asp:Button ID="btnSubmit" runat="server" Text="Submit Selected Items" OnClick="btnSubmit_Click" CssClass="btn btn-primary" />
        </div>
    </form>
</body>
</html>

Step 2: Back-end C# Data Binding #

In your code-behind file, bind your data source to the ListBox (replace the sample data with your actual data source like a database or API):

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;

namespace YourProjectNamespace
{
    public partial class SearchableMultiSelect : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // Sample data - replace with your actual data
                var items = new List<ListItem>
                {
                    new ListItem("ASP.NET Core", "1"),
                    new ListItem("Advanced C#", "2"),
                    new ListItem("Entity Framework Core", "3"),
                    new ListItem("jQuery", "4"),
                    new ListItem("SQL Server", "5"),
                    new ListItem("Blazor", "6")
                };

                lstMultiSelect.DataSource = items;
                lstMultiSelect.DataTextField = "Text";
                lstMultiSelect.DataValueField = "Value";
                lstMultiSelect.DataBind();
            }
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            // Collect selected items
            var selectedItems = new List<string>();
            foreach (ListItem item in lstMultiSelect.Items)
            {
                if (item.Selected)
                {
                    selectedItems.Add($"{item.Text} (ID: {item.Value})");
                }
            }

            // Handle selected data (e.g., save to DB, display to user)
            Response.Write($"Selected Items: {string.Join(", ", selectedItems)}");
        }
    }
}

方法2：ASP.NET Core Razor Pages 实现 #

If you're working with ASP.NET Core, here's a clean Razor Pages implementation with the same search functionality:

Step 1: Razor Page (Index.cshtml) #

@page
@model IndexModel
@{
    ViewData["Title"] = "Searchable Multi-Select";
}

<div class="container mt-4">
    <h3>Search & Select Items</h3>
    <input type="text" id="txtSearch" placeholder="Type to search..." class="form-control mb-3" style="width: 300px;" />

    <select id="lstMultiSelect" multiple="multiple" class="form-control" style="width: 300px; height: 200px;">
        @foreach (var item in Model.Items)
        {
            <option value="@item.Value">@item.Text</option>
        }
    </select>

    <button type="button" onclick="handleSubmit()" class="btn btn-primary mt-3">Submit Selected</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function () {
        $('#txtSearch').on('input', function () {
            const searchTerm = $(this).val().toLowerCase();
            $('#lstMultiSelect option').each(function () {
                const optionText = $(this).text().toLowerCase();
                $(this).toggle(optionText.includes(searchTerm));
            });
        });
    });

    function handleSubmit() {
        const selectedItems = [];
        $('#lstMultiSelect option:selected').each(function () {
            selectedItems.push($(this).text());
        });
        alert(`Selected Items: ${selectedItems.join(', ')}`);
        // For server-side submission, use AJAX here to send data to the page handler
    }
</script>

Step 2: Page Model (Index.cshtml.cs) #

using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

namespace YourProjectNamespace.Pages
{
    public class IndexModel : PageModel
    {
        public List<ListItem> Items { get; set; }

        public void OnGet()
        {
            // Sample data - replace with your actual data source
            Items = new List<ListItem>
            {
                new ListItem { Text = "ASP.NET Core", Value = "1" },
                new ListItem { Text = "Advanced C#", Value = "2" },
                new ListItem { Text = "Entity Framework Core", Value = "3" },
                new ListItem { Text = "jQuery", Value = "4" },
                new ListItem { Text = "SQL Server", Value = "5" },
                new ListItem { Text = "Blazor", Value = "6" }
            };
        }

        // Helper class for list items
        public class ListItem
        {
            public string Text { get; set; }
            public string Value { get; set; }
        }
    }
}

Quick Optimization Tips #

• For a more polished UI, use a dedicated library like Select2 (it handles search, multi-select, and styling out of the box with minimal code).
• If your dataset is large, add server-side pagination or async search to avoid loading hundreds of options at once.
• In Web Forms, ensure view state is enabled if you need to retain selected items across postbacks.

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