部分数据加载 select2 下拉列表

Posted 2023-05-07

【中文标题】部分数据加载 select2 下拉列表

【英文标题】：Partially data loading a select2 dropdownlist

【发布时间】：2016-10-14 17:56:26

【问题描述】：

我有以下获取供应商列表的示例代码。

 public IEnumerable VendorList()
        
            var list = new List<SelectListItem>();
            IEnumerable<Vendor> vendorList = this.db.Vendors.OrderBy(n => n.VendorID).ToList();
            foreach (Vendor vendor in vendorList)
            
                list.Add(new SelectListItem  Value = Convert.ToString(vendor.ID), Text = vendor.VendorID );
            
            return list;
        

然后我将列表放入 VendorList 视图包中，如下所示

    [NoCache]
    private void GetData()
    
       ViewBag.VendorList = this.VendorList();
    

然后我在下面的 mvc 下拉列表中显示我的列表

@html.DropDownList("ddlVendorList", ViewBag.VendorList as IEnumerable<SelectListItem>, "Select Vendor", new  @class = "form-control input-sm-mfc-dropdownlist select2" )

我遇到的问题是下拉列表没有响应，因为列表中的行数很多。我正在使用 select2 来启用下拉列表中的用户类型，以便他们可以获得自动建议支持，而不是滚动超过 6768 个项目的下拉列表。

有没有一种方法可以根据用户输入的内容部分加载数据，比如用户输入的一批 20 行？

下面是我如何简单地初始化 select2

  $(".select2").select2();

【参考方案1】：

有一次我遇到了这个问题。我认为在我们的案例中，有必要创建一个 GET 函数并使用 ajax。

如何在select2中使用ajax：https://select2.github.io/examples.html#data-array

ajax + MVC 3 使用方法：Return List to ajax mvc3

Сlass SelectListItem 看起来像这样

class SelectListItem 
    public int id get; set;
    public string text get; set; 

我填写了一个测试值列表

var list = new List<SelectListItem>();
list.Add(new SelectListItem id=0, text="Mapel");
list.Add(new SelectListItem id=2, text="Sunny");

接下来，在控制器中创建一个函数

public ActionResult GetVendors(string query, int page)

   var pageSize = 20;
   var result = list.Where(i => i.Text.Contains(query));
   var total = result.Count();

   return Json( new 
            items = result.Skip(page * pageSize).Take(pageSize),
            total = total
        , JsonRequestBehavior.AllowGet);

添加如下代码初始化select2

$(".select2").select2(
  ajax: 
    url: "/GetVendors",
    dataType: 'json',
    delay: 250,
    data: function (params) 
      return 
        query: params.term, // search term
        page: params.page
      ;
    ,
    processResults: function (data, params) 
      params.page = params.page || 1;
      return 
        results: data.items,

        pagination: 
          more: (params.page * 20) < data.total
        
      ;
    ,
    cache: true
  ,
  escapeMarkup: function (markup)  return markup; , // let our custom formatter work
  minimumInputLength: 1
);

【参考方案2】：

您可以使用 ajax 来实现这一点。通过 ajax 将关键字发送到控制器，然后在控制器中将排序后的数据返回到您的视图中，如下所示。

public JsonResult GetSortedData(string keyword)

     // SORT YOUR DATA ACCORDING TO KEYWORD PARAM
     return result.ToJsonResult();