我有下面的示例代码,用于获取供应商列表。
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 viewbag 中,如下所示
[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();
最佳答案
有一次我遇到了这个问题。我认为在我们的例子中,有必要创建一个 GET 函数并使用 ajax。
如何在select2中使用ajax:https://select2.github.io/examples.html#data-array
如何使用ajax + MVC 3:Return List to ajax mvc3
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"});
接下来,在 Controller 中创建一个函数
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
});
关于jquery - 部分数据加载 select2 下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37804584/