부분적으로 데이터를 select2 드롭 다운 목록로드

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

그때 그때

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

내가 '문제 아래 MVC 드롭 다운에 내 목록을 표시하고 있습니다

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

아래처럼 VendorList의 viewbag의 목록을 가져온 거에요 목록에있는 행 수가 많기 때문에 드롭 다운 목록이 응답하지 않는다는 것입니다. 나는 select2를 사용하여 드롭 다운에 사용자 유형을 활성화하여 이상의 항목 드롭 다운 목록을 스크롤하는 것 외에도 자동 제안 지원을받을 수 있습니다.

사용자가 입력하는 내용에 따라 부분적으로 데이터를로드 할 수있는 방법이 있나요? 사용자가 입력 할 때 20 행의 배치를 말하는 것과 같습니다. 나는 단순히 선택 2를

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

Answer 1

당신이 이것을 달성하기 위해 아약스를 사용하여 초기화하고있어 방법을 아래

이다. 컨트롤러에 ajax를 통해 키워드를 보내고 컨트롤러에서 정렬 된 데이터를 다시보기로 가져옵니다.

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

Answer 2

한 번에 문제가 발생했습니다. 나는 우리의 경우 GET 함수를 생성하고 ajax를 사용할 필요가 있다고 생각한다.

선택 2에서 아약스를 사용하는 방법 : 아약스 + MVC 3를 사용하는 방법 https://select2.github.io/examples.html#data-array

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

은 선택 2에게

$(".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 
}); 

를 초기화하려면 다음 코드를 추가합니다