ASP.NET项目中使用AJAX为Select2加载数据库数据的方法咨询

以下是ASP.NET项目中通过AJAX将数据库id、name字段绑定到Select2控件的完整步骤：

1. 后端接口开发 #

首先需要编写接口返回Select2要求格式的JSON数据，Select2默认要求返回结构包含results数组，数组内每个元素必须有id（对应你数据库的id字段）和text（对应你数据库的name字段）两个属性。

1.1 ASP.NET Core / MVC 示例 #

public class SelectController : Controller
{
    private readonly YourDbContext _db;
    // 注入数据库上下文
    public SelectController(YourDbContext db) => _db = db;

    [HttpGet]
    public IActionResult GetOptions()
    {
        var list = _db.你的表名
            .Select(x => new {
                id = x.Id,
                text = x.Name
            })
            .ToList();
        // 按Select2要求的格式返回
        return Json(new { results = list });
    }
}

1.2 ASP.NET Web Form 示例（一般处理程序ashx） #

using Newtonsoft.Json;

public class GetOptions : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        // 数据库查询逻辑自行实现
        var list = 数据库查询结果
            .Select(x => new { id = x.Id, text = x.Name })
            .ToList();
        context.Response.Write(JsonConvert.SerializeObject(new { results = list }));
    }

    public bool IsReusable => false;
}

2. 前端资源引入 #

Select2依赖jQuery，需要按顺序引入相关资源：

<!-- 优先引入jQuery -->
<script src="本地资源路径/jquery.min.js"></script>
<!-- 引入Select2样式文件 -->
<link rel="stylesheet" href="本地资源路径/select2.min.css">
<!-- 引入Select2脚本文件 -->
<script src="本地资源路径/select2.min.js"></script>

页面中添加Select控件：

<select id="targetSelect" style="width: 300px;"></select>

3. Select2 绑定AJAX数据源 #

$(function(){
    $('#targetSelect').select2({
        ajax: {
            // 替换为你的后端接口地址，Web Form则填xxx.ashx路径
            url: '/Select/GetOptions',
            dataType: 'json',
            delay: 250, // 输入防抖延迟，单位毫秒
            processResults: function(res) {
                return { results: res.results };
            },
            cache: true
        },
        placeholder: '请选择内容',
        // 不需要输入触发查询直接加载所有选项，设为0即可
        minimumInputLength: 0
    });
});

常见注意事项 #

• 如果需要实现搜索过滤，可在ajax配置中添加参数传递逻辑，把用户输入的关键词传给后端做模糊查询：

  ajax: {
      // 其他配置不变
      data: function(params) {
          return {
              keyword: params.term // params.term就是用户输入的搜索内容
          }
      }
  }
  

• 上述代码兼容Select2 4.x主流版本，字段名如果不使用默认的id和text，可通过Select2的templateResult等配置项自定义映射
• 遇到跨域问题时，ASP.NET Core可配置CORS中间件，Web Form可在web.config中添加跨域响应头配置

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