2013-08-04 3 views
3

위대한 일을하는 내 응용 프로그램에는 listboxfor가 있습니다. 하지만 여러 항목을 선택하려면 Ctrl 키를 누른 상태에서 항목을 클릭해야합니다. 이 동작을 어떻게 바꿀 수 있습니까? 목록의 항목을 클릭 할 때마다 항목이 선택되고 다시 누르면 선택 항목 중 하나만 선택이 해제됩니다.MVC ListBox for Ctrl 단추가없는 다중 선택

내 목록 상자 :

@Html.ListBoxFor(m => m.selectedCharts, new SelectList(@Model.Graphs.ToList()) 
                , new { @class = "select_change" } 
       ) 

아니면 나는이 목적을 위해 다른 컨트롤을 사용 하는가?

많은 감사

답변

4

내가 큰 성공을 이전 Bootstrap Multiselect을 사용했습니다.

드롭 다운 할 수없는 경우이 Checkbox list을 대신 사용하십시오.

+0

하는 데 도움이

희망. – Whistler

+0

그럼 체크리스트와 같은 것만 생각하면됩니다. http://www.codeproject.com/Articles/292050/CheckBoxList-For-A-missing-MVC-extension – MartinHN

+1

이 확장 기능은 훌륭합니다. 고마워. – Whistler

1

사용자가 여러 요소를 선택하기 위해 Ctrl 키를 누를 필요가없는보기 좋은 목록 상자를 완성했습니다. 나는 너와 내 일을 함께 나누고 싶다. MartinHN이 제안한 놀라운 확장 CheckBoxListFor를 사용했습니다. 이 웹 사이트 MvcCheckBoxList에서 찾을 수 있습니다.

내보기 코드

@{ 
    var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { @class="styled_list" }); 
         @Html.CheckBoxListFor(model => model.ReportSettings.Ids, 
               model => model.AvailableGraphs, 
               graph => graph.Id, 
               graph => graph.Name, 
               model => model.SelectedGraphs, 
               new { @class="styled_checkbox" }, 
               htmlListInfo, 
               null, 
               x => x.Name) 
     } 

내 CSS는 :

input.styled_checkbox, input[type="checkbox"] 
    { 
    visibility: hidden; 
    width: 0px; 
    } 
.styled_list 
{ 
    background: #aeeefb; 
    border-radius:5px; 
    padding: 10px 10px 10px 0; 
    color: White; 
    font-weight: bold; 
} 
.styled_checkbox 
{ 
    background: #69D2E7; 
    cursor: pointer; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 3px 0 3px 0; 
    padding: 5px; 
    position: relative; 
    width: 250px; 
    border-radius:5px; 
} 
.styled_checkbox:hover 
{ 
    opacity: 0.7; 
} 
.styled_checkbox:checked+label 
{ 
    background: #1a9eed; 
} 

상자가 숨겨져 확인 및 라벨은 해당 요소가 선택 여부를 나타냅니다. 그림을 삽입 할 수는 없지만 모양이 좋아 보이지만 원하는대로 스타일을 편집 할 수 있습니다. 이 멋진 물건이고 결정적으로 가까운 장래에 그것을 사용하지만 그 순간에 나는 목록 해결책이 아니다 드롭 다운 목록을 찾고 있어요 사람