WebForms中Select2经Ajax获取结果后无法绑定,显示‘无结果找到’
解决Select2无法加载ASP.NET WebMethod返回的JSON结果问题
嘿,我帮你捋捋这个问题,你的代码里有几个容易忽略的细节,导致Select2没法正确识别返回的结果,咱们一个个来改:
1. ASP.NET WebMethod的返回结构坑
ASP.NET的WebMethod默认会把你序列化的内容再包裹一层d属性,这是ASP.NET AJAX的安全机制。你现在在前端processResults里直接取data.items,但实际返回的JSON结构是被d字段包裹的,所以这里是关键错误!
2. 后端初始列表为空
你后端里List<Select2Model> list = new List<Select2Model>();是个空列表,直接过滤的话不管搜什么都是空结果啊!得先从数据源(比如数据库、缓存)把所有可选的Select2项加载进来,再做过滤。
3. 前端重复定义dataType
你的AJAX配置里写了两次dataType: 'json',虽然不影响功能,但可以删掉一个让代码更整洁。
修改后的代码参考
后端代码
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string GetResults(string q) { // 先从数据源获取完整的Select2Model列表,比如从数据库查询 List<Select2Model> list = GetAllSelect2Items(); // 替换成你实际获取数据的方法 if (!string.IsNullOrWhiteSpace(q)) { list = list.Where(x => x.text.ToLower().StartsWith(q.ToLower())).ToList(); } return new JavaScriptSerializer().Serialize(new { items = list }); }
前端代码
$("#<%=DDL_NAME.ClientID%>").select2({ minimumInputLength: 3, ajax: { type: "POST", url: '<%= ResolveUrl("~/page.aspx/GetResults") %>', dataType: "json", data: function (params) { return JSON.stringify({ q: params.term }); }, contentType: "application/json; charset=utf-8", processResults: function (data) { // 重点:从d属性里取出实际的items数据 return { results: data.d.items }; } } });
额外检查项
- 确认你的
Select2Model类包含id和text两个属性,这是Select2默认要求的字段名(如果你的字段名不同,需要在processResults里做映射,比如return { results: data.d.items.map(item => ({id: item.MyId, text: item.MyText})) })。 - 打开浏览器的Network面板,查看AJAX请求的响应内容,确认返回的JSON结构是否符合预期(应该是
{"d":{"items":[{"id":"1","text":"测试项1"},...]}}这样的格式)。 - 测试后端方法,确保
GetAllSelect2Items()确实返回了数据,不然过滤后还是空结果。
内容的提问来源于stack exchange,提问作者Isak




