Флажки для SelectListItem
.Сетевое ядро 2.1
У меня есть рабочий раскрывающийся список с множественным выбором, реализованный с использованием:
<select class = "form-control" asp-for = "SelectedItems" asp-items = "Model.ItemDropdownOptions" multiple size = "20"></select>
Страница получила следующую заполненную модель представления:
public class AllocateDocumentViewModel
{
[DisplayName("Document Id")]
public Guid DocumentId { get; set; }
[DisplayName("Document Name")]
public string DocumentName { get; set; }
[DisplayName("Document Description")]
public string DocumentDescription { get; set; }
[DisplayName("Items")]
public List<SelectListItem> ItemDropdownOptions { get; set; }
public Guid[] SelectedItems { get; set; }
}
И мой контроллер получает эту модель:
public class AllocateDocumentsPostModel
{
public Guid DocumentId { get; set; }
public Guid[] SelectedItems { get; set; }
}
Мой контроллер выглядит так:
[HttpPost]
public async Task<ActionResult> AllocateDocument(AllocateDocumentsPostModel model)
{
......
}
Это все работает просто отлично. Это позволяет пользователям удерживать клавишу нажатой и выбирать несколько элементов. Он также правильно заполняет форму текущими выбранными элементами.
Но, по отзывам пользователей, им нужен флажок рядом с каждым элементом в списке.
Я нашел несколько примеров того, как это сделать с неупорядоченными списками, но есть ли способ как-то сделать это с существующим выбором?
Любая помощь будет принята с благодарностью.
Ответы 1
Вы можете использовать чистый css для реализации этого:
CSS:
<style>
.select-checkbox option::before {
content: "\2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "\2611";
}
</style>
Добавьте имя класса select-checkbox для выбора в представлении:
<select class = "form-control select-checkbox" asp-for = "SelectedItems" asp-items = "Model.ItemDropdownOptions" multiple size = "20"></select>
Но этот флажок является «фальшивым», иначе вы добавите настоящие элементы управления флажками, такие как здесь, или вы можете использовать некоторые плагины, такие как Начальная загрузка Multiselect.