部分數據加載select2下拉列表

我有以下示例代碼獲取供應商列表。部分數據加載select2下拉列表

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在下拉菜單中啓用用戶類型，以便除了滾動超過項目的下拉列表外，他們還可以獲得自動建議支持。

有沒有一種方法可以部分加載數據，具體取決於用戶輸入的內容，就像說用戶類型的一批20行一樣？

下面是如何我只是初始化選擇2

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

來源

2016-06-14 StackTrace

您可以使用Ajax來實現這一目標。通過ajax將關鍵字發送給控制器，並在控制器中將已排序的數據返回到您的視圖，如下所示。

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

來源

2016-06-14 07:03:15 barbq

有一次我面臨這個問題。我認爲在我們的情況下，有必要創建一個GET函數並使用ajax。

如何使用Ajax在選擇2：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 
});

來源

2016-06-14 08:30:35

部分數據加載select2下拉列表

回答

相關問題