Question

我有以下示例代码，其中包含供应商列表。

 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();

Answer 1

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

public JsonResult GetSortedData(string keyword)
{
     // SORT YOUR DATA ACCORDING TO KEYWORD PARAM
     return result.ToJsonResult();
}

Answer 2

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

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

如何使用ajax + MVC 3：Return List to ajax mvc3

СlassSelectListItem看起来像这样

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
});

加载select2下拉列表的部分数据

2 个答案: