사용자가 여러 요소를 선택하기 위해 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;
}
상자가 숨겨져 확인 및 라벨은 해당 요소가 선택 여부를 나타냅니다. 그림을 삽입 할 수는 없지만 모양이 좋아 보이지만 원하는대로 스타일을 편집 할 수 있습니다. 이 멋진 물건이고 결정적으로 가까운 장래에 그것을 사용하지만 그 순간에 나는 목록 해결책이 아니다 드롭 다운 목록을 찾고 있어요 사람
하는 데 도움이
희망. – Whistler
그럼 체크리스트와 같은 것만 생각하면됩니다. http://www.codeproject.com/Articles/292050/CheckBoxList-For-A-missing-MVC-extension – MartinHN
이 확장 기능은 훌륭합니다. 고마워. – Whistler