ASP.NET Core Razor页面中实现动态数据库加载的自动完成功能

1. 后端实现：搜索建议接口 #

在目标Razor页面的代码后置文件（如Index.cshtml.cs）中，添加异步GET处理方法，用于接收前端关键词并返回数据库匹配数据：

public class IndexModel : PageModel
{
    private readonly YourDbContext _dbContext;

    public IndexModel(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 前端通过GET请求调用此接口，参数为query
    public async Task<IActionResult> OnGetSearchSuggestions(string query)
    {
        if (string.IsNullOrWhiteSpace(query))
        {
            return new JsonResult(new List<string>());
        }

        // 以Product实体的Name字段为例，查询匹配数据
        var suggestions = await _dbContext.Products
            .Where(p => p.Name.Contains(query, StringComparison.OrdinalIgnoreCase))
            .Select(p => p.Name)
            .Take(10) // 限制返回数量，优化性能
            .ToListAsync();

        return new JsonResult(suggestions);
    }
}

2. 前端实现：自动完成组件绑定 #

在Razor页面的CSHTML部分，为输入框绑定自动完成逻辑（需确保已引入jQuery和jQuery UI的脚本与样式）：

<input type="text" id="searchInput" placeholder="输入关键词搜索..." />

@section Scripts {
    <script>
        $(function() {
            $("#searchInput").autocomplete({
                source: function(request, response) {
                    // 调用后端搜索接口
                    $.get(`?handler=SearchSuggestions&query=${encodeURIComponent(request.term)}`, function(data) {
                        response(data);
                    });
                },
                minLength: 2, // 输入至少2个字符触发搜索
                delay: 300 // 延迟300ms避免频繁请求
            });
        });
    </script>
}

3. 数据库上下文配置 #

确保YourDbContext已正确注入到依赖容器，在Program.cs中添加配置：

builder.Services.AddDbContext<YourDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

关键注意事项 #

• 性能优化：为查询字段（如Name）创建数据库索引，避免全表扫描；用Take()限制返回结果数量。
• 大小写处理：使用StringComparison.OrdinalIgnoreCase实现不区分大小写搜索，或根据数据库 COLLATE 设置调整。
• 参数校验：后端需处理空关键词场景，避免无效数据库查询。
• 安全防护：若涉及敏感数据，为接口添加授权验证；前端用encodeURIComponent处理关键词，避免URL编码问题。

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