Я хочу создать страницу, где пользователь может подписаться в категориях, поэтому очевидным решением является использование элемента управления multiselect, я тестировал его с помощью ListBox (HtmlHelper), но вам нужно выбрать, щелкнув элемент управления, так что я нашел хороший Bootstrap control [list-group] Я добавляю код jQuery, чтобы добавить [активный] класс, чтобы выбрать элемент, который содержит код
<div class="list-group">
<a href="#" class="list-group-item">Cras justo odio</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
$('.list-group a').on('click',function (e) {
e.preventDefault();
$(this).toggleClass("active");
});
Мой вопрос здесь: как использовать этот элемент управления в форме в Asp.NET MVC 5, чтобы получить все выбранные элементы, и если пользователь уже выбрал некоторые элементы, и он хочет вернуться к редактированию, как я могу показать ему, что он уже выбрали???
Самый простой способ - использовать ListBoxFor и привязать к свойству array/enumerable в вашей модели.
Например, у вас есть такая модель:
public class ViewModel(){
public string[] SelectedItems
public string[] AvailableItems
}
Затем, на ваш взгляд, используйте ListBoxFor так:
@Html.ListBoxFor(m => m.SelectedItems, new SelectList(Model.AvailableItems))
Наконец, чтобы люди не могли удерживать контроль, чтобы выбрать несколько элементов, добавьте этот javascript
$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});
Мне тоже не нравится держать управление для выбора нескольких элементов в списке с несколькими выборами.
Однако вместо использования <a>
-tags, где "выбранные" значения не отправляются на сервер, я бы рекомендовал вам использовать Multi-Select List и просто использовать плагин jQuery для стилизации и изменения поведения пользовательского интерфейса.
Quick Googling Я смог найти несколько вариантов: http://jquery-plugins.net/tag/multiple-select
ОБНОВИТЬ:
Мне также удалось найти многопозиционные функции, которые работают с Bootstrap 3: http://davidstutz.github.io/bootstrap-multiselect/#examples