ASP.NET MVC용 MultiSelectListBox 컨트롤 도입
페이지 정보
작성자 GrapeCity 작성일 2021-01-05 16:22 조회 3,922회 댓글 0건본문
관련링크
릴리스에서는 목록의 각 항목에 상응하는 체크박스가 있는 고급 ListBox 컨트롤인 ASP. NET MVC용 MultiSelectListBox 컨트롤을 도입했습니다.
필터링 및 모두 선택 기능도 포함되어 있습니다.
이 게시물에서는 컨트롤을 생성하는 단계를 간략히 설명하고 새로운 기능을 소개합니다.
ASP.NET 응용 프로그램용 MultiSelectListBox 컨트롤 구성
새로운 ASP. NET MVC 응용 프로그램을 만듭니다.
ComponentOne ASP. NET Core MVC 응용 프로그램(.Net Core) 템플릿을 사용합니다.
표준 응용 프로그램을 선택합니다(프로젝트 구성에 관한 세부 정보는 참조).
에 기술된 단계에 따라 프로젝트에 모델 및 컨트롤러를 추가합니다.
아래 코드를 해당되는 보기에 추가하여 MultiSelectListBox 컨트롤을 추가합니다.
@{List<string> cities = ViewBag.Cities;}< <div id="multiSelectList" style="width:100%;max-width:400px;height:530px; margin:20px;"></div> <c1-multi-select-list-box id="multiSelectList"> <c1-items-source source-collection="cities"></c1-items-source> </c1-multi-select-list-box>
위 단계를 사용해 구성한 MultiSelectListBox는 아래에서 간단히 살펴보실 수 있습니다.
위 예에서는 MultiSelectListBox를 문자열 값 목록에 바인딩합니다.
데이터 테이블에도 바인딩할 수 있습니다.
데이터 테이블에 바인딩할 때 목록 값을 표시할 데이터 테이블의 필드에 MultiSelectListBox 클래스의 DisplayMemberPath 속성을 설정하십시오.
아래 코드 조각은 MultiSelectListBox를 데이터 테이블에 바인딩하기 위한 것입니다.
<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName"> <c1-items-source source-collection="Model"></c1-items-source> </c1-multi-select-list-box>
MultiSelectListBox에서 확인한 값을 가져오려면 컨트롤의 클라이언트 측 API의 checkedItems 속성에 액세스하십시오.
자세한 내용은 이 를 참조하십시오.
MultiSelectListBox 컨트롤에서 선택
사용자는 MultiSelectListBox를 통해 항목을 개별적으로 또는 일괄적으로 선택할 수 있습니다.
개별 항목 선택을 ‘확인란 선택’이라고도 합니다. 항목을 일괄 선택하는 것을 ‘모두 선택’이라고도 합니다.
체크박스 선택 옵션
체크박스 선택에서 사용자는 해당 항목의 체크박스를 선택하여 해당 항목을 선택합니다.
기본적으로 체크박스가 목록의 각 항목 옆에 표시됩니다.
MultiSelectListBox 클래스의 CheckedMemberPath 속성을 사용해 부울 형식의 데이터 테이블 필드에 각 항목의 체크박스를 바인딩합니다.
목록 항목 체크박스를 필드에 바인딩하면 선택한 목록 항목 및 선택 취소한 목록 항목과 함께 MultiSelectListBox가 로드됩니다.
목록 항목 선택 여부는 부울 필드의 값에 달려 있습니다.
아래는 DisplayMemberPath 및 CheckedMemberPath 속성을 ProductName 및 Discontinued로 각각 설정하는 샘플 코드 조각입니다.
<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName" checked-member-path="Discontinued"> <c1-items-source source-collection="Model"></c1-items-source> </c1-multi-select-list-box>
아래 이미지는 Discontinued 필드로 설정된 CheckedMemberPath 속성이 포함된 제품 목록을 표시하는 MultiSelectListBox를 나타낸 것입니다.
선택 및 선택 취소 항목 세트가 목록에 채워져 있습니다.
모두 선택 옵션
목록 상단에 표시된 모두 선택 옵션을 선택하여 한 번에 모든 항목을 선택합니다.
기본적으로 모두 선택 옵션은 표시되지 않습니다.
모두 선택 옵션을 표시하려면 MultiSelectListBox 클래스의 ShowSelectAllCheckbox 속성을 true로 설정하십시오.
다음은 ShowSelectAllCheckbox 속성을 true로 설정하는 샘플 코드 조각입니다.
<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName" show-select-all-checkbox="true"> <c1-items-source source-collection="Model"></c1-items-source> </c1-multi-select-list-box>
GIF는 목록 상단에 표시되는 모두 선택 옵션을 사용자가 선택하면 목록 항목이 선택되는 모습을 보여줍니다.
MultiSelectListBox에서 필터링
필터링은 데이터의 범위를 좁히는 데 도움이 됩니다.
대용량 데이터 집합으로 작업할 때 유용한 기능으로서, 사용자가 수월하게 선택할 수 있게 해줍니다.
MultiSelectListBox 컨트롤의 특징은 목록 상단의 필터 입력란입니다.
사용자가 필터 입력란에 값을 입력하면 필터 텍스트가 포함된 항목만 표시하고 나머지는 필터링합니다.
기본적으로 필터 입력란은 표시되지 않습니다.
필터 입력란을 표시하려면 MultiSelectListBox 클래스의 ShowFilterInput 속성을 “true”로 설정하십시오.
다음은 ShowFilterInput 속성을 “true”로 설정하는 샘플 코드 조각입니다.
<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName" show-filter-input="true"> <c1-items-source source-collection="Model"></c1-items-source> </c1-multi-select-list-box>
아래 GIF는 필터 입력란에 'la'를 입력한 경우 항목 목록을 필터링하는 모습을 보여줍니다.
필터 입력란의 기본 자리 표시자 텍스트는 Filter로 설정되어 있습니다.
MultiSelectListBox 클래스의 FilterInputPlaceHolder 속성을 설정하여 자리 표시자를 변경합니다.
위와 같이 필터링된 값은 필터링 작업이 수행된 후 자동으로 선택됩니다.
MultiSelectListBox 클래스의 CheckOnFilter 속성이 이 동작을 결정합니다.
기본적으로 이 속성은 “true”로 설정되어 있으므로 필터링된 항목은 자동으로 선택됩니다.
CheckOnFilter 속성을 "false"로 설정하면 선택이 제한됩니다.
MultiSelectListBox 컨트롤을 통해 사용자는 목록에서 하나, 여러 개 또는 모든 값을 선택할 수 있습니다.
대용량의 복잡한 데이터 집합에 이상적인 필터링 옵션도 제공합니다.
댓글목록
등록된 댓글이 없습니다.